ここではHTMLとCSSの基礎ということで、Webページを作成する際に必要な言語であるHTMLとCSSについての説明を行っていきます。
この他にも動きのあるサイトを作成したいという場合はJavaScriptも使う必要があるのですが、ここでは割愛し時間があったら別の記事として書きたいと思います。
HTMLとCSSの概要
HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略であり、webページを作成するために開発された言語です。
HTMLではこの文書と文書のつながりを示す「ハイパーリンク」という部分が特に重要な機能です。
ハイパーリンクはハイパーテキスト(特定の文書や画像をクリックすることで特定の位置や異なる文書へと飛ぶことができる機能)同士のつながりを表し、異なる文書やネットワーク間を行き来するための目的地を指定しています。
また、「マークアップ」は文書に目印をつけることを表し、マークアップされたテキストには「見出し」「段落」「箇条書き」のような特定の意味づけがなされています。
CSSは「Cascading Stylr Sheet」の略であり、文書のレイアウトを整えたり、装飾する際に用いられます。
ここでのCascadingとは「階段状の滝のような」「連鎖的に伝わる」といった意味を持ち、CSSの特性である「継承」を表しています。
HTMLではページを読み込むたびにすべての属性が書き換えられるのに対し、CSSでは一度描画した色や文字の大きさなどのスタイル、後から変更した要素にも適用できる機能を備えており、これがCSSの「継承」です。
Webページ作成において、基本的にはHTMLで構造的な意味づけ(マークアップ)を行い、CSSで装飾やレイアウトなどを決めていきます。
HTMLとCSSで分けて考えることにより、Webページ自体のメンテナンス性を向上させることができます。
HTMLの基本構文
要素(Element)
文の開始タグと終了タグに囲まれた範囲のことを「要素」といいます。
要素はHTMLを構成する基本的な単位となります。
以下の例では、 ＜h1＞と＜/h1＞がタグ、それに囲まれた全体の部分が要素です。
<h1>HTMLとCSSの基礎</h1>
よく使う要素
| 要素 | 用途 | 備考 |
|---|---|---|
| ＜h1＞ ~ ＜/h1＞ | 見出し | h1からh6までの6段階存在する |
| ＜p＞ ~ ＜/p＞ | 段落 | ひとかたまりのテキストを段落として表現 |
| ＜ul＞ ~ ＜/ul＞ | 箇条書きリスト(順不同) | li要素とセットで使用する |
| ＜ol＞ ~ ＜/ol＞ | 箇条書きリスト | li要素とセットで使用する |
| ＜dl＞ ~ ＜/dl＞ | 記述リスト | dt要素、dd要素とセットで使用する |
| ＜table＞ ~ ＜/table＞ | 表組み | tr要素、td要素とセットで使用する |
| ＜address＞ ~ ＜/address＞ | 連絡先 | |
| ＜div＞ ~ ＜/div＞ | 任意の範囲・グループ化 | |
| ＜a＞ ~ ＜/a＞ | ハイパーリンク | |
| ＜em＞ ~ ＜/em＞ | 強調 | |
| ＜strong＞ ~ ＜/strong＞ | 重要な語句 | |
| ＜img＞ ~ ＜/img＞ | 画像 | |
| ＜span＞ ~ ＜/span＞ | 任意の範囲 |
属性(Attribute)
要素に対して、様々なオプション設定のような役割を持つのが「属性」です。
各要素に対して共通の属性もあれば、特定の要素にしか存在しない属性も存在します。
以下の例ではa要素にhref属性が設定されています。
a要素の意味としてはハイパーリンクですが、href属性をつけることでそのリンク先の情報を指定しています。
<a href = "https://qiita.com/">Qiita</a>
DOCTYPE宣言(文書型宣言)
テキスト文書をHTMLにするためには、まずどのバージョンのHTML言語で作成されているのかを明示するためにDOCTYPE宣言というものをする必要があります。
HTMLのバージョンには「HTML5」「HTML4.01」「XHTML1.0」があり、そのいずれかの言語規格の記述する必要があります。
現在の標準規格はHTML5なので、特別な理由がなければHTMLの文頭で
＜!DOCTYPE html＞
と明示する必要があります。
この宣言の後は、head要素とbody要素の中に、それぞれ必要な内容をマークアップしていきます。
CSS
CSSの基本書式はとてもシンプルなものです。
CSSの土台となるHTMLのソースコードの中の「どの部分の」「どんな属性を」「どのような値にするか」ということを決まっている書式に基づいて書いていくだけです。
CSSでは上記に示した内容をそれぞれ「セレクタ」「プロパティ」「値」と呼びます。下の例は簡単なものですが、h1がセレクタ・colorがプロパティ・#ff0000が値を表します。このコードを適用すると、「h1要素の文字の色を赤くする」という命令になります。
h1{color:#ff0000;}
まとめ
webページを作成する際に必要不可欠なHTMLとCSSについて簡単にまとめました。
基礎中の基礎である内容ではありますが、今後その続きの内容についても書いていけたらいいなと考えてます。
参考文献