お待たせしましたCSSでレイアウトをデザイン！

お待たせしましたCSSでレイアウトをデザイン！

年末の繁忙期の為、前回から多少お時間が空きましたが、
前回の続きです…。

前回までは、マークアップを簡単にご説明いたしました…。
今回は、いざCSSを詳しくッ！！

と行きたい所ですが、いきなり詳しくと言いましても、
コレ！結構難しいです…。

HTMLのマークアップと異なり、数多くの技が存在するCSS…。
なので、初心者の方にいきなり説明と申しましても、
例にあげたクリスマス特集でも、様々な技が使われています。

そこで、今回は順序を考え

・リセットCSS
・CSSを記載する上での考え方
・CSSを記載する分け方

上記3点を記載していこうと思います。

初めにリセットCSS

リセットCSSを大まかに説明しますと、

ブラウザがデフォルトでHTMLに対して、スタイルをおこなっている
スタイルをゼロの状態にリセットすることを目的としたスタイルシートになります…。

ここで「リセットCSS」と検索をかけてみますと、
色々なリセット方法や、また、参考書的な本には、
reset.cssと、一枚のCSSとして記載をおこない、随時、
リセット内容を増やしていく、などと記載されております。

ここで、私なりの見解！！
私がCSSを記載する場合は、サイトの共通項目（ヘッダー・フッダーなど）を除くと
現在は1枚のスタイルシートのみになります。

CSSファイルの上部に、リセットCSSの記載をおこなっていきます。

理由は、次で詳しく説明….。

CSSを記載する上での考え方

まず先ほども、1枚のCSSにのみ記載すると書き込みました。

この理由といたしましては、単純にSEO！！

人が一からスタイルシートにスタイルを記載していく場合、

・reset.css
・common.css
・layout.css
・style.css

上記の様に、スタイルシートを複数分けて記載したほうが
分かり易いうえに、管理しやすいです…。

しかしッPCの画面上に表示を行う際は、スタイルシートを
コンピューターがCSSを読み込んでから、指定したスタイルを表示するわけです。

その為、複数のシートに分かれていると
人間には分かり易いが、コンピューターには複数のシートを
行ったり来たりしなくてはいけないので、読み込む速度が遅くなる！！

なのでSEOの事を踏まえて、CSSを記載していくと
1枚のスタイルシートに凝縮されるわけです。

ここで少し補足！！

人間が、画像を目で読み込むのと、コンピュータが画像を読み込む速度、
感覚的には、人間が目で読み込んで画像を理解する速度のほうが
早いように感じます…。

それでは、ソースコードはッ…、
実は、コンピューターがソースコードを読み込む速度は
恐ろしく速いのですッ…。

人間が他人の記載したソースコードを理解するのには、
ソースコードが長くなれが長くなるほど、時間がかかります。

しかしながら、コンピュータがソースコードを読み込むのは一瞬になります…。
これは、プログラムのソースコードを記載した経験がある人であれば、
理解できる事柄かと思います。

ですので、コンピューターは1枚のシートと、複数のシートに分かれているソースコードでは、
多少ソースコードが長くて複雑でも、1枚のシートのほうが
読み込みやすいと言う訳です。

読み込みやすいという事は、表示速度にも影響し
結果、SEOにも大きく影響してくることになります。

なのでCSSの記載は、極力少ないシート数が好ましいと思います。

CSSを記載する分け方

先ほども多少記載しましたが、reset.css、style.cssなどは、
極力1枚に記載してしまうと記載いたしました。

それでは、記載内容の記載の分け方を記載していきます。
まず初めにリセット内容、次に
大枠であるHTMLのbodyに対するスタイルの指定！！
次に、ブラウザの小さい順に記載…。

一般的には、モバイルファーストなどと言っております。
また、先ほども多少記載いたしましたが、
スマホとパソコン用にCSSを別シートに分けて記載するなどと、
教科書には記載方法が記されている場合がございますが、
コレも一シートで記載していきます。

ブラウザの小さいものから順に、大きなブラウザになるにつれ、
スタイルシートを上書きして、スタイルを指定していきます。

コメントアウトを利用して簡単に記載順序を下記に記載します。

/*——– (body)要素 ——————————–*/

すべてのリセットCSS

実際に記載するCSS

/*——– スマホ(header) —————————-*/

実際に記載するCSS

/*——– スマホ(wrapper(main_conteiner)) ———–*/

実際に記載するCSS

/*——– スマホ(footer) —————————-*/

実際に記載するCSS