★ウェブカツWebサービス部（その3）画面モック作成
全体：基本要素その１
リンク：基本要素その２
フォント：基本要素その３
ヘッダー
ナビゲーション
レイアウト
サイドバー
フッター
ページネーション
検索エリア
リスト
テーブルリスト
ボタンフォーム
フォームグループ
★いちばんやさしいHTML5&CSS3の教本の学習メモ
基本要素
ヘッダー
ナビゲーション
コンテンツ全体
メイン部分
サイドバー
フッター
パンくずリスト
トップページ
こだわりニュース
講座案内ページ
ギャラリーページ
お問い合わせページ
メディアクエリ
★ウェブカツ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セレクタの種類を理解する。+ (プラス)、> (不等号)、疑似クラス、疑似要素、他。
・クラス、IDによるセレクタ
・セレクタのグルーピング；カンマ（,）
→カンマ（,）を使うことで、グルーピングが出来る。
→全てのセレクタに同じスタイルを指定する。
・子孫セレクタ：スペース（ ）
→子孫であるクラスだけを選択する。
→右側の要素は、左側の要素の中に含まれてる感じ？
・子孫セレクタ：不等号（>）
→直接の子孫であるクラスだけを選択する。
・擬似クラス：first-child, last-child
→最初の要素、もしくは最後の要素だけを選択（＝セレクタ）できる。
・疑似要素：before, after
→擬似的に要素を挿入できる。
→contentで文字を挿入しないと何も挿入されない。（空文字でもOK）
★CSS設計の基本
https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e
（１）はじめに
以下の設計規則は、BEMとFLOCSSに影響を受けている。
「Web制作者のためのCSS設計の教科書」という本が参考になるのでおすすめ
（２）スタイルの役割の分類
①構造
形や大きさなどを指定する。家でいう骨格
（width height border padding margin font-sizeなど）
②見た目
色や太さを指定する
（color border-color background-color）
→「構造と見た目」は、OOCSSのルールの１つである。
※参考：ウェブカツHTML/CSS部上級（10）CSS設計
（３）CSSの性質
①カスケーディング
カスケーディングという言葉には、「何段も連なった小さな滝」という意味がある。
ITにおけるカスケーディングとは「カスケード処理」のことで、
指定が複数あるとき、予め決められた優先度のルールによって、
優先度が一番高い指定が１つだけ有効になる仕組みを指す。
→CSSは、この「カスケード処理」という仕組みを使ったスタイルシートである。
※参考：http://honttoni.blog74.fc2.com/blog-entry-213.html?sp
②カスケーディングの３原則
・ウェブブラウザによって与えられたスタイルよりも、
ウェブブラウザのユーザーによって与えられたスタイルの方が強く、
ウェブサイトのスタイルはそれよりも強い。
・宣言に対応するセレクタによる絞り込みが強い（詳細度が高い）、
すなわち「特殊性の高いセレクタを持っている」ほど強い。
・最後まで強さがつけられない時は、後に書かれたスタイルほど強い。
③一部のプロパティでは親要素のプロパティが継承される
・文字色や文字サイズに関するプロパティは継承されるが、
boreer, margin, padding, 背景画像などは継承されない。
④CSSは右から左に読み込まれる
⑤idやclassには要素名をつけない方が高速
（４）CSS設計規則の基本
・構造化はFLOCSSを参考にする
・命名規則はBEMを参考にする
・CSSのセレクタにはidは使わない
・単語の省略はなるべくしない
・マルチクラスを用いる
・構造と見た目は明確に分ける
・HTML構造に依存しないCSSを書く
・HTMLのタグによるスタイル適用はなるべくしない
・基本的にimportant!は使わない
・上野親要素であるほど適用するスタイルは最小限に留める
・できる限りjavaScriptを用いない
・インデントはスペース４つ分
・再利用は基本的に考えない
・セマンティックなclass名をつけない
・CSSフレームワークを用いる
（５）構造
・brタグなどで要素感の隙間を調整してはいけない
・マージンについて
（６）見た目
①サイズについて
・emと%の相対指定の基準となる相手について
・%指定の注意点
・フォントサイズの基準
・em、%、pxの使い所
②見た目の変更
・state
・Theme
（７）命名規則
①id名、class名に使用する接頭辞一覧
②id名、class名のつなぎ方
・ハイフン（-）
・ハイフン２つ（—）
・アンダースコア2つ（__）
③BEMについて
・Block
・Element
・Modifier
★ウェブ制作者なら意識してほしいCSS設計の基礎知識
https://ics.media/entry/15166/
（１）CSS設計に共通する考え方
ウェブサイトを「パーツの集合体」と捉え、そのパーツごとに分けてCSSを考える。
（パーツの例：ヘッダー、フッター、大見出し、小見出し、リスト、表、ボタン等）
CSS設計の考え方は様々であり、パーツの作り方も多種多様
なぜなら、CSS設計をすることで達成したい目的が違うから。
ウェブサイトの運用でスタイルの追加が予想できるなら、
柔軟で拡張しやすい設計にしておくのがいいし、修正がほとんど発生しない場合は。
拡張性は必要なく、壊れにくいようにしておくのが良い。
（２）基本のCSS設計手法
以下３つのCSS設計手法は、多くの手法のベースとなっている。
①OOCSS
ボタンなら、buttonに加えて、サクセス時および失敗時の背景色を設定しておく。
記述が多いので、スタイルガイドを作るなど、デザイナーやエンジニアの間で
大量のスタイルを上手く管理していく必要がある。
②BEM
ナビゲーションそのものが「Block」
ナビゲーション１つ１つの要素が「Element」：アンダースコア２つ（__）
ナビゲーションの要素の挙動が「Modifier」：ハイフン２つ（—）
③SMACSS
この記事へのコメントはありません。