HTML：メッセージ
今回はテントママとテントくんの会話を例に、次のようなコミュニケーションアプリ風の画面を作っていきましょう。
メッセージ画面を作っていこう
上の例を見て「今回はどんなものを作るのか」をイメージ出来た人は、ここから先の説明を読まずにどんどん進めてもらってかまいません。
「まだ分からないことがあるからヒントがあると良いな」という人は、この先の例を参考に進めて行きましょう。
手順1 - サンプルソースを例に準備しよう
まず、次の2つのファイルを用意します。
今回必要なファイル
- message.html
- style.css
message.html の例
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>メッセージ</title> <link rel="stylesheet" href="style.css"></head><body> <h1>メッセージ</h1> <h2 class="mama">テントママ</h2> <h2 class="mama">10:00</h2> <p class="mama">テント〜。今日は寒いからはやく帰ってくるのよ〜</p> <h2 class="tento">テント</h2> <h2 class="tento">10:05</h2> <p class="tento">わかった！それじゃ行ってきます〜</p> <h2 class="mama">テントママ</h2> <h2 class="mama">17:00</h2> <p class="mama">遅いわね！何してるの？</p></body></html>style.css の例
body{background-color:silver;color:black;}h1{text-align:center;}.mama{color:orange;text-align:left;}.tento{color:green;text-align:right;}手順2 - ブラウザでサンプルの表示を確認してみよう
ブラウザで「message.html」を表示してみましょう。
最初の見本と比べると、表示されている文章の内容、順序は同じですが、背景や文字色などの見た目が随分違うようです。
これは、HTML文書に指定したスタイルが異なるためです。スタイルはCSSで指定していきます。設計書にあわせてCSSの中身を変えていきましょう。
手順3 - 設計書をもとに、 CSSを書いていこう。
設計書を確認しよう
今回の画面は次のようにデザインされています。設計書に記された値や単位を良く確認しておきましょう。
上の設計書をもとに作業内容を整理してみます。だいたいこんな感じでしょうか。
1. 表示部分（全体）の横幅を300pxにする2. 画面の全体の背景色を lightcyanにする3. ページ内の文字色を全て黒（black）にする4. タイトル文字を中央に寄せる5. テントママのメッセージを全て左に、テント君のメッセージを全て右によせる6. h2、pタグそれぞれの上下左右の余白(margin)を5pxに指定する7. メッセージ本文の背景色は、テントママの場合は白（white）に、テント君の場合はgreenyellowにする8. メッセージの本文の左または右に100pxの余白をつける9. メッセージの見出しの文字の大きさを変更する他に必要な作業や付け足したいものがあれば、適宜整理して下さい。それでは具体的な作業をします。
3-1. 表示部分（全体）の横幅を300pxにする
今回は、いちばんシンプルな方法で指定します。
body{ background-color:silver; color:black; width:300px; /* 全体の横幅を300pxにする */}body要素に width:300px; を追加しました。これで、ウインドウサイズをどれだけ広げても、コンテンツは幅300pxの枠内に収まるように表示されます。
3-2. 画面の全体の背景色を lightcyanにする
現在のページは、背景色( background-color )に silver が指定されています。これを lightcyan に変更しましょう。
body{ background-color:lightcyan; /*背景が薄水色になる*/ color:black; width:300px;}3-3. ページ内の文字色を全て黒（black）にする
文字色の指定は color 属性で行います。ページ内の基本的な文字色を指定するには body に対して指定します。
body{ background-color:lightcyan; color:black; /* サンプルコードには既に黒色が指定されている */ width:300px;}サンプルコードには既に文字色が指定されているので特に変更する必要はありません。サンプルコードには黒色以外の文字色を指定している部分がありますので、調べて削除しましょう。完全に削除するのではなく、次のように /* 〜 */ で囲んでコメントアウトして、必要に応じてコメントアウトを解除するというのも良いでしょう。
/* color:orange; */3-4. タイトル文字を中央に寄せる
サンプルコードをそのまま使った場合は、タイトル文字は既に設計書の指示通り中央寄せになっているので、特に作業する必要はありません。
ただ、今後の参考までに、どのように指定されているかを念のために確認しましょう。
画面をもとにHTMLソースを確認してみると、 タイトル文字は <h1> 〜 </h1> で囲まれた部分 であることが分かります。
h1タグは、次のように text-align（テキスト・アライン）プロパティが指定されています 。
h1{text-align:center;}値はcenterとなっていて、これでタイトル文字が水平方向の中央に表示されるようになります。ここで、リファレンスサイト「HTMLクイックリファレンス」の「text-alignプロパティ」の項を見てみましょう。
このページの情報を参考に、leftやrightなどの他の値を指定するとどうなるのか、実際に試して表示結果を確認してみましょう。
3-5. テントママのメッセージを全て左に、テント君のメッセージを全て右によせる
タイトル文字と同じようにサンプルコードをそのまま使った場合は、既に設計書の指示通りになっているので、特に作業する必要はありません。
3-6. h2、pタグそれぞれの上下左右の余白(margin)を5pxに指定する
余白（すき間）には、 margin（マージン） と padding（パディング） という2種類のプロパティがあります。marginはタグに囲まれた領域の外側のすき間を、paddingは領域の内側の隙間を設定するために使います。
今回指定する余白は外側なので、指定されたタグ <h2> と <p> に対して次のようにmarginプロパティを追加します。
h2{margin:5px;}p{margin:5px;}余白の指定方法には、上下左右まとめて同じ値を指定する方法、上下と左右をまとめて指定する方法、ひとつずつ指定する方法など、色々あります。リファレンスサイトなどを参照しながら、必要に応じて使い分けて下さい。
3-7. メッセージ本文の背景色は、テントママの場合は白（white）に、テント君の場合はgreenyellowにする
本文は <p> 〜 </p> で囲まれた部分です。ただし、テント君とテントママで背景色が違うので、スタイルを別々に指定する必要があります。ここでHTMLソースを確認すると、テントママの要素には”mama”、テント君の要素には”tento”というクラス名が付けられていることが分かります。
テントママのメッセージ
<p class="mama">テント〜。今日は寒いからはやく帰ってくるのよ〜</p>テント君のメッセージ
<p class="tento">わかった！それじゃ行ってきます〜</p>クラスを上手に活用することで、「全てのpタグは横幅を80%とする」といった 共通のスタイル と、「クラス名がcls-aのpタグの文字色は赤色、cls-bのpタグの文字色は緑色」のように クラス毎に異なるスタイル を指定することが可能になります。
次のヒントを参考に、実際にスタイルを追加してみましょう。
p.mama{ /* テントママの本文背景色を指定してみましょう */}p.tento{ /* テント君の本文背景色を指定してみましょう */}3-8. メッセージの本文の左または右に100pxの余白をつける
設計書では次のように指定されています。
左の外側の余白には margin-left を、右の外側の余白には margin-right を指定するのが簡単そうです。次のヒントを参考に、実際にスタイルを追加してみましょう。
p.mama{ /* テントママのメッセージの余白を指定してみましょう */ /* テントママの本文背景色 */}p.tento{ /* テント君の本文の余白を指定してみましょう */ /* テント君の本文背景色 */}3-9. メッセージの見出しの文字の大きさを変更する
メッセージの見出し…「テントママ」や「テント」などの名前の文字の大きさを80%に、時間の文字の大きさを50%に指定していきます。先ずはHTMLソースを確認してみましょう。
<h2 class="mama">テントママ</h2><h2 class="mama">10:00</h2>名前と時間は同じ <h2> タグを使っています。それでは、スタイルをどのように指定すると良いでしょうか。今回の場合は、名前(namae)と時間(jikan)でクラスを分けると分かりやすそうです。
実際にCSSに 新しいクラス「namae」と「jikan」を追加 していきましょう。
h2.namae{ /* 「テントママ」「テント」などの文字に対してスタイルを指定します */}h2.jikan{ /* 「10:00」「10:05」などの文字に対してスタイルを指定します */}また、クラスは同時に複数指定することができます。複数のクラスを指定する場合は、半角スペースで区切ります。次のように、HTMLソースの必要な箇所に対して新しいクラスを追加していきましょう。
<h2 class="namae mama">テントママ</h2><h2 class="jikan mama">10:00</h2>今回使ったスタイルのまとめ
テント君とテントママに対して指定したスタイルを表にまとめました。
指定するスタイルが複雑になってきたときは、このように整理しておくと、あとで見直す時に役立ちます。必ずしもこの表の通りに分ける必要はありませんが、自分なりに分かりやすい方法でグループ分けしていくと良いでしょう。
発展課題
- 会話の続きを書き足してみましょう。
- 背景に画像を追加するなど、他にもスタイルを追加してみましょう。HTMLクイックリファレンスを参考に自分で調べながら進めていくことをおすすめします。