CSSファイルの作成
それでは、先ほど作ったHTMLファイルをCSS（カスケード・スタイル・シート）でデザインしてみましょう。スタイルシートは＜HEAD＞と＜/HEAD＞の間に挿入します。＜HEAD＞にはすでにタイトルとメタ情報が書き込まれていますからその次の行から始めます。スタイルシートは＜STYLE TYPE=”TEXT/CSS＞と＜/STYLE＞の間に書いていきます。
ここでは全体的に黄色っぽい色使いにしましたが、いろいろ変えて効果を確かめられるといいと思います。下にサンプルを記述しておきますからコピーしてテキストエディターの編集画面に貼れば手間が省けます。
|
<style type="text/css"> body {background:khaki;margin-left:8em;margin-right:8em;} h1 {color:greenyellow;background: green;} p {line-height:1.6em;} </style> |
上のCSSの意味を簡単に説明しておきます。BODYは画面全体のことですが、その背景色はKHAKI色にしました。そして、今のままでは文章が画面いっぱいに広がって読みづらいので、画面の左右に８字分のマージンスペースをとりました。また、大見出しの背景色はGREENとし、大見出しの文字自体はGREENYELLOWにしました。そして、文章の行間は1.6字分あけました。以上です。
それではこのCSSをテキストエディターの編集画面に貼りつけて上書き保存してください。そのあとHTMLファイルを閉じ、再びHTMLファイルを開き「更新」ボタンを押してください。がらりと印象が変わる画面になります。
次の項目→リンクを張るには