間があいてしまいましたが,
今回は(X)HTML
- ※1) (X)HTML
- (Extensible) HyperText Markup Language。XHTMLとHTMLの違いについての詳細は割愛しますが,
簡単に説明するとXHTMLはXMLに基づいて書かれた言語であり, HTMLに比べて書式の決まりごと (要素名・ 属性名が小文字でなくてはならなかったり, 使える要素や属性の種類の制約など) が厳格になっています。詳しくは, @ITの記事が参考になります。
その他,HTML, XHTMLはW3C (World Wide Web consortium) が標準化を推進し, 言語の仕様の策定が行われていますので, もっと深く学習する際に仕様書に目を通しておきましょう。ただ, 仕様書を読んで頭でっかちになってから実践するよりは, 実践しながらサイト制作の楽しさを覚えつつ正しさを身につけていくほうが結果的に吸収のスピードは早くなると思います。
見栄えを整えるその前に ~簡単な(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オーサリングソフトと呼ばれるソフトがありどんどん高機能になってきましたが,
さて,
- ※2) CSS
Cascading Style Sheets。視覚デザイン以外にも,
音声を制御するCSSもあるので厳密には見た目だけではありません。 スペースや改行の有無によってブラウザの見栄えには影響しませんが,
コードのメンテナンス性や見やすさのためにコロンと値の間やセレクタとかっこの間にスペースをいれるなど, 独自の記述ルールを決めている制作者が多いので, 自分にあった記述ルールを決めるとよいでしょう。
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.