1-03HTMLとCSSを使ってみよう
この節ではWebサイト制作に欠かせないHTMLとCSSという言語を使って、ブラウザでWebページを表示する方法を解説します。
HTMLとは
HTMLとは何か
HTMLとはHyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、Webページを表示するために開発された言語です。ハイパーテキストとは前章で解説したハイパーリンクを埋め込めるテキストのことです。マークアップとはタイトル・見出し・段落・表・箇条書きなどの文章構造を表現する、という意味です。HTMLは、ハイパーリンク・文章構造の表現によって、情報を整理してわかりやすく人やコンピューターに内容を伝えることができる技術です。
HTMLを見てみよう
試しに、このサイトのホームページで使われているHTMLを見てみましょう。
Windowsの方はCtrl + Uで、Macの方はCommand + option + Uで、ソースを表示します。
これがHTMLです。HTMLなどのプログラミング言語で書かれた文章はソースコードと呼ばれ、Chromeでソースを表示すると閲覧中のWebサイトのHTMLを見ることができます。
HTMLを書いてブラウザに表示してみよう
それでは簡単なHTMLを書いて、ブラウザにWebページを表示してみましょう。
VS Codeを開いて、Command + Nで新しいファイルを作成します。
なお、Windowsの方はこれ以降Commandキーの部分をCtrlキーで読み替えてください。
Command + Sでファイルを保存します。
よく使う項目の一番上に表示されている家のアイコンを選択し、新規フォルダをクリックします。フォルダの名前にdevelopと入力して作成をクリックします。
この教材の前半で作る制作物は、このdevelopフォルダに作っていきます。
developフォルダが作成できたら、それを選択してもう一度、新規フォルダを作成します。フォルダの名前にはsampleと入力して作成をします。フォルダが作成できたらsampleを選択し、名前にindex.htmlと入力して保存をクリックします。
ファイルには必ず拡張子と呼ばれるものがついています。拡張子は、そのファイルが何のアプリケーションで開けるものかを判別するためのものです。HTMLファイルはhtml、画像はjpgやpngなどがあります。
Macの初期設定では拡張子が表示されないので、Finderの環境設定から詳細を選択し、すべてのファイル名拡張子を表示にチェックを入れておきましょう。
保存したindex.htmlにhtml:5と入力します。
html:5と入力できたらTabを押してみましょう。
このように11行のコードが展開されます。これはHTMLに必要となる最低限の情報になります。HTMLの中は大きく2つに分かれており、<head>～</head>で囲われた部分はページの情報、<body>～</body>で囲われた部分はページに表示される内容になります。
※教材内に以下のタグが記載されている VS Code の画像がある場合がありますが、現在このタグは不要です。
meta http-equiv="X-UA-Compatible" content="IE=edge"
試しにに書かれているDocumentという文言をはじめてのHTMLにしてみましょう。
次に〜の中にh1と入力して、Tabを押します。
このようにHTMLタグを打ち込んでTabを押すと、コードが展開されます。作成されたh1タグは文章内の見出しを意味するHTMLタグです。
<h1>～</h1>の間にHTMLとCSSを使ってみようと打ち込んでみましょう。
この状態でCommand + Sを押して上書き保存します。
Finderからユーザー（自分で設定しているもの）/develop/sampleを選んで、index.htmlをダブルクリックして開きます。
Chromeが立ち上がってindex.htmlが開き、ページが表示されます。
- <title>タグはブラウザのタブの部分に表示されています
- <h1>タグはページ内に表示されています
続いて文章を打ち込んでみましょう。<h1>タグの下にp{HTMLは、Webページを表示するための言語です。HTMLはハイパーテキストマークアップランゲージの略です}と入力してtabを押します。入力した内容が展開されたら、上書き保存しましょう。
<p>タグは段落を意味します。
Chromeに切り替えてindex.htmlを確認してみましょう。さきほどVS Codeでファイルを上書きしましたが、内容が変わっていません。ここでCommand + Rを押してみましょう。するとページが更新され、上書きした内容が反映されます。
HTMLタグのルール
- HTMLタグには開始タグと終了タグがあります。
- タグの部分は画面に表示されません。間に挟まれた内容だけが表示されます。
- 中には終了タグを必要としないものもあります。
VS CodeにはTabキーを押すとHTMLやCSSのコードが自動的に展開される「Emmet」というプラグインが標準で搭載されています。何もプラグインが入っていないエディタではこれまでやってきた手順通りにTabキーを押してもコードが展開されることはありません。
Emmet の文法ついてもっと詳しく知りたい人は Emmet Documentation を読んでみましょう。
また、他のエディタでこのEmmetの機能を利用したい場合は、そのエディタにEmmetプラグインをインストールしましょう。
主なHTMLタグの紹介
| HTMLタグ | 説明 |
|---|---|
| h1〜h6 | 記事の見出しを6段階で表す |
| p | テキストの段落 |
| a | ハイパーリンクを指定する |
| img | 画像を表示する |
| br | 改行 |
| hr | 罫線 |
| strong | 重要な要素を表す |
| ul,li | 箇条書き |
| table,tr,td | 表組み |
| form,input,label,button | 問い合わせフォーム |
HTMLタグは100個以上存在しているため、全て覚えておく必要はありません。このコースでは大事なタグを少しずつ紹介していきます。紹介しきれないタグもありますので、使い方がわからないときはリファレンスで調べてみましょう。
HTML・CSS学習のコツ
HTML・CSSやその他プログラミング言語は日々進化を続けているので、新しい技術や使い方がどんどん出てきます。なので、すべてを暗記しておく必要はありません。大事な基礎の部分を固めたら、あとはその都度調べながら制作を進めていけば大丈夫です。
HTMLやCSSについての情報はFirefoxを作っているMozillaが公開している開発者向けサイトなどを調べると良いでしょう。
コンピューターには文字を打ち込むときに全角と半角という種類があります。基本的に日本語は全角、英語は半角で入力されます。そしてスペースについても全角・半角が存在します。HTMLのタグやCSSの記述で、誤って全角スペースを使ってしまうと、正しく動作しなくなってしまうことがありますので気をつけましょう。
CSSとは
CSSとは何か
ここまで紹介したHTMLは、Webページにおける骨の部分です。これだけでは見栄えも寂しく、みなさんがよく見るようなWebサイトからは程遠いように見えますね。骨に肉付けをして、洋服を着せてあげる、装飾をするのがCSSです。
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略です。文字に色をつけたり、レイアウトを調整したり、要素にアニメーションを付けたりすることができます。
カスケーディングとは「階段状の滝のような」「連鎖的に伝わる」のような意味がありますが、CSSは上流で指定したものが下流に引き継がれていくという特徴があります。ちょっと言葉ではわかりづらいですが、この特徴をなんとなく覚えておくと、のちのち難しいCSSが出てきたときに理解がしやすくなりますので、頭の片隅に置いておいてください。
文字の色を変えてみよう
それでは先ほど書いたindex.htmlにCSSを書き込んで、文字の色を変えてみましょう。
まずはh1タグで囲った文字を赤に変えてみましょう。
<h1>HTMLとCSSを使ってみよう</h1>この<h1>の部分に
<h1 style="color:red;">HTMLとCSSを使ってみよう</h1>という風にh1のあとに半角スペースを1個入れてstyle="color:red;"を追加しましょう。
正しく追加できると、VS Codeではredの文字の前に赤い四角形が表示されます。この状態でindex.htmlを上書き保存し、Chromeに移動してページを更新しましょう。
文字の色が赤く変わっていれば、正しい動作です。
このようにHTMLタグ内にCSSを記述することをインラインに記述すると言います。実はインラインにCSSを記述することはあまり推奨されていません。HTMLとCSSは分けて書くことのほうが多くなります。文書構造と装飾をごちゃまぜにせず分けることによって、メンテナンス性を上げるためです。
先ほどのh1内のCSSを一旦削除し、別の箇所にCSSを記述してみましょう。
CSSをstyleタグ内に記述する
<head>タグ内の末尾に、<style>タグを追加します。
8行目にstyleと打ち込みます。
Tabを押すと、<style>タグが展開されます。
<style>タグ内に、以下の内容を記述します。
h1 {color: blue;}
index.htmlを上書き保存して、Chromeでページを更新してみましょう。
文字の色が青くなっていれば正しい動作です。
このように、CSSはHTMLタグ内に記述せず、<style>タグ内に、装飾したいHTMLタグを指定して宣言を書くことができます。しかしこれも記述量が増えていくと、メンテナンス性が下がってしまうため、HTMLファイルとCSSファイルを分けることができます。
先ほどの<style>タグが含まれる1行を削除し、別ファイルにCSSを記述してみましょう。
CSSを外部ファイルに記述する
Command + Nで新しいファイルを作成します。続いてCommand + Sで名前を付けてファイルを保存します。ファイルの名前はstyle.cssにしましょう。保存の場所はindex.htmlと同じsampleフォルダの中です。
作成したstyle.cssに以下の内容を記述します。
h1 {color: green; }
記述ができたらstyle.cssを上書き保存しましょう。
ファイルを切り替えて、index.htmlの<head>タグ内末尾にlinkと入力し、Tabを押して<link rel="stylesheet" href="">となるように展開します。
展開された<link>タグの中にあるhref=""のダブルクオーテーションの間に、./style.cssを追加します。./（ドット１つとスラッシュ）は同じフォルダのという意味で、./style.cssは同じフォルダのstyle.cssを指定しています。
index.htmlを上書き保存し、Chromeでページを更新してみましょう。
文字の色が緑になっていたら正しい動作です。
これでCSSの外部ファイル化ができました。文字の色以外にも、装飾をいろいろと変えてみましょう。
CSSを改行して読みやすくしよう
CSSは1つの要素に対して複数の宣言を書くことができるので、改行をしないとどんどん読みづらいコードになってしまいます。以下のような形に改行してみましょう。
文字のサイズを変えてみよう（font-size）
続いて、文字のサイズを変えてみましょう。
文字のサイズはfont-sizeプロパティで指定することができます。サイズの指定はpx（ピクセル）という単位で行います。
h1にfont-size:12px;を追加しましょう。
h1 {
color: green;
font-size: 12px;
}style.cssを上書きして、Chromeでページを更新すると、文字のサイズが小さくなります。
12pxとなっているところを48pxに変えてみます。
h1 {
color: green;
font-size: 48px;
}style.cssを上書きして、Chromeでページを更新すると、文字のサイズが大きくなります。
CSSでは、様々な大きさの単位をpx（ピクセル）で表します。
文字の太さを変えてみよう（font-weight）
文字の太さを変えてみましょう。通常、<h1>タグは太字で表示されているので、これを普通の文字の太さにしてみます。
文字の太さはfont-weightというプロパティでnormalやboldのように指定します。
h1 {
color: green;
font-size: 48px;
font-weight: normal;
}style.cssを上書きして、Chromeでページを更新すると、文字が細くなります。
フォントの太さは、数値で100/200/300/400/500/600/700/800/900の9段階で指定するか、キーワードでnormal/bold/lighter/bolderの4段階で指定することができます。ただしそのフォントがとても細かく段階が分かれた太さを用意していないことがあるので、値を変えても見栄えが変わらないことがあります。
文字に下線をつけてみよう（text-decoration）
文字には下線や打ち消し線をつけることができます。
文字の装飾にはtext-decorationというプロパティが用意されています。
h1 {
color: green;
font-size: 48px;
font-weight: normal;
text-decoration: underline;
}style.cssを上書きして、Chromeでページを更新すると、文字に下線がつきます。
text-decorationの値は、normal/underline/overline/line-throughがあり、スペースをあけて複数指定することも可能です。
idとclassでセレクタを指定する
ここまではHTMLタグを指定して、その要素の見た目を変化させていました。CSSではHTMLタグ以外にもidとclassというものによって変化させたい場所を指定し、見た目を変化させることができます。
idについて
特定の要素にidという仕組みで名前をつけることが出来ます。1つのidは同じページ内で1箇所だけに使うことが出来ます（重複禁止）
index.htmlの<h1>タグにlogoというidを付けてみましょう。
<h1 id="logo">
続いてstyle.cssでlogoに対して文字色のスタイルを付けてみましょう。前に書いた<h1>タグへのスタイルは削除しておきましょう。CSSではidの名前の前に#（シャープ）を付けると、idを指定することができます。
#logo{
color: red;
}
index.htmlとstyle.cssを上書きして、Chromeでページを更新すると、idをlogoにした部分の色が変化します。
classについて
特定の要素にclassという仕組みで名前をつけることが出来ます。classはidと違って、同じページ内で何箇所でも同じ名前を使い回すことができます。
先ほどの<h1>タグからidを消して、redというclassを付けてみましょう。
<h1 class="red">さらに<p>タグにもredというclassを付けてみましょう。
<p class="red">
続いてstyle.cssでredに対して文字色のスタイルを付けてみましょう。前に書いた<h1>タグへのスタイルは削除しておきましょう。CSSではclassの名前の前に.（ドット）を付けると、classとして扱うことができます。
.red{
color: red;
}
index.htmlとstyle.cssを上書きして、Chromeでページを更新すると、classをredにした部分の色が変化します。
CSSのルール
CSSは、指定したセレクタ（HTMLタグ・id・classなどで指定する）に対して宣言をすることによって、文字の装飾などを変えることが出来ます。宣言はプロパティと値によって構成されており、プロパティと値は:（コロン）で区切られ、複数の宣言は;（セミコロン）で区切られます。
HTMLとCSSの役割
ここまでが、HTMLとCSSの基礎的なルールです。最後にもう一度、HTMLとCSSの役割を再度確認しておきましょう。
HTMLとCSSで出来ること
- HTMLは文章の構造を定義する、骨組みとなる役割
- CSSはHTMLの見た目を変えて、装飾をする役割
HTMLとCSSだけでは出来ないこと
- 複雑なアニメーションや、動くページ（このコースの後半で学べます）
- チャット・掲示板・問い合わせフォームのような仕組み（プログラミング講座で学べます）
次回はWebサイトならではのレイアウト手法を、実際に作りながら学んでいきます。