06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の０５はじめてのホームページでは、section要素などを指定する練習を行いました。
動画で学ぶWebデザイン教室 Fuku…
05 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の０４はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける…
今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。
06のフォルダを作成し、下記コードをコピーもしくは、コードを模写してindex.htmlファイルを準備します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題 [Computer Technology Groups]</title>
<style>
</style>
</head>
<body>
<article>
<h1>ECOLOGY【エコロジー】</h1>
<section>
<h1>基本ポリシー</h1>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
</section>
<section>
<h1>エコロジーへの取り組み</h1>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
</section>
<section>
<h1>商品のラインナップ</h1>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</section>
</article>
<footer>
<p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</footer>
</body>
</html>
目次
基本設定をbody要素で作成
HTMLファイル内<style>要素の下に、CSSを記述します。
まずは、body要素の背景色を指定して全体の基本となる文字サイズを100%とし、行と行の間を指定するline-heightプロパティを記述します。
body {
background-color: #ffffe0;
font-size: 100%;
line-height: 1.8;
}
上記のコードは、body全体の色が薄い黄色となり、文字のサイズはブラウザのデフォルトサイズ16pxが指定となります。
横幅指定のwidth を使う
次にarticle要素を使って、横幅、外枠のborder 、線からの内側余白を指定します。
widthプロパティを使うので、横幅が一定の距離で折り返すというところになります。
article{
/*横の幅を指定する*/
width:600px;
border:1px solid #000000;
padding:2em;
margin : 0 auto;
}
| 設定内容 | プロパティ名 | 値 |
|---|---|---|
| 指定要素の横の幅指定 | width | ピクセル、％、em、vwなど単位をつける |
| 指定要素の縦の幅指定 | height | ピクセル、％、em、vhなど単位をつける |
| 指定要素の内側余白 | padding | ピクセル、em、remなどの単位をつける padding:10px(上下左右の余白) padding-left:10px(左の余白) padding-right:10px(右の余白) padding-top:10px(上の余白) padding-bottom:10px(下の余白) |
| 指定要素の外側余白 | margin | ピクセル、em、remなどの単位をつける margin:10px(上下左右の余白) margin-left:10px(左の余白) margin-right:10px(右の余白) margin-top:10px(上の余白) margin-bottom:10px(下の余白) |
上記のコードは、外枠のarticle に横幅600pxで折り返し、その600px 分のborderを指定して、その線から内側のテキストまでの距離を2em(2文字分)とするという指定です。
この中のmargin : 0 auto という 外部余白 margin プロパティを使って、 横幅がwidth600px の時 上下の余白は 0 左右の余白は auto 自動であると書きます。
この指定で、600px の幅のボックスは画面中央に配置されることになります。
見出し枠にborderを設定
section h1 {
border: 1px solid #999;
}
上記の設定は、見出し h1 要素に1px の黒の実線を外枠に書いています。
その下のコードは同じh1 に記述しますが、sectionという親要素の中のh1 であるという指定になるので、全てのh1要素 が中央揃えになるとは限りません。この指定を親の中の子要素に指定する「子孫セレクタ」といいます。
h1とfooter はまとめて中央揃え
h1,footer{
text-align: center;
}
行の中で中央に揃える「text-align:center」を使って中央に揃えます。その際、h1要素とfooter要素も同じ中央揃えなので、同時に指定する場合は、カンマ区切りで続けて書きます。この指定をグループセレクタといいます。
完成形の模写コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題 [Computer Technology Groups]</title>
<style>
body {
background-color: #ffffe0;
font-size: 100%;
line-height: 1.8;
}
article{
/*横の幅を指定する*/
width:600px;
border:1px solid #000000;
padding:2em;
margin : 0 auto;
}
section h1 {
border: 1px solid #999;
}
h1,footer{
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>ECOLOGY【エコロジー】</h1>
<section>
<h1>基本ポリシー</h1>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
</section>
<section>
<h1>エコロジーへの取り組み</h1>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
</section>
<section>
<h1>商品のラインナップ</h1>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</section>
</article>
<footer>
<p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</footer>
</body>
</html>
詳細な入力は動画で確認しましょう。
ホームページ基礎講座 CSS編 6回目の動画
