50代 プログラミング 独学
さて、こんな私もプログラミング学習が一段落したので、今のところ固まっている自分なりの規則を忘備録として記事にしておこうと思います。
この記事はあくまで自分用です。参考にはなりませんので、あしからず。
| font-size margin,padding 要素の大きさ | rem |
| 親要素にあたる包含的なcontainer 画面幅いっぱいに表示させたい要素 | ％ |
| letter-spacing 疑似要素との間隔 | em |
| borderなどの可変させたくない要素 | px |
| ヒーローイメージやモーダルウィンドウなど、 画面を占有して表示させる要素 | vw vh |
/remとemの違い/
rem・・・HTMLのフォントサイズ（16px）を基本とする単位。1rem=16px。
em・・・親要素のフォントサイズを基準に相対的なサイズを指定。
| container | 入れ物 |
| wrapper / wrap | 包むもの |
| box | ボックス |
| content | 内容物、コンテンツ |
| area | 範囲 |
| item | 項目、アイテム |
| row | 横列 |
| colum | 縦列 |
| ディレクトリ名 ー ファイル名 | ファイル名 内容 |
| Foundation _base.scss | 装飾の基本の定義。 font-sizeやcontainerサイズ等、 サイト全体に適用される内容 |
| Layout _header.scss _footer.scss | header、footerに適用する装飾 |
| Component _btn.scss _page-title.scss | ボタンやページタイトル等、 各ページで使いまわす要素の装飾 |
| Project _top.scss _about.scss _contact.scss等 | そのページでしか使用しない装飾 |
/BEM、FLOCSS記法ベースのclass命名法/
要素にclassをつける場合、
B・・Block（大枠となる独立した要素）
E・・Element（Blockの中の子要素）
M・・Modifire（BlockやElementから分岐した子要素）
Block__Element–Modifierの方法で命名する。
例）
header__items–contact
header__items__about
これを基本とし、要素を格納するファイルが所属するディレクトリ名の頭文字を記述する。
例）headerはLayoutディレクトリ内の _header.scssに格納するので、lを最初につけて、
l-header__items–contact
l-header__items–about
と記述する。
例）ボタンを使い回すが、それぞれ細かな変更がある場合。
ボタンは各ページで再利用可能なのでComponentディレクトリ内の _btn.scssファイルの所属となる。
c-btn__link—blog
c-btn__link—episode
/使いまわしパーツ周辺の余白調整について/
c-btn__mt
c-btn__mb
のようにclassを別に付与して上下左右の余白を調整する。
場合によってはBootstrapのように、
f-mt__8（余白8rem）
f-mt__16（余白16rem）・・・・・
をあらかじめ用意しておく場合もあるが、あまり使わない。この方法だと、HTML上で余白を設定することとなり、レスポンシブ対応時にかなり不便。
/余白について/
単位はremを使用する。
8rem、16rem、24rem、32rem、64rem
のように8の倍数を使用。
余白はmarginで設定。
paddinngは使用しない。
/レスポンシブ対応のブレイクポイント/
@media (max-width: 428px) （スマホ）
@media (min-width: 429px) and (max-width: 960px) （タブレット縦）
@media (min-width: 961px) and (max-width: 1280px) （タブレット横）
@media (min-width: 1281px) （PC）
記事一覧ページへ