前回の03はじめてのホームページでは「画像要素」の設置を行いました。
今回はHTMLでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。まずここで学習するhtmlファイルは下記になりますので、04という名前のフォルダを作成後、index.htmlというファイル名でHTMLファイルを作成します。03同様、画像もフォルダに設置しておきましょう。下記コードをコード模写もしくは、コピーして準備します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジー&環境問題</title>
</head>
<body>
<h1>ECOLOGY 【エコロジーへの取り組み】</h1>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
<p>
<a href="index.html"><img src="img.jpeg" alt="エコロジー 森林"></a>
</p>
<p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
<p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</body>
</html>

目次
HTML内に書く内包のスタイルシート
上記のindex.htmlファイルのtitle要素の下にstyle要素を書いて、その中にCSSを記述します。
このようにHTMLファイル内に記述するスタイルシートを「内部スタイルシート」や「内包のスタイルシート」といいます。
このようなCSSの記述は、HTMLファイルに同梱して記述できますが、行数が増えるとメンテナンスし辛いので、通常は外部スタイルシート(CSS部分が別のファイル)として記述することになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジー&環境問題 </title>
<style>
body{
background-color: #999999;
font-size:100%;
line-height: 1.7;
font-family:serif;
}
h1{
background-color: #000000;
color: #ffffff;
text-align: center;
}
p.center{
text-align: center;
}
</style>
</head>
CSSのプロパティ
設定内容 | プロパティ名 | 値 |
---|---|---|
背景色 | background-color | 16進数(#000000) カラーネーム(red,blue) reb(000,000,000) |
文字サイズ | font-size | ピクセル指定(16px,24px) 倍数指定(em,rem) その他多数あり |
行間 | line-height | ピクセル指定(16px,24px) 倍数指定(em,rem) 単位なしの指定 (1や2) |
書体 | font-family | serif(明長系) sans-serif(ゴシック) |
文字の色 | color | 16進数(#000000) カラーネーム(red,blue) reb(000,000,000) |
行揃え | text-align | 中央揃え(center) 右揃え(right) |
p要素にclassをつけてみる
p要素に中央揃え「text-align:center」を指定したい場合、1箇所だけでよい場合は<p class=”center”> という他の<p>とは違う特別性を持たせたclass指定をおこないます。
cssで指定するときは、下記のように p要素に .center という形で指定します。class名だけの.centerでもよいのですが、どの要素に指定がある「class」なのかをわかりやすくする為、要素名+class名とつけています。
p.center{
text-align:center;
}

続きは動画で確認してみましょう。