はてなブックマーク

カレーライスを作りました ※スマホではバグりますすみません See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen. どうやって作ったの この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。 実業務ではきっと役には立ちませんので、 「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。 パーツを細かく作る カレーのカレーによるカレーのためのAtomic Designの記事で言及した、 Atomic Designの考えを元にして作りました。 Atomsの用意 にんじん じゃがいも 牛肉 切った具材 米 皿 これらをどう作ったか後ほど解説します。 （厳密には米はMoleculesですが、まぁよしとしましょう。） これらを全て組み合わせ

概要 最近バックエンドからフロントエンドになり、「CSSアーキテクチャについてお勉強してみよう！」ということで、一旦代表的なものをまとめてみました。 CSSアーキテクチャとは cssの設計方法 命名規則やディレクトリ構成や色々ある 汎用性を持たせる設計をするために、誰がみても、途中で誰が入っても構成等がわかるように設計しようねという思想からきてるっぽい BEM コンセプト CSSセレクタの命名規則と言われている Block,Element,Modifierの略 Block:塊 ヘッダー、ナビゲーション、フッターなどのパーツ 独立してる Element:要素 検索ボタン、検索ボックスなどの部品 機能を持っている Modifier:装飾 部品の状態の色等の装飾 実例 命名規則 blockに対して、elementとmodifierをそれぞれ_(アンダースコア1つ)・__(アンダースコア2つ)・-