BEMのBlockはElementを入れ子にせずにコンポーネント化しようBEMでコーディングしていると、Elementが入れ子になってしまうことがありませんか？ 設計になれないとどういう単位でBlockにしてコンポーネント化するのか迷ってしまうかと思います。 そこでBEMのBlockはどういう単位で作ればいいのか基準を紹介します。 BEMがよくわからない人は最初に「{% post_link slug='bem-css-cording' /%} 」を読んでみ...BEMHTMLCSS
BEMでCSS設計する人のためのわかりやすいコーディングサンプルBEMでCSS設計する人にわかりやすいサンプルはこれだ！っていう例があります。 わからない人にいきなりBlock・Elment・Modifierと言っていきなり理解できる人も少ないですよね。 そこでペットボトルをBEMでコーディングしたサンプルが説明するのに、一番わかりやすいのでは？と思っています。 BEMでCSS設計したコーディング BEMは冒頭に書いたようにBlock・El...BEMHTMLCSS
初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法HTMLとCSSで横並びを実現する方法はいくつかあります。 これまでは対応するブラウザや横並びのレイアウトによって方法を変えてきましたが、横並びを実現するための1つの方法としてdisplay: flex;```が実用レベルになりました。 ```dispaly: flex;```を使うのが横並びを手っ取り早く簡単に実現するのに一番おすすめな方法です。 この記事では```displa...HTMLCSS
CSSスタイルガイド作ってる？！手軽に導入するならfractalがおすすめスタイルガイドで作るときにコメントを書くのがつらい・・。 これを思っているのって自分だけかな。 便利にするはずのスタイルガイドの運用がつらいと更新を続けるモチベーションも下がってしまう。 そんな時にコメントを問題を解消できるfractalを知ってからずっと使っているけど、やっぱりテンプレートはスタイルシートとは別の方がすっきりする。 CSSにコメント...Style GuideCSS
サイドバーの追従固定をCSSだけで実現する方法一定量スクロールするとサイドバーを追従して固定させたい時は結構ある。 実現するにはこれまでJavaScriptを使う必要があったけど、CSSだけで実現できるようになってすごい楽になった。 まずはどうやってCSSだけで実現するのかサクッとサンプルを。 stickyで固定する サイドバーを追従固定するにはCSSのposition: sticky;を使うことで実現できる。 ...CSS