2017-06-16追記：Atomic Designをフレームワークに採用すべきでないという結論になりました。悲しい。こちらの記事でもう少し技術的な考察をしています。 Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える 久しぶりにいくつかコーディングの仕事をすることになりそうで、CMSの構築と比較して効率化できていなかった、CSSの設計を見直すことにしました。 最近のCSS設計は、OOCSS・FLOCSS・SMACSSなどがあり、高度かつ多岐に渡ります。ウェブデザイン設計についても、Material Design・Atomic Designなどがあります。 どれも素晴らしい内容なのですが、どうも私の中ではもやもやとしています。 かつてと比較すると、あまりにも理系寄りで難解だと感じるのです。 難解すぎると感じる背景 誤解しないでいただきたいですが、私自身
こんにちは、エンジニアの尾形です。 前回のブログではHTML/CSSコーディングを行なうにあたっての事前準備についてお伝えしました。 今回はCSS規約やSassによるコーディングの実例について、ごく一部ではありますが、ご紹介します。 FLOCSSをベースとした構成について 前回のブログで少し触れましたが、CSSコーディングを行なうにあたり、FLOCSSをベースとしたCSS規約を作成しました。 数あるCSS方法論の中でFLOCSSを採用した理由は以下の通りです。 コンポーネントの概念がエンジニアにとって馴染みやすい。 候補のひとつであったBEMの概念が含まれている。命名しやすい。Sassとの相性が良い。 再利用性や拡張性が高く、機能追加や仕様変更に柔軟に対応できそう。 情報量が比較的多くわかりやすい。 FLOCSS本家サイト hiloki/flocss: CSS organization m
詳細度の広い順に定義をしていくため、下のレイヤーに行くにつれ詳細度は上がっていく。 Settingsプリプロセッサなどで利用するグローバル変数や全体の設定を置く。 ここではプロジェクト内のグローバルな設定を記述する。（SASS 変数や CSS Variables の定義） $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $white: #fff !default; $black: #000 !default; $gray: #f8f9fa !default;
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
子孫、子、兄弟セレクタ 木構造になっているセレクタのスタイル適用範囲を知る 木構造になっているセレクタ 文脈セレクタあるいは子孫セレクタ （空白文字区切り） の場合 子セレクタ （ > 区切り） の場合 隣接セレクタ （ + 区切り） の場合 木構造になっているセレクタ HTML文書は、必ず１つの要素から枝分かれを繰り返して、樹木が枝を伸ばすように要素が広がっていく構造になっています。このような構造を木構造（きこうぞう）といいますが、この木構造の関係を利用してセレクタを指定することができます。 文脈セレクタあるいは子孫セレクタ （空白文字区切り注１） の場合 要素が入れ子の構造になっている場合、外側の要素を親要素、内側の要素を子孫要素といいます。この関係で指定するセレクタを文脈セレクタといいます。 注１：文脈セレクタはセレクタを半角スペースで区切って並列して記述します。
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く