CSS

  • 2020.09.27

「構造」と「スキン」の分け方について

OOCSSのルールが固まってきた。 構造とスキンを分けることが一番重要だと気付いた。 サイト全体を見通して、「構造」=「共通にできるもの」、「スキン」=「それぞれ違うもの」という基準で分ける。 OOCSSでクラス設計が自然にできるようになっている。

  • 2020.09.25

OOCSS実践2日目

OOCSSを引き続き実践中。 クラス名を再利用しやすいように汎用的な名前にすると被りやすくなってしまうことがわかった。 今後種類が増える前提で、末尾に数字を付与すると良さそう。 一度書いたスタイルは二度と書かないくらいに再利用できるオレオレクラスを手に入れている。

  • 2020.09.24

CSS設計手法、「OOCSS」を使ってみた

OOCSSでの命名を実践してみた。 「コンテンツ」の定義が自分の中で曖昧で、どこまでを区切るか迷ってしまう。 セクションにとらわれず、再利用しやすいように、「セクション名」を接頭辞につけないようにする。 私は「コンテンツ」の定義を明確に定義し、再利用しやすいCSS設計でコーディングをしている。

CSS font
  • 2020.07.25

Webフォントの設定の仕方

デバイス依存のフォントと似ているGoogleフォント 対象フォント Googleフォント ヒラギノ角ゴ Noto Sans JP Helvetica Open Sans Roboto Roboto Gill Lato Garamond EB Garamond Webフォントを使う際の軽量化方法 https://haniwaman.com/noto-sans-japanese/ ブックマーク Web […]

CSS table
  • 2020.07.24

テーブルをCSSでカスタマイズする際のテクニック集

テーブルの列を全て均等にする tableにtable-layout: fixed;を指定する。 一部の列のみ固定幅にして、残りは均等幅を保つ性質がある。 ※注意: 必ずtableにwithを指定すること。 ボーダーを1本線にする tableにborder-collapse: collapse;を指定する。 注意:指定テーブルの全てにボーダーを付ける場合は、table、th、tdの3要素に指定するこ […]

CSS ブレークポイント
  • 2020.07.23

ブレークポイントの設定

結論 以下の3分割で設定する。 デバイス 範囲(px) 補足 PC 1020~ インナー幅(設定値)以上~ タブレット 1020~768 インナー幅(設定値)~iPad幅まで SP 767~320 iPadより小さい幅~iPhone SE幅まで ※インナー幅はデザインカンプから取得。 上記の数値で3分割する理由 以下のメリットがあるため。 ブレークポイントは最低限の分割数に抑えたほうがメンテナンス […]