CSS

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）は、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
要するに、HTMLやXMLで記述された文字や図の大きさ、色の指定を別シートに記述する事ができる方法の仕様をつくりました。との事、元々はHTMLで記述していたが、記述が長くなり、編集や修正に時間がかかり不便なので、分離できるようにしたとの事。なんせ本文の他に修飾の記述があれば、ダラダラ長い上に見にくいので、分ければ便利だし、HTML要素ごとに修飾の記述をまとめておけば、そこだけ表示がおかしくなるだけですむし、間違えも見つけやすい。また、CSSファイルが無くてもHTMLファイルはブラウザーに認識され表示できるので、まったく表示できないとはならないですみます。

CSSで最初に作られた仕様

• フォントプロパティ
  例　ゴシック体　明朝体　筆記体
• 色および背景のプロパティ
  例　赤　青　
• テキストプロパティ
  • 語間の調整
    例　文字の間隔
  • 行寄せ
    例　右詰め
• ボックスプロパティ
  • マージン
  • ボーダー
  • パディング
• 類別プロパティ
  • 表示
    例　表組み
  • リスト
    例　箇条書き

以上となり、まさに修飾だけをまとめたものです。その中で一番わかりずらく重要なのが
”ボックスプロパティ”

ボックスプロパティ

このボックスプロパティだが、ボックスモデルのプロパティでボックスモデルは、
HTMLで記述された要素をボックスとよぶ四角形の箱に見立てて、
管理しましょうと言う考えです。
表示面積を効率良く使おうと考えると、四角形はとても都合がよい。
なので、ブラウザの表示範囲をボックスとして管理します。
この四角い箱が理解できればCSSはほぼ習得したと言っても過言ではない。

ブラウザのF12を押すと開発ツール画面になり、そこでスタイルの一番下を確認すると

ボックスモデルが確認できます。

つまりHTML要素は自動でボックスモデルを作ってくれるので、
そのボックスの置き方や大きさ等をCSSで記述してあげれば、
Webページの完成となります。

特に文字を重視して、シンプルに表示するブログ記事などを確認すると

と、とても単純な形となっている。

See the Pen Untitled by masamitsu hyodo (@masamitsu-hyodo) on CodePen.

上記のようにボックスにボックスを入れたり、並べたりするだけで、
十分にWebベージを表示できるようになります。

Cascading

ちなみにCSS（Cascading Style Sheets）のCであるCascadingの意味ですが、何段も連なった小さな滝の事で、大きい滝はWaterfallです。その様子から、小さな処理を順番に読み込み、適用されたスタイルを引き継ぎ、競合する場合は上書きしながら、段階的に設定していくことを意味します。

つまり、一番最後の設定が最終的なスタイルとなります。なので、Wordpressなどのブログシステムは親のカスタムを子のプロジェクトでCSSを作らせて対応させています。