【初心者向け】HTMLとは？CSSとは？
スポンサーリンク
ミニチュアとは関係ない話題です。
私がHTMLを学んだのは、20年ほど前なので、古い知識がベースなのですが、たぶん基本的な仕組みは変わらないと思いますので、ざっくりと初心者向けのHTMLとCSSの解説をしたいと思います。（まぁ、20年前にCSSを使っていた人は、ごく少数でしょうけど。私がCSSを使い始めたのは2004年あたり…。）
きっかけは、以下の記事を読んで…。
力作な記事だと思いますが、視覚表現として、使ってほしくない要素もあったりしますね。
まずはWeb（ウェブ）の基本構造から
Webの基本構造をざっくりと解説すると、文書形式のHTML(エイチティーエムエル、HyperText Markup Language)と、文書転送のルール・約束ごとのHTTP（エイチティーティーピー、HyperText Transfer Protocol）と、文書のありかを示すURL（ユーアールエル、Uniform Resource Locator）の3つから構成されています。
HTMLは、Webページの構造・骨格をつくる言葉です。そのHTMLが正しい構造でないと、いろいろとマズいことになるかもしれません。
CSSは、『Cascading Style Sheets（カスケーディング・スタイル・シート）』の略称で、呼称は「シーエスエス」。一般的に、『スタイルシート』といえば、CSSを指します。（JavaScriptもスタイルシートがありますけどね。略してJSS。）
HTMLとCSSの関係
HTMLは、Webページの構造をつくる言葉ですが、文書の論理構造が主な役割なので、外観・見た目的には、とっても地味…。CSSは、そのHTMLを装飾して、見栄えをよくする役割の言葉です。
このブログを、CSSなしのHTMLだけで表示すると以下のようになります。
…すごい…地味です。
まぁ、大事なのは中身で、見た目はどうでも…と言いたいところですが、最近の世の中の風潮として、やっぱり見た目も重要視されますよね。
装飾表現が豊かなCSSを使うと、味気ないHTMLは見栄え良くなります。
うーん、全然ちがいますね。中身の論理構造は同じなんですけども…。HTMLは「すっぴん」で、CSSは「化粧・メイク」といった感じでしょうか。
CSSを使うと、さりげないナチュラルメイクから、ド派手な厚化粧まで、Webページを装飾できます。
CSSの加え方は3つ
ざっくりと、HTMLにCSSを加味する方法としては、以下の3つ。
1. style属性で要素ごとに適用する
個別にCSSを適用させる方法です。たとえば、HTMLの段落（p）タグに、以下のように書きます。
＜p style="color: red"＞
【注意】＜＞の部分は全角ですが、本来は半角です。
この方法はメンテナンス性が悪いので、個人的には、あまり推奨はしません。
2. head要素内にstyle要素を加えて、1つのページ内に適用させる
ページごとにCSSを適用させる方法です。
＜p style="text/css"＞
p {color:red}
＜/style＞
【注意】＜＞の部分は全角ですが、本来は半角です。
こう書いておくと、そのページ内のp要素すべてに、指定したCSSが適用されます。
3. 外部にCSSファイルを置いてサイトまるごと適用させる
この方法が1番メジャーなCSSの利用法でしょうか。CSSを別ファイルとして置いて、各ページから呼び出す方法です。
実装の方法はいくつかあるみたいですが、一般的に外部CSSを参照させる方法は、HTMLのhead要素内に、link要素を追加して、外部CSSファイルを呼び出すやり方がメジャーかもしれません。
＜link rel="stylesheet" type="text/css" href="gaibu.css"＞
【注意】＜＞の部分は全角ですが、本来は半角です。
HTMLファイルとCSSファイルを分離させるメリットは、メンテナンスが簡単なことでしょうか。
たとえば、サイトやブログの全てのページの（段落の）文字色を黒から赤に変更したい場合、元となるCSSファイルの一文を変更させるだけでOKです。
個別のHTMLタグに、CSSを指定することが推奨されない理由はこれだと思われます。
サイトやブログの記事数・文章量が少なければ、あまり手間がかからないかもしれませんが、記事数が100や200といった数になると、個別にCSSを適用させたHTMLタグの変更は、めちゃくちゃ手間がかかるでしょう（もはや苦行）。
独立させたCSSファイルにて、サイトやブログのHTMLを一括管理させると、装飾の変更は簡単になります。たとえば、ブログの文字色を青に変更させたい場合は、以下のようにすればOKです。
CSSの書き方によっては、もっと細かなコントロールができるようになります。今回は、ざっくりとHTMLとCSSをイメージして頂ければ幸いです。
基本的に視覚的な装飾は、CSSを使うことが推奨されています。無理にHTML（論理構造言語）で装飾しようとすると、いろいろと問題が発生するかもしれません。
ブログやサイトに訪れるのは、目の見える方だけではなく、目の不自由な方も訪れます。HTMLを視覚的な表現で優先させると、論理的な構造がおかしくなって、こういった方々への負担になりますので…。
（趣旨とは全く関係ない愚痴ですけど、はてなブログは、シンタックスハイライトを使おうとすると、手順が面倒すぎる…。）
