年末の繁忙期の為、前回から多少お時間が空きましたが、前回の続きです...。
前回までは、マークアップを簡単にご説明いたしました...。
今回は、いざCSSを詳しくッ！！
と行きたい所ですが、いきなり詳しくと言いましても、コレ！結構難しいです...。
HTMLのマークアップと異なり、数多くの技が存在するCSS...。
なので、初心者の方にいきなり説明と申しましても、例にあげたクリスマス特集でも、様々な技が使われています。
そこで、今回は順序を考え
上記について記載していこうと思います...。
リセットCSSを大まかに説明しますと、
ブラウザがデフォルトでHTMLに対して、スタイルをおこなっている スタイルをゼロの状態にリセットすることを目的としたスタイルシートになります...。
ここで「リセットCSS」と検索をかけてみますと、色々なリセット方法や、また、参考書的な本には、reset.cssと、一枚のCSSとして記載をおこない、随時、リセット内容を増やしていく、などと記載されております。
ここで、私なりの見解！！
私がCSSを記載する場合は、サイトの共通項目（ヘッダー・フッダーなど）を除くと現在は1枚のスタイルシートのみになります。
CSSファイルの上部に、リセットCSSの記載をおこなっていきます。
理由は、次で詳しく説明....。
まず先ほども、1枚のCSSにのみ記載すると書き込みました。
この理由といたしましては、単純にSEO！！
人が一からスタイルシートにスタイルを記載していく場合、
上記の様に、スタイルシートを複数分けて記載したほうが分かり易いうえに、管理しやすいです...。
しかしッPCの画面上に表示を行う際は、スタイルシートをコンピューターがCSSを読み込んでから、指定したスタイルを表示するわけです。
その為、複数のシートに分かれていると人間には分かり易いが、コンピューターには複数のシートを行ったり来たりしなくてはいけないので、読み込む速度が遅くなる！！
なのでSEOの事を踏まえて、CSSを記載していくと1枚のスタイルシートに凝縮されるわけです。
人間が、画像を目で読み込むのと、コンピュータが画像を読み込む速度、感覚的には、人間が目で読み込んで画像を理解する速度のほうが 早いように感じます...。
それでは、ソースコードはッ...、実は、コンピューターがソースコードを読み込む速度は恐ろしく速いのですッ...。
人間が他人の記載したソースコードを理解するのには、ソースコードが長くなれが長くなるほど、時間がかかります。
しかしながら、コンピュータがソースコードを読み込むのは一瞬になります...。
これは、プログラムのソースコードを記載した経験がある人であれば、理解できる事柄かと思います。
ですので、コンピューターは1枚のシートと、複数のシートに分かれているソースコードでは、多少ソースコードが長くて複雑でも、1枚のシートのほうが読み込みやすいと言う訳です。
読み込みやすいという事は、表示速度にも影響し結果、SEOにも大きく影響してくることになります。
なのでCSSの記載は、極力少ないシート数が好ましいと思います。
先ほども多少記載しましたが、reset.css、style.cssなどは、極力1枚に記載してしまうと記載いたしました。
それでは、記載内容の記載の分け方を記載していきます。
まず初めにリセット内容、次に大枠であるHTMLのbodyに対するスタイルの指定！！次に、ブラウザの小さい順に記載...。
一般的には、モバイルファーストなどと言っております。
また、先ほども多少記載いたしましたが、スマホとパソコン用にCSSを別シートに分けて記載するなどと、教科書には記載方法が記されている場合がございますが、コレも一シートで記載していきます。
ブラウザの小さいものから順に、大きなブラウザになるにつれ、スタイルシートを上書きして、スタイルを指定していきます。 コメントアウトを利用して簡単に記載順序を下記に記載します。
/*-------- (body)要素 --------------------------------*/
すべてのリセットCSS
実際に記載するCSS
/*-------- スマホ(header) ----------------------------*/
実際に記載するCSS
/*-------- スマホ(wrapper(main_conteiner)) -----------*/
実際に記載するCSS
/*-------- スマホ(footer) ----------------------------*/
実際に記載するCSS
/*-------- ipad(header) から (footer)-----------------*/
実際に記載するCSS
/*-------- PC(header) --------------------------------*/
実際に記載するCSS
/*-------- PC(wrapper(main_conteiner)) -------------*/
実際に記載するCSS
/*-------- PC(footer) ------------------------------------*/
実際に記載するCSS
順番を大まかにご説明しますと、上記のような順番で、ブラウザが大きくなるにつれ、CSSを上書きしていく順序になります。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
