すべてのカテゴリ

ラッパー等の空間の取り方で最近学んだことのご紹介です。サイト制作ではページ毎にコンテンツ幅が様々です。スペースを固定幅で指定していると、画面サイズの変化でズレが生じます。私がまさにそれで、無駄なスペーシングやその場しのぎのラッパーが増えたりしていました。参考としたサイトでは、 基準はヘッダーのLogoを基準(ピンク線)としてArticle部分を揃えたい、という内容。そこで以下を取り入れてレイアウトしていく。1.ビューポート単位2.calc（）関数 3.max（）比較関数 4.CSS変数上記を軸としてスペースを動的な値として指定してコンテンツを整列します。動的パディング=（ビューポート幅 - ラッパー幅）/ 2としてスペース幅の値を求めます。例❖Logo（ピンク線）にArticle部分を揃えるpadding-leftの値を取得したいビューポート：１３００ｐｘ ラッパー：１１００ｐｘ(内:水平方向のパディング、左右に各16px)上記からpadding-left=(1300px - 1100px) / 2 ⇓ビューポートを100vwに置き換えてpadding-left: calc((100vw - 1100px)  / 2)↓更に水平方向のパディング考慮する padding-left: calc((100vw - calc(1100px - 32px)) / 2)⇓⇓これで『ロゴ』(ピンク線)と『Article title』のアタマが揃いましたが、モバイルで『Article title』のパディングがゼロになりズレ発生。ここでmax()関数を用います。最小値を指定することでモバイル表

BEM（Block, Element, Modifier） は、CSSクラスの命名規則・設計手法のひとつです。ロシアのIT企業 Yandex が考案し、CSSの構造を整理して再利用性や保守性を高めることを目的としています。名前の由来B (Block)独立して意味を持つ部品（コンポーネント）。例：header、menu、button など。E (Element)Blockを構成する要素。Blockに依存して存在します。例：menu__item、button__icon など。M (Modifier)BlockやElementの状態やバリエーションを表す修飾。例：button--large、menu__item--active など。特徴とメリット明確な構造クラス名だけで要素の役割が分かる。CSSの衝突を防止セレクタをネストさせなくても、スコープが明確になる。再利用しやすい他のページやコンポーネントに持ち込んでも意味が崩れにくい。大規模開発に強いチーム開発でも「誰が書いたCSSか分からない問題」を回避できる。デメリットクラス名が長くなりがち例：header__nav__item--active小規模サイトだと「やりすぎ」になる場合もある。BEMの位置づけCSS設計の代表的な手法のひとつで、他にもOOCSS（Object Oriented CSS）SMACSS（Scalable and Modular Architecture for CSS）ITCSS（Inverted Triangle CSS）などと並んで、大規模サイトや長期運用プロジェクトでよく採用されています。

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう