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にはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
BEMによるCSS設計の方法を解説。命名規則から使い方まで
BEMとは BEMは命名規則など、CSS設計の考え方のアイデアのことです。（構成案） BEMはBlock, Element, Modifierの頭文字をとったものです。 BEM 公式サイトの文章を引用します。 BEM Quick start BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copyin
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
こんにちは。マツコです。 突然ですが、CSS設計はとても重要なものです。 一定のルールがないと、コーダー各々が違う考え方でスタイルづけをして余計なCSSが増えてしまったり、本人でなければ分からないルールが発生してしまい、メンテナンスがしにくくなってしまいます。 そのため、以下のことを強く意識してCSS設計を行うことが大切だと言われています。 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 今回は上記の目的を達成するヒントとなる、著名なCSS設計手法である「OOCSS」「BEM」「SMACSS」についてお話したいと思います。 概要 Object Oriented CSS(オブジェクト指向CSS)の略。 オブジェクト指向に基づいて、考案された設計手法です。 Yahoo!のNicole Sulivan氏によって開発され、Twitter（とBootstrap）やGithub、Youtub
![CSS設計における3大メソッド[OOCSS][BEM][SMACSS]](https://cdn-ak-scissors.b.st-hatena.com/image/square/94577520dd0c042b59881ef47d3f516b991bd3b5/height=288;version=1;width=512/https%3A%2F%2Fdxo.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2016%2F03%2Feyecatch.png)
BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。 画像1：BEM で命名されたコンポーネントの例 Block（ブロック） Block は、独立しており再
BEMが破綻する理由
ここ数年、CSSも設計の重要度が高まり、様々な設計手法が出てきています。 「OOCSS」「SMACSS」「BEM」などが代表的な手法で、これらの考え方をベースにした派生版も優秀なものが出てきていますよね。 弊社ではBEMをベースにFLOCSS等を交えたCSSガイドラインを使用しています。 良い面も多いですが悪い面もあり、導入が失敗だったと感じたこともありましたが、いまは慣れたこともあり使用しています。 今回はBEMが破綻するケースを挙げてみたいと思います。 あくまでも慣れ、スタッフの認識度合いによりますので参考程度に読んでみてください。 デメリット 1. BEMの記述法、概念 ここが曖昧なままだとCSSの設計はすぐに破綻します。 まずは以下のような情報に目を通すことが重要ですね。 https://en.bem.info/ https://csswizardry.com/2013/01/mi
フロントエンドの命名や設計の基本と自分の現在の設計 - Qiita
上記の他に以下のような規則も必要に応じて設けると良いでしょう。 接頭辞（プレフィックス）を必要に応じて付ける（例：is-xxxx） 単語は略語を使用しない（NG例：cnt, hdg, tbl） 参考 変数名の命名規則/＊＊ケースの使い分け 命名方法 命名規則が決まればそれに則って命名すれば良いのですが、どういう単語を使えば良いのか指標がほしいところです。 英単語がすぐ出てこないような時はネーミング辞書 Codicを使ってみると良いです。命名の参考としては良いツールだと思います。 目的や内容によっては汎用的に使える英単語も存在します。例えば、レイアウト用の要素としてcontainer, row, col。ジャンル・業界別の要素としてabout, results,productsなど。 レイアウト用のclass名や汎用class名に関してはいろんなCSSフレームワークのコードを見て研究すること
Webクリエイターの為の情報サイト | Web Programming Portal
みなさまどうもこんにちは。 続きまして少し高度なCSS文法について勉強していきましょう。 当サイトのCSS入門編で紹介したセレクタの記述方法は要素を直に指定するのみでした。こんな感じですね。 p { color: red; } p.test { color: blue; } p#test { color: aqua; } セレクタ指定の方法は色々な記述方法がありますが、まず『◯◯要素の中にいる◯◯要素に対してCSSデザインを反映させる』方法を紹介します。 記述方法はとても簡単でいずれかの要素を記述した後に半角スペースを空けてさらに要素を記述すればOKです。以下のような感じですね。 p span { color: red; } 上記の場合はp要素の中にいるspan要素のみデザインを反映させることができます。HTML要素で考えると以下のような感じです。 <p><span>ここはデザイン反映され
良いCSSとは - Qiita
CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ）な言語です。 では良いCSSとはどのようなものでしょうか ？ それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSはHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も１つしかありません。CSS
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
【CSS】table-cellを使って要素を均等に配置する方法 - ディレイマニア
目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 ←今回はこれ 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 要素を均等に配置したい場合に使うと便利 まず、table-cellの基本的な書き方はこちらの記事をご覧ください。⇒【CSS】table-cell
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS Bin
jsdo.it
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
div内で下揃え - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録