HTMLタグ１個だけでレイアウトするスタイルシート導入講座
スタイルシート入門講座
HTMLの基礎やルールが分かったところで、HTMLタグを変な風に覚える前に、スタイルシートのルールを説明します。
下記のHTMLタグをコピーして、新規でテスト用のindex.htmlファイルを作ってみましょう。
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプルページ</title>
</head>
<body>
<h1>H1タグは見出しタグです</h1>
</body>
</html>
H1タグは見出しタグです
↑ブラウザで見ると、なんだか不恰好ですね。これはHTMLタグを最もシンプルに使って、デザイン（色や大きさ等）の指示がまだ書かれていないからです。ここから少しずつデザインをしていきましょう。
上記で作成したHTMLソースの<h1>タグは、サイトの一番重要な見出しなどにつけます。論文などの文章で言ったら論文のタイトル部分にあたります。スタイルシートで何の指示もしていない<h1>タグは太字で一番大きなフォントで表示されます。
この<h1>タグを、中央揃えしてみましょう。この指示は、<h1>タグのh1という文字の後に半角スペースを入力したあとに、style="●"を挿入し、●の部分にデザインを書いていきます。
テキストや画像など、そのブロック要素の行をセンタリング（中央揃え）するにはtext-align:で右よせ左よせ中央揃えを指定します。中央揃えはtext-align: centerと書きます。
では次に、この<h1>タグに、青色の背景色を入れてみましょう。背景色はbackground-color:で指定します。background-color:blueと青を指示する値を入力します。代表的な色は英語でblueと書いても良いですし、カラーコードというコードを使うと様々な微妙な色合いを指定することができます。ここでは練習ですのでわかりやすく英語のblueと書きます。（blueのカラーコードは #0000ff です。）
すでに中央揃えのスタイル指示が書いてありますので、その後ろにさらに色のスタイルを追加しますが、スタイルを追加するときは ; （セミコロン）をつけます。( : (コロン)や ; (セミコロン)の前後に半角スペースを入力して見やすくすることもできます。スペースは入れなくても大丈夫です。)
H1タグは見出しタグです
↑背景色の色が濃くて文字が黒なので、文字がみずらいですね。文字の色を白にしましょう。テキストの色を指定するのは、color:で、color:whiteと値を追加しましょう。
H1タグは見出しタグです
文字の色が白くなったので、見やすくなりましたね。でも、HTMLタグにたくさんのスタイル属性を入力したので、HTMLソースがごちゃごちゃしています。HTMLソースに入力したstyle="text-align:center; background-color:blue; color:white"を外部のスタイルシートに書くことで、何の情報も書いていない<h1>タグのままでこのデザインを適用することができます。
次の外部スタイルシートを練習する前に、HTMLタグに直接スタイル属性を入力する方法のまとめを確認しておきましょう。
- style="●"HTMLタグに直接デザインを書き込む場合は、半角スペースの後にstyle="●"を入力し、●の中にスタイル属性(デザイン)を記入する
- 別のスタイルを足すときは、 ; セミコロンで区切る