BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
SMACSSによるCSSの設計 | 前編 ベースとレイアウト
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース：要素そのもののデフォルトスタイル レイアウト：ページをエリアごとに分割 モジュール：再利用可能なパーツ 状態（ステート）：レイアウトやモジュールの特定の状態を示す テーマ：サイトのルック＆フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS（日
Compassで簡単、CSSスプライト作成 | 第1回 CSSスプライト作成の基礎
Compassで簡単、CSSスプライト作成 第1回 CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか？ この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
