CSS/CodingRule をテンプレートにして作成

開始行:
*CSS｜CodingRule CSS を体系的・効率的に書くためのメソッド ~ ***はじめに CSSの設計には、[[OOCSS>Google:CSS OOCSS]], [[BEM>Google:C... -予測しやすいこと -再利用しやすいこと -保守しやすいこと -拡張しやすいこと ~ **CSS が抱える問題 CSS の書式は、セレクタ（HTML上のターゲット）に対して、実... // SELECTOR { // PROPERTY : VALUE; // 　　　： // } ~ ***多重定義の問題 CSS のコーディングでは、同じセレクタに対して多重にスタイ... .sampleArea { background-color: black; } 　： .sampleArea { background-color: red; } この性質は、コードの末尾に「追加のCSSを加えて調整する（上... -複数の CSSファイルを読んだ場合に、セレクタ名が衝突してし... -コードの行数が多くなると、視覚的に離れた位置で多重に定義... ~ ***セレクタの優先度の問題 CSS には優先度（詳細度）の概念があり、これを理解していな... -CSS #pageTitle { ・・・・　color: red; ・・・・} .textBlue { color: blue; } -HTML <h1 id="pageTitle" class="textBlue"> Hello CSS! </h1> &color(red){''Hello CSS!''}; ~ 優先度は、''コード上の順序''、''CSSが書かれた場所''、''重... -コード上の順序 CSSは上から下へと解釈され、後に書かれた宣言（ソースコード... -CSSが書かれた場所 HTMLタグに直接書き込まれたインラインスタイルは、内部CSS、... -重要度　!important 宣言 この宣言があるとスタイルは最優先されてその他の宣言を上書... -セレクタが持つ詳細度 詳細度とは CSS 宣言が適用される際の重みで、セレクターの種... //尚、詳細度は同じ要素に対して複数の宣言が行われている場... --ID（ #sample ） --CLASS（ .sample ）、属性（ [ type="radio" ] ）、疑似ク... --型セレクター（ h1 ）と 疑似要素 （ ::before ） --ユニバーサルセレクタ（ * ） -参考：３桁の数字で表す詳細度 以下に事例を紹介します。３桁表現ですが、桁の繰り上がりは... --ID：1,1,1 --CLASS, 属性, 擬似クラス ：0,1,0 --型セレクター, 擬似要素：0,0,1 --ユニバーサルセレクタ：0,0,0 -参考：詳細度の計算例 --nav#siteNav ul li:hover：1,1,3 --#siteNav ul li：1,0,2 --li.subMenu a：0,1,2 --.subMenu a：0,1,1 --h2：0,0,1 --詳細度の計算ができるサイト：http://specificity.keegan.st/ -その他 --直接対象となった要素は、祖先から継承した規則よりも常に... --文書ツリー内での要素の近接性は、詳細度には影響を与えない --ユニバーサルセレクター ( * )、 結合子 （ + , > , ~ , ' ... ~ ***スタイルが子要素にまで継承する問題 CSSスタイルは HTML上での子要素（DOMツリーの下位）にまで「... -CSS body{ font-size: 24px; } -HTML <section> <p>この段落の文字も24pxになる</p> </section> ~ ***スタイルが複合的に適用される問題 HTML要素はスタイルを複合的に受け入れます。 スタイルが合成... -CSS .class-01 { font-size: 16px; } .class-02 { font-color: blue; } .class-03 { font-weight: bold; } -HTML <p class="class-01 class-02 class-03">Sample Text</p> &color(blue){''Sample Text''}; ~ ~ **一般的なコーディング指針 ***ID、クラスの命名規則について -当然ですが、日本語NG、全角NG、スペースNGです。 -必ずアルファベットから開始する。 数字ではじまるID・クラス名は、認識されません。 -原則小文字で単語の接続はハイフン（チェインケース）という... ''参考'' -ID名とクラス名を区別するために、以下のように書くケースも... --ID名はキャメルケース ＞ #camelCase --クラス名はチェインケース ＞ .chain-case -単なる単語接続はキャメルケース、構造上の親子をハイフン接... --siteNavigator --siteNavigator-firstItem ''参考''：使う言語によって単語接続ルール（文化）が違いま... -CSS：チェインケース　header-title -JavaScript：キャメルケース　headerTitle -Ruby：スネークケース　header_title ''参考'' -キャメルケースとスネークケースはダブルクリックで全体が選... -ハイフンはダブルクリックでは選択できないので、コピペの際... ~ ***要素タグの利用は必要最小に 要素名に対して直接CSSを書くと、各所でそれを打ち消す記述が... ~ ***IDの利用は必要最小に IDセレクタの利用は以下のような理由で、できるだけ使わない... -ID はページ内に１つしか使用出来ないという前提があるため... -ID は「詳細度」が高いため、追加のCSS等での上書きが難しく... 逆に言えば、IDの利用は、以下のような場合に限った方がいい... -大枠のレイアウトブロック要素に使う -各ページを識別するための名前空間として使う -ページ内リンクの飛び先として書く ~ ***クラスの定義・命名について CSSフレームワークの設計を見れば明らかですが、クラスの定義... -クラスは、役割・意味・構造を表すセマンティックなものにする --.page-header、.site-navigator、.strong など、要素の役割... --.text-italic、.text-bold など、見た目を表すクラス名はNG -chain-case で接続する（CSSのプロパティーと同じ） element-color　menu-button　menu-list //-ハイフンとアンダースコアの使い分けを統一する -HTML構造に依存しないよう定義する 例えば以下のような書き方は、HTMLの構造変更にあわせてCSSの... .site-nav >div > div > ul ~ ~ **SMACSSの発想 CSSの設計手法として、、[[OOCSS>Google:CSS OOCSS]], [[BEM>... 　SMACSSは CSS を BASE, LAYOUT, MODULE, STATE, THEME に分... |ルール|内容|h |BASE|要素そのもののデフォルトスタイルを定義| |LAYOUT|ページをエリアごとに分割するためのスタイルを定義| |MODULE|再利用可能な単位でパーツの見た目を定義| |STATE|レイアウトやモジュールの特定の状態におけるスタイル... |THEME|サイトのルック＆フィールを定義| ~ ***ベース サイト全体について、要素のデフォルトスタイルを定義します... -要素セレクタ（ body, a ） -属性セレクタ（ input [ type=text ] ） -擬似クラスセレクタ（ a : hover ） bodyの背景や、リンクのデフォルトカラーや下線、フォントの... body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h... pre, code, form, fieldset, legend, input, textarea,p, bl... margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } ： 　 ''参考''：リセットCSS -Normalize.css：http://necolas.github.io/normalize.css/ -reset.css：https://yuilibrary.com/yui/docs/cssreset/ ~ ***レイアウト レイアウトルールでは、ヘッダー・フッター・ナビゲーション... .layout_header { margin-bottom: 20px; } .layout_main { width: 70%; } .layout_aside { width: 30%; } .layout_footer { border-top: 1px solid gray; } 一般にヘッダやフッタなどの主幹レイアウト要素は「ページ内... ~ ***モジュール モジュールルールでは、再利用可能な単位でパーツの具体的な... -HTML <div class="module"> <h1 class="module-title">TITLE</h1> <p class="module-description">Description・・・</p> </div> -CSS .module{ background: #EEE; } .module-title{ font-size: 18px; font-weight: bold; } .module-description{ font-size: 12px; } -子モジュールの名前は、親モジュールの名前をプレフィックス... -ただし、下層のタグ（ p、a、li、など）は階層が変わる可能... -モジュールは独立性の高いものとなるよう、親要素のレイアウ... --レイアウトクラスの子孫に指定するのはレイアウトクラスのみ --モジュールクラスの子孫に指定するのはモジュールクラスのみ ~ ***ステート ステートルールは、モジュールの状態によってスタイルを''上... -HTML <div class="module is-hidden”> <h1 class="module-title">TITLE</h1> <p class="module-description">Description・・・</p> </div> -CSS .is-hidden{ display: none; } .is-active{ display:block; } ~ ~ ***テーマ テーマルールは、サイト全体のテーマ統一、変更のための定義... -main.css .box { border: 1px solid; } -theme.css .box { background-color: #eee; border-color: #ccc; } ~ ~ コーディングルールには様々あって、これが標準と呼べるもの... 　いずれにしても、サスティナブルなCSSにするには、それなり... ~ ~ **BEMの発想 BEMはBlock Element Modifierの略です。 -Block：大枠となる独立要素 -Element：Blockを構成する要素 -Modifier：BlockやElementをスタイリングするもの ~ ***Block いくつかのエレメントで構成された要素。これはページのどこ... ~ ***Element Blockの内部に置かれた個々の要素。例えば、タイトル、テキス... ~ ***Modifier Block、Elememt の状態やスタイリングを設定するものです。例... ~ ***BEMの命名ルール -単語の区切りはハイフンではなくキャメルケースを用いる。 -アンダーバーは1つの構造、もしくは要素の親子関係を表すた... -ハイフンは構造、もしくは要素の派生を表すために使用する。 参考：[[Google:CSS BEM]] ~ ~

終了行:
*CSS｜CodingRule CSS を体系的・効率的に書くためのメソッド ~ ***はじめに CSSの設計には、[[OOCSS>Google:CSS OOCSS]], [[BEM>Google:C... -予測しやすいこと -再利用しやすいこと -保守しやすいこと -拡張しやすいこと ~ **CSS が抱える問題 CSS の書式は、セレクタ（HTML上のターゲット）に対して、実... // SELECTOR { // PROPERTY : VALUE; // 　　　： // } ~ ***多重定義の問題 CSS のコーディングでは、同じセレクタに対して多重にスタイ... .sampleArea { background-color: black; } 　： .sampleArea { background-color: red; } この性質は、コードの末尾に「追加のCSSを加えて調整する（上... -複数の CSSファイルを読んだ場合に、セレクタ名が衝突してし... -コードの行数が多くなると、視覚的に離れた位置で多重に定義... ~ ***セレクタの優先度の問題 CSS には優先度（詳細度）の概念があり、これを理解していな... -CSS #pageTitle { ・・・・　color: red; ・・・・} .textBlue { color: blue; } -HTML <h1 id="pageTitle" class="textBlue"> Hello CSS! </h1> &color(red){''Hello CSS!''}; ~ 優先度は、''コード上の順序''、''CSSが書かれた場所''、''重... -コード上の順序 CSSは上から下へと解釈され、後に書かれた宣言（ソースコード... -CSSが書かれた場所 HTMLタグに直接書き込まれたインラインスタイルは、内部CSS、... -重要度　!important 宣言 この宣言があるとスタイルは最優先されてその他の宣言を上書... -セレクタが持つ詳細度 詳細度とは CSS 宣言が適用される際の重みで、セレクターの種... //尚、詳細度は同じ要素に対して複数の宣言が行われている場... --ID（ #sample ） --CLASS（ .sample ）、属性（ [ type="radio" ] ）、疑似ク... --型セレクター（ h1 ）と 疑似要素 （ ::before ） --ユニバーサルセレクタ（ * ） -参考：３桁の数字で表す詳細度 以下に事例を紹介します。３桁表現ですが、桁の繰り上がりは... --ID：1,1,1 --CLASS, 属性, 擬似クラス ：0,1,0 --型セレクター, 擬似要素：0,0,1 --ユニバーサルセレクタ：0,0,0 -参考：詳細度の計算例 --nav#siteNav ul li:hover：1,1,3 --#siteNav ul li：1,0,2 --li.subMenu a：0,1,2 --.subMenu a：0,1,1 --h2：0,0,1 --詳細度の計算ができるサイト：http://specificity.keegan.st/ -その他 --直接対象となった要素は、祖先から継承した規則よりも常に... --文書ツリー内での要素の近接性は、詳細度には影響を与えない --ユニバーサルセレクター ( * )、 結合子 （ + , > , ~ , ' ... ~ ***スタイルが子要素にまで継承する問題 CSSスタイルは HTML上での子要素（DOMツリーの下位）にまで「... -CSS body{ font-size: 24px; } -HTML <section> <p>この段落の文字も24pxになる</p> </section> ~ ***スタイルが複合的に適用される問題 HTML要素はスタイルを複合的に受け入れます。 スタイルが合成... -CSS .class-01 { font-size: 16px; } .class-02 { font-color: blue; } .class-03 { font-weight: bold; } -HTML <p class="class-01 class-02 class-03">Sample Text</p> &color(blue){''Sample Text''}; ~ ~ **一般的なコーディング指針 ***ID、クラスの命名規則について -当然ですが、日本語NG、全角NG、スペースNGです。 -必ずアルファベットから開始する。 数字ではじまるID・クラス名は、認識されません。 -原則小文字で単語の接続はハイフン（チェインケース）という... ''参考'' -ID名とクラス名を区別するために、以下のように書くケースも... --ID名はキャメルケース ＞ #camelCase --クラス名はチェインケース ＞ .chain-case -単なる単語接続はキャメルケース、構造上の親子をハイフン接... --siteNavigator --siteNavigator-firstItem ''参考''：使う言語によって単語接続ルール（文化）が違いま... -CSS：チェインケース　header-title -JavaScript：キャメルケース　headerTitle -Ruby：スネークケース　header_title ''参考'' -キャメルケースとスネークケースはダブルクリックで全体が選... -ハイフンはダブルクリックでは選択できないので、コピペの際... ~ ***要素タグの利用は必要最小に 要素名に対して直接CSSを書くと、各所でそれを打ち消す記述が... ~ ***IDの利用は必要最小に IDセレクタの利用は以下のような理由で、できるだけ使わない... -ID はページ内に１つしか使用出来ないという前提があるため... -ID は「詳細度」が高いため、追加のCSS等での上書きが難しく... 逆に言えば、IDの利用は、以下のような場合に限った方がいい... -大枠のレイアウトブロック要素に使う -各ページを識別するための名前空間として使う -ページ内リンクの飛び先として書く ~ ***クラスの定義・命名について CSSフレームワークの設計を見れば明らかですが、クラスの定義... -クラスは、役割・意味・構造を表すセマンティックなものにする --.page-header、.site-navigator、.strong など、要素の役割... --.text-italic、.text-bold など、見た目を表すクラス名はNG -chain-case で接続する（CSSのプロパティーと同じ） element-color　menu-button　menu-list //-ハイフンとアンダースコアの使い分けを統一する -HTML構造に依存しないよう定義する 例えば以下のような書き方は、HTMLの構造変更にあわせてCSSの... .site-nav >div > div > ul ~ ~ **SMACSSの発想 CSSの設計手法として、、[[OOCSS>Google:CSS OOCSS]], [[BEM>... 　SMACSSは CSS を BASE, LAYOUT, MODULE, STATE, THEME に分... |ルール|内容|h |BASE|要素そのもののデフォルトスタイルを定義| |LAYOUT|ページをエリアごとに分割するためのスタイルを定義| |MODULE|再利用可能な単位でパーツの見た目を定義| |STATE|レイアウトやモジュールの特定の状態におけるスタイル... |THEME|サイトのルック＆フィールを定義| ~ ***ベース サイト全体について、要素のデフォルトスタイルを定義します... -要素セレクタ（ body, a ） -属性セレクタ（ input [ type=text ] ） -擬似クラスセレクタ（ a : hover ） bodyの背景や、リンクのデフォルトカラーや下線、フォントの... body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h... pre, code, form, fieldset, legend, input, textarea,p, bl... margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } ： 　 ''参考''：リセットCSS -Normalize.css：http://necolas.github.io/normalize.css/ -reset.css：https://yuilibrary.com/yui/docs/cssreset/ ~ ***レイアウト レイアウトルールでは、ヘッダー・フッター・ナビゲーション... .layout_header { margin-bottom: 20px; } .layout_main { width: 70%; } .layout_aside { width: 30%; } .layout_footer { border-top: 1px solid gray; } 一般にヘッダやフッタなどの主幹レイアウト要素は「ページ内... ~ ***モジュール モジュールルールでは、再利用可能な単位でパーツの具体的な... -HTML <div class="module"> <h1 class="module-title">TITLE</h1> <p class="module-description">Description・・・</p> </div> -CSS .module{ background: #EEE; } .module-title{ font-size: 18px; font-weight: bold; } .module-description{ font-size: 12px; } -子モジュールの名前は、親モジュールの名前をプレフィックス... -ただし、下層のタグ（ p、a、li、など）は階層が変わる可能... -モジュールは独立性の高いものとなるよう、親要素のレイアウ... --レイアウトクラスの子孫に指定するのはレイアウトクラスのみ --モジュールクラスの子孫に指定するのはモジュールクラスのみ ~ ***ステート ステートルールは、モジュールの状態によってスタイルを''上... -HTML <div class="module is-hidden”> <h1 class="module-title">TITLE</h1> <p class="module-description">Description・・・</p> </div> -CSS .is-hidden{ display: none; } .is-active{ display:block; } ~ ~ ***テーマ テーマルールは、サイト全体のテーマ統一、変更のための定義... -main.css .box { border: 1px solid; } -theme.css .box { background-color: #eee; border-color: #ccc; } ~ ~ コーディングルールには様々あって、これが標準と呼べるもの... 　いずれにしても、サスティナブルなCSSにするには、それなり... ~ ~ **BEMの発想 BEMはBlock Element Modifierの略です。 -Block：大枠となる独立要素 -Element：Blockを構成する要素 -Modifier：BlockやElementをスタイリングするもの ~ ***Block いくつかのエレメントで構成された要素。これはページのどこ... ~ ***Element Blockの内部に置かれた個々の要素。例えば、タイトル、テキス... ~ ***Modifier Block、Elememt の状態やスタイリングを設定するものです。例... ~ ***BEMの命名ルール -単語の区切りはハイフンではなくキャメルケースを用いる。 -アンダーバーは1つの構造、もしくは要素の親子関係を表すた... -ハイフンは構造、もしくは要素の派生を表すために使用する。 参考：[[Google:CSS BEM]] ~ ~

ページ名: