Sheets(カスケーディング・スタイル・シート)」のことで、Webページの見た目を指定するための言語です。HTMLと組み合わせて使用し、HTMLタグの各要素に対して色・フォントサイズ・背景色・余白などを指定します。装飾に関する指定をCSSで行うことでHTMLから見た目に関する記述を省くことができます。CSSはブラウザにキャッシュされるので、サイト閲覧時の通信量抑制にも寄与します。CSSではCLASSを使うことで、別々の要素に同じレイアウトを指定することができます。レイアウトをTABLEやHTMLで装飾するとHTMLが煩雑になりますが、CSSを適切に使用することで見た目とデザインをHTMLとCSSで別々に管理できます。HTMLからデザイン要素が省かれると検索エンジンのクローラーが収集するHTML量が減ること(クローラビリティ)、HTML解析がしやすくなること(インデクサビリティ)からSEOの点でもメリットがあります。ブラウザデフォルト設定をリセットすべき理由Webブラウザは各HTMLタグに対してデフォルトで文字サイズや余白を指定しています。見出しタグは大きい、リストタグには頭に「・」が入る、などです。弊社ではこういうブラウザ依存のスタイルをリセットしています。ブラウザの種類に関わらずデザインを統一したい余白や文字サイズは意図を持って指定したい(将来的に)デフォルト設定が変更される可能性へ懸念を払拭したいWebサイト制作時はリセットの有無はあまり関係ないかもしれませんが、運用フェーズにおいては違います。リセットされていないと新規追加したページで予期せぬ文字サイズ・余白となるケースが結構あります。リセットしてある方が後の運用がしやすいということが弊社の見解です。デフォルト設定をリセットするとCSSの記述量は増えます。そのためCSSファイルサイズは肥大化しがちです。CSSの記述量が多いと管理が大変になりやすくなります。この点はデメリットに考えがちですが、後述するようにCSSの設定・記述ルールを定めることで管理の点は解消できます。CSSファイルサイズの肥大化についてですが、CSSはブラウザにキャッシュされるのでファイルサイズを気にするよりも時間が開いても内容を把握しやすい記述する方が大切であると考えます。CSSはショートハンドで記述するCSSのショートハンドとはプロパティを一括指定することです。以下の場合、Pタグに対して左右のマージンを5px、上部を10px、下部に30pxという指定です。30px;}これをショートハンドで記述すると以下のようになります。30px;}ショートハンドで記述する場合、数字は「上から時計回り」に記載します。同じ数字の場合は省略することができます。記載する数と順番は以下のようになります。数字1つ:上下左右なお、ショートハンドはDreamweaverなどHTML作成ソフトを使う場合はCSSを手打ちで入力する必要があります。CSSファイルを見るとデザイナー(コーダー)の実力がわかります。HTML作成ソフトで生成されたCSSファイルはショートハンドにならないケースもあります(環境設定に依存するようです)。CSSは手打ちすることで不要な記述を防ぐことができます。Insightsの評価項目でもあるので、SEO(表示速度なのでユーザビリティの観点でもあります)に影響することなので取り組むべき事項となります。CSSファイルは分割して管理するCSSの省略がSEOにも影響するからといって運用視点は忘れるべきではありません。CSSを圧縮すると空白や改行コードが省かれます。サーバー上で自動的に圧縮するならまだしも、手作業での圧縮を運用フローに取り入れるのは長期的には混乱を招く可能性があります。複数人での運用や担当者変更を考慮すると、運用ルールはシンプルな方が好ましいからです。読み込み速度を考慮してCSSファイルを1つにまとめるという考え方もありますが、運用観点からは指定場所に応じて複数ファイルに分割した方が把握しやすいと弊社は考えます。複数の外部CSSファイルを読み込む方法はHTMLからそれぞれLINKタグで読み込む方法と親CSSファイルから子CSSファイルを読み込む方法があります。弊社はHTMLの記述はシンプルとするように努めているので、親CSSファイルから子CSSファイルを読み込むようにしています。CSSを入れ子にすると若干読み込み速度に影響を及ぼしますが、CSSファイルを追加するケースがあった場合にCSSファイルのディレクトリだけの修正で済むからです。静的なHTMLだけで構成されている場合はいいのですが、MVCモデルのフレームワークを使っているサイトの場合テンプレートとCSSの格納場所が異なります。いうちょっとした作り方の違いが運用のやりやすさに繋がります。CSSは範囲指定を徹底するCSSをモジュール化してHTMLのCLASS指定でデザインをするという考え方があります。次のようなCSSがあったとします。16px;}これをPタグに指定すると以下のようになります。fs14”>テキスト</p></div>もしPタグのフォントサイズを16pxにしたいという場合はHTMLを修正します。fs16”>テキスト</p></div>修正箇所が複数ページの場合、全てのHTMLを修正する必要があります。これは更新時に結構大変であると考えます。弊社ではCSSは以下のように記述します。14px;}HTMLの指定は以下です。できるだけ末端にCLASSを指定しないようにします。id=“main”><p>テキスト</p><p>テキスト</p></div>同じようにフォントサイズを16pxにしたい場合はCSSを修正します。16px;}修正箇所が複数でも一括で修正できます。CSSは範囲指定をして特定の子孫要素のみにスタイルを設定することができます。次のようなHTMLの場合。id=“main”><p>テキスト</p></div><footer><p>テキスト</p></footer>同じPタグでも設置箇所ごとに範囲指定をします。フォントサイズが一緒でも、です。14px;}こうしておくと修正時にCSSファイルの確認する場所を限定することができます。HTMLをシンプルにしようとするとCSSファイルが肥大化しがちです。CSSの設定ルールは厳格にすべきです。CSSファイル内に目次と更新日を設けるCSSファイル内のコメントの使い方も運用に影響します。Insightsの観点からはコメントなしを求められます。運用を考えるとコメントは適宜記述すべきです。contents-----------------01.default02.header03.wrapper04.sidebar05.footer*/例えば本日修正をした場合、更新日を記述します。contents-----------------01.default02.header03.wrapper04.sidebar05.footer*/また、目次を設けておくと運用時に把握しやすくなります。忘れることを前提とした作り方を心がけること以上、長文となってしまいましたが初心者にも役立つであろう(?)CSSの使い方です。弊社は作って納品したら終わりというよりも、サイトの運用に関わることが多いです。HTML・CSSの作り方で更新のしやすさは本当に変わります。した修正でも時間がかかったり間違えたりするような場合はサイトの作り方に問題があると考えています。人間の大きな特徴は忘れることです。忘れても良いように後から見直しやすいようにCSSは指定するように心がけています。SEOの実績やWebサイト構築実績多数。SEO・Web制作の経験からクローラビリティ改善・最適化サービスを提供している。※当ブログはブログ村に参加しております。関連記事[2018年版]リセットCSS(reset.css)の設定方法で変わる表示速度とSEO対策について2018年5月28日リセットCSSかノーマライズCSSなのかは制作者で考え方が変わります。最初に言うと弊社は独自のリセットCSSを使用しています。これは文字サイズ、余白(margin、padding)HTMLコーディングとインデクサビリティとSEO2018年6月5日HTML言語でマークアップ記述することをHTMLコーディングと言います。プライバシーポリシーお問い合わせ。