前回の03はじめてのホームページではimg要素を使って、画像の設置を行いました。
今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。
まずは、このページで学習するhtmlファイルを作りましょう。下記のコードになりますので、04という名前のフォルダを作成し、index.htmlというファイル名でHTMLファイルを作成します。03同様、画像もフォルダに設置しておきましょう。下記コードをコード模写入力もしくは、コピーして準備します。
HTMLコード index.html
<!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のプロパティ
上記で記述した、CSS(カスケーティングスタイルシート)内で使用した、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」を指定したい場合、p要素が記述されているところ全てではなく、1箇所だけのp要素に適用したい場合は、class名を指定、特別性をもたせます。
<p class="center">
cssで指定するときは、下記のように p要素に .center という形で指定します。class名だけの.centerでもよいのですが、どの要素に指定がある「class」なのかをわかりやすくする為、要素名+class名とつけています。
p.center{ text-align:center; }
続きは動画で確認してみましょう。