CSSファイルの構造やCSS設計について復習

この記事は4分で読めます




★ウェブカツWebサービス部(その3)画面モック作成

保護中: ウェブカツWebサービス部(その3)画面モック作成


全体:基本要素その1
リンク:基本要素その2
フォント:基本要素その3
ヘッダー
ナビゲーション
レイアウト
サイドバー
フッター
ページネーション
検索エリア
リスト
テーブルリスト
ボタンフォーム
フォームグループ


★いちばんやさしいHTML5&CSS3の教本の学習メモ

保護中: いちばんやさしいHTML5&CSS3の教本の学習メモ


基本要素
ヘッダー
ナビゲーション
コンテンツ全体
メイン部分
サイドバー
フッター
パンくずリスト
トップページ
こだわりニュース
講座案内ページ
ギャラリーページ
お問い合わせページ
メディアクエリ



★ウェブカツHTML/CSS部上級(01)レスポンシブデザインのサイト作成

保護中: ウェブカツHTML/CSS部上級(01)レスポンシブデザインのサイト作成


変数
mixin
base(基本要素)
header(ヘッダー)
menu(グローバルナビ)
hero
container
news
panel
form(お問い合わせ)
btn
footer
uility


※以下の7点は必須と思われる。
・基本要素
・ヘッダー
・ナビゲーション
・ヒーローバナー
・メインコンテンツ
・サイドバー
・フッター



★CSSのセレクタを理解しよう
https://www.htmlhifive.com/conts/web/view/study-room/selector
セレクタとは、CSSにおいてスタイルを適用する要素を選択するための条件式。
元々はCSS用に作られた仕組みだが、
現在ではjsから特定のDOM要素を対象にして処理を行いたい場合に、
「(HTML内から)処理対象とする要素を選択する」目的でも使われる。
★CSSセレクタの種類を理解する。+ (プラス)、> (不等号)、疑似クラス、疑似要素、他。

CSSセレクタの種類を理解する。+ (プラス)、> (不等号)、疑似クラス、疑似要素、他。


・クラス、IDによるセレクタ

・セレクタのグルーピング;カンマ(,)
→カンマ(,)を使うことで、グルーピングが出来る。
→全てのセレクタに同じスタイルを指定する。

・子孫セレクタ:スペース( )
→子孫であるクラスだけを選択する。
→右側の要素は、左側の要素の中に含まれてる感じ?

・子孫セレクタ:不等号(>)
→直接の子孫であるクラスだけを選択する。

・擬似クラス:first-child, last-child
→最初の要素、もしくは最後の要素だけを選択(=セレクタ)できる。

・疑似要素:before, after
→擬似的に要素を挿入できる。
→contentで文字を挿入しないと何も挿入されない。(空文字でもOK)




★CSS設計の基本
https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e
(1)はじめに
以下の設計規則は、BEMとFLOCSSに影響を受けている。
「Web制作者のためのCSS設計の教科書」という本が参考になるのでおすすめ

(2)スタイルの役割の分類
①構造
形や大きさなどを指定する。家でいう骨格
(width height border padding margin font-sizeなど)

②見た目
色や太さを指定する
(color border-color background-color)

→「構造と見た目」は、OOCSSのルールの1つである。
※参考:ウェブカツHTML/CSS部上級(10)CSS設計

(3)CSSの性質
①カスケーディング
カスケーディングという言葉には、「何段も連なった小さな滝」という意味がある。
ITにおけるカスケーディングとは「カスケード処理」のことで、
指定が複数あるとき、予め決められた優先度のルールによって、
優先度が一番高い指定が1つだけ有効になる仕組みを指す。
→CSSは、この「カスケード処理」という仕組みを使ったスタイルシートである。
※参考:http://honttoni.blog74.fc2.com/blog-entry-213.html?sp

②カスケーディングの3原則
・ウェブブラウザによって与えられたスタイルよりも、
 ウェブブラウザのユーザーによって与えられたスタイルの方が強く、
 ウェブサイトのスタイルはそれよりも強い。
・宣言に対応するセレクタによる絞り込みが強い(詳細度が高い)、
 すなわち「特殊性の高いセレクタを持っている」ほど強い。
・最後まで強さがつけられない時は、後に書かれたスタイルほど強い。

③一部のプロパティでは親要素のプロパティが継承される
・文字色や文字サイズに関するプロパティは継承されるが、
 boreer, margin, padding, 背景画像などは継承されない。

④CSSは右から左に読み込まれる
⑤idやclassには要素名をつけない方が高速

(4)CSS設計規則の基本
・構造化はFLOCSSを参考にする
・命名規則はBEMを参考にする
・CSSのセレクタにはidは使わない
・単語の省略はなるべくしない
・マルチクラスを用いる
・構造と見た目は明確に分ける
・HTML構造に依存しないCSSを書く
・HTMLのタグによるスタイル適用はなるべくしない
・基本的にimportant!は使わない
・上野親要素であるほど適用するスタイルは最小限に留める
・できる限りjavaScriptを用いない
・インデントはスペース4つ分
・再利用は基本的に考えない
・セマンティックなclass名をつけない
・CSSフレームワークを用いる

(5)構造
・brタグなどで要素感の隙間を調整してはいけない
・マージンについて

(6)見た目
①サイズについて
・emと%の相対指定の基準となる相手について
・%指定の注意点
・フォントサイズの基準
・em、%、pxの使い所
②見た目の変更
・state
・Theme

(7)命名規則
①id名、class名に使用する接頭辞一覧
②id名、class名のつなぎ方
・ハイフン(-)
・ハイフン2つ(—)
・アンダースコア2つ(__)
③BEMについて
・Block
・Element
・Modifier



★ウェブ制作者なら意識してほしいCSS設計の基礎知識
https://ics.media/entry/15166/
(1)CSS設計に共通する考え方
ウェブサイトを「パーツの集合体」と捉え、そのパーツごとに分けてCSSを考える。
(パーツの例:ヘッダー、フッター、大見出し、小見出し、リスト、表、ボタン等)

CSS設計の考え方は様々であり、パーツの作り方も多種多様
なぜなら、CSS設計をすることで達成したい目的が違うから。

ウェブサイトの運用でスタイルの追加が予想できるなら、
柔軟で拡張しやすい設計にしておくのがいいし、修正がほとんど発生しない場合は。
拡張性は必要なく、壊れにくいようにしておくのが良い。

(2)基本のCSS設計手法
以下3つのCSS設計手法は、多くの手法のベースとなっている。

①OOCSS
ボタンなら、buttonに加えて、サクセス時および失敗時の背景色を設定しておく。
記述が多いので、スタイルガイドを作るなど、デザイナーやエンジニアの間で
大量のスタイルを上手く管理していく必要がある。

②BEM
ナビゲーションそのものが「Block」
ナビゲーション1つ1つの要素が「Element」:アンダースコア2つ(__)
ナビゲーションの要素の挙動が「Modifier」:ハイフン2つ(—)

③SMACSS




  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2020 06.06

    jsでモーダル

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。