間があいてしまいましたが、
今回は(X)HTML
見栄えを整えるその前に ~簡単な(X)HTMLの構造を観察してみる~
これから出てくるサンプルでは、
(X)HTMLは意味づけを行う言語
それではまず、
- サンプル1
(sample1. html)
見出しと本文で構成されたシンプルなXHTML文書サンプル(XHTML 1. 0 Transitional)
では次に、
<body>と</body>で囲まれた内容に注目してみましょう。
<h1>美しい見出しと読み手が心地よい本文</h1>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>
<h2>美しい見出しとは</h2>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>
<h2>美しい本文とは</h2>
<p>美しい見出しと読み手が心地よい本文について(本文以下略)</p>
見出しにあたる部分は<h1>~</h1> <h2>~</h2> ... 、
このような(X)HTMLを生成することのできるホームページ作成ソフトやWebオーサリングソフトと呼ばれるソフトがありどんどん高機能になってきましたが、
さて、
CSSで見た目を整える
それではこの何もスタイルのあたっていないXHTML文書に、
CSSの読み込み方
CSSの読み込み方には何通りもありますが、
- サンプル2
(sample2. html)
XHTML文書にsample.cssを読み込んだサンプル (XHTML 1. 0 Transitional)
<head>
(中略)
<link rel="stylesheet" href="sample.css" type="text/css" media="screen,tv" />
</head>
このようにlink要素のhref属性でCSSのファイル名を指定することで読み込まれます。
ではまたこのファイルをブラウザで開いてください。先ほどのsample1.
CSSの中身
ここで、
詳しくはサンプルCSSファイルをテキストエディタで開き、 /* ~ */で囲まれているコメントを参照しながら、
CSSで
書き方のルールもとてもシンプルで、
セレクタ { プロパティ: 値 }
一つのセレクタに複数のプロパティを与える場合はセミコロンで区切ります。
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
具体例だと、
body {
padding: 20px;
font-size: 100%;
}
人間の言葉に置き換えると、
body の
詰めは 20px で、
font-size は 100%
です
このように、
セレクタの部分で、
プロパティの部分で、
値の部分で、
これらを、
これは実際にCSSを書き換えてみるのが一番実感できるので、
もっと読みやすい文章にする
line-heightの値を調節
sample2.
本文を読みやすくするため、
サンプルファイルではすでにコメントで書いてありますが、
- line-heightに関する参考
見出しをより見出しらしくデザイン
このXHTMLにはh1、
そこで2種類の見出しを以下のように指定してみます。
/* 見出しレベル1 */
h1 {
margin-bottom: 0.9em; /* 下に続く要素(ここでは段落p要素)との距離を指定 */
padding: 0.2em; /* 青色の背景に対して詰めがないと、文字と四角い枠がくっついてみづらくなるため、ここで詰めを指定 */
color: #fff; /* 文字色を白く */
background-color: #0261a6; /* 背景色を青系統に */
font-size: 140%; /* 本文と区別をつけるために大きく指定 */
}
/* 見出しレベル2 */
h2 {
margin-bottom: 0.6em; /* 下に続く要素(ここでは段落p要素)との距離を指定 */
padding: 0.3em; /* ここで詰めを設定していないと、次に指定する下線と文字がくっついてみづらいので適度な値を指定 */
border-bottom: 1px solid #0261a6; /* 下線を青系統に */
font-size: 120%; /* h1ほど大きすぎず、pよりは大きく */
}
このように指定してCSSを保存し、
値には正解はありませんが、