日記のデザインをしよう
それでは簡単なデザインに入りましょう。今回は本格的なデザインをする前の準備をします。
スタイルシートの仕組み
実践の前にまずは理論的な解説をしましょう。
実はHTMLでは見た目を一切指定することができません。HTMLが指定できるのは、文章のある一部分が「タイトル」なのか「段落」なのか、それから次回習いますが「見出し」なのか……、などの論理構造だけなのです。
というわけで、デザインのためにスタイルシートというものを使います。
↓
↓
このように、スタイルシートとは文章(HTML)と表示を仲立ちするフィルターのような役割をします。
このスタイルシートには何種類かがありますが、ここでは最も普及しているCSSというスタイルシートについてのみ解説します。
CSSの適用方法には次の３つがあります。
- style要素としてHTMLに埋め込む
- style属性としてHTMLに埋め込む
- HTMLの外部に保存する
今回は最も簡単な「style要素としてHTMLに埋め込む」を学びましょう。
style要素としてHTMLに埋め込む
それでは、スタイルを反映させる方法です。
<head>
<title>タイトル</title>
<style type="text/css">
～ここにスタイルを書いていきます～
</style>
</head>
例のようにhead要素の中に<style type="text/css">と</style>を書きます。その中にスタイルを記述していけばＯＫです。
CSSの文法
HTMLでCSSを記述する部分が完成したのでいよいよCSSを書いていきます。
とりあえず本文全体を、画面の75%に表示させることにしましょう。
body {
width: 75%;
}
これがCSS部分の完成形です。widthは英語で「幅」の意味で「ウィヅス」と読みます。
例のように、「本文全体(body)は幅(width)が75%」という文を
本文全体(body)は {
幅(width)が: 75%;
}
という感じに日本語をそのまま翻訳してやったらいいだけです。
ところでこれを実際に反映させると、図のように右25%が空白になってしまいます。
これに関してはスタイルシート職人さんの家系に代々伝わる秘技がありますのでそれを使います。
body {
width: 75%;
margin-left: auto;
marigin-right: auto;
}
という風に「左右の空白を自動でとってくれ」という指示を加えることで、図のように画面の真ん中に表示されます
複数のスタイルを指定したければ、このような感じで「;」で区切ってどんどん下に足していけます。
さらに、段落の最初に一字下げを適用させてみましょう。
body {
width: 75%;
margin-left: auto;
marigin-right: auto;
}
p {
text-indent: 1em;
}
このようにすると一字下げが適用されます。
そうして完成したHTML文書がこのようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>今日の日記</title>
<style type="text/css">
body {
width: 75%;
margin-left: auto;
marigin-right: auto;
}
p {
text-indent: 1em;
}
</style>
</head>
<body>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
</body>
</html>
