すべてのカテゴリ

ラッパー等の空間の取り方で最近学んだことのご紹介です。サイト制作ではページ毎にコンテンツ幅が様々です。スペースを固定幅で指定していると、画面サイズの変化でズレが生じます。私がまさにそれで、無駄なスペーシングやその場しのぎのラッパーが増えたりしていました。参考としたサイトでは、 基準はヘッダーの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()関数を用います。最小値を指定することでモバイル表

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