HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その１ - Qiita
本記事は、筆者がチームに新人きた際に作ったHTML/CSSの練習課題の改訂版です。 狙い 課題は以下の3つを目標に作成しました。 BEM記法に慣れてもらう。 パーツ同士が疎結合なクラス設計を意識できるようになる。 保守性を大事にするマインドを身につけてもらう。 対象 HTMLとCSSがとりあえず書ける初心者から中級者への一歩目を踏み出したい人 やくそく HTMLタグは正しく使う（brタグ連打で間隔を調整したり、なんでもdivタグで済まさない）。 レスポンシブに作る（PC用とSP用にそれぞれHTMLを書いて画面幅によってdisplay: none;するのは禁止）。 クラス名はBEMに従う。 装飾にidは使わない。 タグに直接にスタイルを指定しない（ただし例外もある）。 !importantは絶対に使わない。 Javascriptで高さや幅を制御するのは禁止。 今回はモダンブラウザ(chrom
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その２ - Qiita
その１では、PC時のパネルのスタイルを作るところまでやりました。 本記事はその続きです。 パネルをレスポンシブにしよう SP時の要求 SP時(768px未満)はアイコンとタイトルを横並びにします。 以下のクラスにメディアクエリでブレークポイントを設定します。 .panel__header .panel__header__icon .panel__header__text CSSで要素を横並びにするには以下の選択肢があります。 floatで浮かせる。 position:absolute;で浮かせる。 tableタグまたはdisplay:table;でテーブル組みをする。 display:flex;でflexboxを利用する。 この中ではflexboxが圧倒的に便利です。 flexboxは昔は一部のブラウザしかサポートしていなかったのですが、今はほぼすべてのブラウザがサポートしているので積極的
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その３ - Qiita
<li class="panels__item panel"> <div class="panel__header"> <div class="panel__header__icon"> <img src="dummy.png" alt="ダミー"> </div> <div class="panel__header__text">タイトル1</div> </div> <div class="panel__content"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="panel__footer"> <ul> <li>補足補足補足補足</li> <li>補足補足</li> </ul> </div> </li> 筆者の場合は.panels__item要素に.panelをつけることでパネルの高さを揃えてい
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その４ - Qiita
その３では、与えられた課題をついにクリアし、しかも急な追加要求までこなすことができました。 これであなたも立派なフロントエンドエンジニア、とはすぐにはいきません。 IE11での評価はしましたか？ さあIE対応だ IE11のサポートが切れた未来にこれを読んでいる人にこの記事は必要ありません。 きっと素敵な世の中になっていることでしょう。 さて2018年現在、IE11をサポートしなければいけない現場がほとんどでしょう。 もしサポートはChromeだけでいいよと言われている幸運な人がいたらその人もこの記事を読む必要はありません。 これまではChromeなどのモダンブラウザで表示確認をしてきたと思いますが、今度はWindowsのIE11で確認してみてください。 きっとどこか崩れたでしょう？ 筆者のコード例も見事にIE11で崩れています。PCサイズで確認していますが、まるでSP時のような縦積みになっ
久しぶりに大量のCSSを書いたら楽勝だった話 - Qiita
すごく久しぶりに大量のCSSを書きましたので、思ったところまとめてみました。 今回しない話 CSS in JS Scoped CSS 今回するのは、全部がグローバルに突っ込まれる、オールドファッションなCSSの話です。 再利用性の高いコンポーネントとは何か？ せっかく久しぶりに書いたので、再利用性を 極限まで 高くするための方法を真剣に考えてみました。 結論 子要素をほとんど持たないコンポーネントほど、再利用性が 異常に 高い。 たとえば、一般的な事例としてですが、ボタン用のクラスは 100% 再利用できます。 // button.sass .button &--action color: white background-color: $green &--caution color: white background-color: $red
CSS設計 BEMを使うとき - Qiita
参照元画像 はじめに 良いCSSを書く方法として、CSS設計がいくつかあります。 その前に、そもそも良いCSSとは？ ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい とのことです。 で、良いCSSを書くためのCSS設計の1つとして妖怪人間BEMがあります。 もちろん良いCSSが達成できるなら、必要なし 今回はCSS設計ルールの1つであるBEMについてまとめてみました。 BEMとは BEMとは、Block、Element、Modifierの略語 Block ⇒ 塊 Element ⇒ 要素 Modifier(kyeとvalueで表す) ⇒ 状態（変化） なぜBEMを使うの？ ・長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやくするため ・チームのスケーラビリティ ・コードの再利用性 私が使う理由は、ブロックの再利用があるかも！？と思った時にBEMを使用しま
BEMの命名規則に関する注意点メモ - Qiita
この形が基本形だと思います(modifirierは今回関係なかったので、省略)。 つまり、 Block__Element__ElementというようにElementの下にさらにElementが来てしまうと、 親ー子ー孫の関係になってしまうので、これはBEMの命名規則を無視した書き方になってしまうのかと思います。 実際に書いていても階層が深くなるため、可読性が下がる気がします。 また、＆（アンパサド）を使う際にもBlock_Element_Elementの構造では、 &__Element__Element と書くことになり、読みやすくした意味がなさそうな感じなってしまいます。 以上のことをふまえながら、目コピなどする際は名前の付け方を意識してはいかがでしょうか。 以上です。 今後ともご指導ご鞭撻よろしくお願いいたします。 p.s. ＆（アンパサド）ってアンドの本名みたいなものなのでしょうか。
FLOCSSをベースとしたオレオレCSSルール - Qiita
My CSS Rules 仮にDOCSSと名付けました。こちらから オレオレルールになるまでの経緯 「CSS設計の教科書」を読んでから色々考えるようになって、FLOCSSがいいとこ取り感があっていいなーって思って採用していたのですが、自分のように1人でコーディングする場合にページ単位でブロックを作るのがベストかなとか思い始めたのがきっかけです。 色々試行錯誤の末、今のようなルールになりました。 ElementのElement こちらを参考にキャメルケースでやったら結構スッキリしました Modifier Modifierが今でもまだむずいなーって思ってる所です。 実際、CSSのセレクタとかで解決できちゃう場合も多く、ただそうなった時にわかりやすさが無くなってしまうのでModifierの方がいいよなーってなったり。。 PageBLockの依存 当たり前ですが、PageBLockがそのページに依
一番詳しいCSS設計規則BEMのマニュアル - Qiita
一番詳しい(当社比) この記事は 大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注 多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球 の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている SCSSを使用する 基本的に
BEMの命名規則とスタイルの当て方について - Qiita
BEMの命名規則がいまいち分からない方は必見。 またスタイルを当てていると、いざ変更があった場合に依存関係に困ることがある人も多いハズ。 個人的な書き方を備忘録として書いておく。 おさらい Block 構成のルートとなる要素。この要素はどこにでも置くことのできる、独立して動作するもの。 Element Blockに紐付いて定義される子要素。Blockの要素内のパーツであり、Block要素なしでは動作しないもの。 Modifier 元となるBlockまたはElementの要素から変化した状態を表す要素。元となる要素なしでは動作しないもの。 Block, Element, Modifierは全てkebab-caseで記述する。 Block-Element間は__で接続する。 Block-Modifier間、Element-Modifier間は_で接続する。 Modifierは状態の名前と値をセ
今更ながらBEMについてと、それに対応するSassについてまとめてみる - Qiita
今更ながらBEMについてのまとめです。 学習コストも低く、取り入れやすいので、勤めている会社でもこちらを使用しています。 以前は、BEMとMindBEMdingはわけて読んでいた気がしますが、今ではBEMといえばMindBEMdingという感じでしょうか？ BEMでは基本的にclassを使用します。 そして、クラス名は、Block, Element, Modifierの3つに分けて考えます。 Blockは全体を指すもので、その要素がElement、BlockとElementそれぞれの別バージョン（色違いなど）がModifierと呼ばれます。 具体例を見てしまった方がわかりやすいと思います。 <div class="media"> <div class="media__image"> <img src="" alt="" /> </div> <div class="media__text">
FLOCSSメモ - Qiita
レイヤー 下記のレイヤーから構成される。 Foundation - reset/normalize/base... Layout - header/main/sideber/footer... Object Component - grid/button/form/media... Project - articles/ranking/promo... Utility - clearfix/display/margin... 1. Foundation reset.css、base.cssなどのブラウザのデフォルトスタイル（タグ要素への指定）を定義。 ページ全体の背景やタイポグラフィなどが該当する。 2. Layout ページを構成するヘッダー、フッター、サイドバー、メインコンテンツといった広域の共通部品の定義。 ページ単位で唯一の部品となるためIDセレクタによる指定を行っても良い。 3.
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
<div class="p-hoge"> <div class="p-hoge__photo"> <img src="aaa.jpg" alt=""> </div> <div class="p-hoge__text"> テキストテキスト </div> </div> modifierをつけて要素のstyleを切り替えたい、みたいなことはよくあると思う。 .p-hoge <----> .p-hoge--reverse でも、sassはネストしまくると 可読性が悪い 検索しづらい ので私も基本は、ネストさせないようにしている。 https://qiita.com/tatsuyankmura/items/49ac82183415b7779df1 その辺を踏襲しつつ、より良い書き方を探ってみることにした。 ※(注) BlockとElementをネストはさせないけど、modifierは「&」でネストさ
【初学者向け】HTML/CSSでのclassの命名を考える 〜CSS設計（BEM）を学んでみよう〜 - Qiita
とかのアレ（hoge部分）です。 この投稿は HTMLやCSSは書けるけれど、使いこなすためにもう一歩勉強したい classの命名にいつも迷う 現場で使われている技術や知識を身に付けたい こんな人を対象に書いた、初学者向けの投稿です。 CSSの設計とBEMの非常に初歩的なところを解説していきたいと思います。 CSS設計の初歩的なところを考えてみる classの命名っていうけどidじゃだめなの？ Qiitaを覗いてるみなさんには当たり前のことかもしれませんが、一応このあたりから書いていきたいと思います。 HTMLおよびCSSにはclassとidの２種類の名前の付け方がありまして、その名前が一致するものを紐づけてスタイルを書いていきます。 classとidの違いは、ページ内に複数存在できる(class)かできない(id)かです。 なので、正直idだけでページを作ることも可能です。が、一般的には
【CSS】BEMのデメリットについて - Qiita
BEMはとても便利で個人的に大好きなCSS設計です。しかし、他の記事では見たことがない(と思う)ようなデメリットを感じました。 それは、「別のBlockのElementを使い回せない」ことです。 <header class="header"> <a href="#" class="header__button">Button</a> </header> ... <footer class="footer"> <a href="#" class="footer__button">Button</a> </footer> .header { ... } .header__button { color: #fff; background-color: #f00; padding: 5px 15px; } .footer { ... } /* .header__buttonと同じスタイル */ .
BEMを実際に使ってみて - Qiita
block block__element block__element--modifier block--modifier block--modifier__element メリット/デメリットをさらっと書いてみます。 メリット ソースコードの統一性を保つ スタイルの汚染を防ぐ HTML構造が明確になる 再利用・拡張性に優れる デメリット 開発スピードが遅くなる 支持を得にくい メリットを享受できるかどうかは、BEMをちゃんと理解しなきゃいけない 破綻寸前になる前に ちゃんと「コーディングルール」や「スタイルガイド」といったドキュメントを揃えておく BEMで躓いたところ サムネイルとテキストがあるリストボックスです。 特にmodifierですね。。。 <div class="box"> <div class="box__thumb"> <img src="" alt="" class="b
自分にちょうどいいCSSの書き方 - Qiita
CSSは敷居が低い分、書く人がある程度一貫性を意識して書かないと、すぐに破綻してしまうところがあって、いろんな方がいろんな手法を編み出していて、ベストプラクティス！と呼べるものが複数あるような状態だと思います。 自分としては、つまるところ書く人（達）が書きやすく管理しやすい方法であれば何でもいいと思うし、プロジェクトによっても答えは変わる話だと思うので、「これがサイコー！」みたいなことはなかなか言いづらいなあとおもっていたんですが、 最近は、複数人で制作するケースなどもあるので、あらかじめ「自分にとってのちょうどいい」を明文化して おけば、一緒に仕事をするときに「こいつは、こういうのがちょうどいいやつなんだな」と思ってもらえるかなと思い、まとめてみました。 2018-07-31更新: CodePenのサンプルをいくつか追加しました。 🚩基本姿勢 完璧な管理は目指さない。 管理のために迷う
BEM-Methodology Definitionsの日本語訳。 - Sooey
BEM-Methodology Definitionsの日本語訳。 YandexのBEM-Methodologyが方法論としてあちこちで参照されているのを見かけることが増えてきて、ちょっと変わったCSSの命名規則、みたいな認識が持たれるようになってきた。 しかし、原典である「BEM-Methodologyとは一体何なのか」という情報はなかなか説明されず、このままだとBEMを導入するチーム内で齟齬が生まれることもあるだろう、ということで、HTML/CSSマークアップに適用する際のエッセンスとなりそうなDefinitionsというページだけ日本語に訳した。 https://github.com/juno/bem-methodology-ja 最初は本家サイトのリポジトリをforkして作業していたのだけど、どうもCMSというかHTML生成のプロセスがYandexの独自ツールを使っていて、表示確認
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Element Modifierと同じノリでElementの見た目を変えれるBlock ModifierのSassの書き方 - Qiita
BEMによるコンポーネント設計 - Qiita
