今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<header>
<h1 class="header-title">ECOLOGY【エコロジー】</h1>
</header>
<article>
<section>
<h1 class="sub-title">基本ポリシー</h1>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー/環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
</section>
<section>
<h1 class="sub-title">エコロジーへの取り組み</h1>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーsの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
</section>
<section>
<h1 class="sub-title">商品のラインナップ</h1>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</section>
</article>
<footer>
<p>Copyright © Computer Technology Groups. All rights reserved</p>
</footer>
</div>
</body>
</html>

外部スタイルシート
今回は、今までのようなCSSの記述をhead要素のtitle要素直下にstyle要素を使った記述ではなく、CSSの記述を、拡張子がcssとなる別のファイルに入力していきます。
そのため、10のフォルダの上で右クリック>新しいファイルを作成して、ファイル名はstyle.cssとします。
また、HTMLファイルのtitle要素直下に、作成したstyle.cssを読み込むコードを記述します。
<link rel="stylesheet" type="text/css" href="style.css">
このように別ファイルに記述するCSSを外部スタイルシートといいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
rel属性 rel=”stylesheet”とは
rel 属性は、「relationship」を意味します。翻訳すると、関係、つながりなどを指します。ここでは、読み込むリンクの種別は、「スタイルシートファイル」であることを指しています。
他にも rel=”icon” などの指定もあり、これは、favicon などのショートカットアイコンを指しています。
type属性 type=”text/css”とは
type属性に指定する値のtext/cssはMIMEタイプと呼ばれ、HTML5の以前のバージョン(XHTML/HTML)では必須でしたが、現バージョンでは、省略可です。
値は、テキストで書かれたCSSファイルといった意味で、他にもtext/javascript などのMIMEタイプもあります。
style.cssファイルにCSSを記述
下記コードを、style.cssを開いて模写コーディングしてみましょう。
html{
font-size:100%;
}
body {
font-size:16px;
line-height: 1.75;
background: #aaa
}
.content {
width: 80%;
margin: 1rem auto;
}
.header-title {
font-size: 1.5rem;
color: #065d31;
background-color: #fff;
padding: 1em;
box-sizing: border-box;
text-align: center;
margin-bottom: 1rem;
}
.sub-title {
font-size: 1.25rem;
color: #065d31;
background-color: #fff;
padding: 0.5em;
box-sizing: border-box;
text-align: center;
margin-bottom: 1rem;
}
section {
margin-bottom: 2rem;
}
section p {
text-align: justify;
}
header,
footer {
text-align: center;
}

今回は、.contentというclass名をつけたボックスに、width:80%の記述があるため、プレビューで閲覧した際にパソコン画面の大きさによって、中のコンテンツの幅が上記のブウラザ見本とは異なります。
入力が終わったら、HTML要素やclass名をCSSファイルを見ながら確認していきますので、エディタ画面を下記のように二分割しておきましょう。
メニューバー>表示>左右画面分割
分割した左右にHTMLファイルをCSSファイルを配置
画面が分割されましたら、index.htmlとstyle.cssをダブルクリックで開きます。横に並ばないようでしたら、左のサイドバー上部に、左 index.html 右style.cssとなるようにドラッグして配置します。

htmlにfont-size:100%
一番の親要素である、html要素にブラウザが持つデフォルトのフォントサイズの100%を使うという記述を書きます。そのあと、body要素のフォントサイズがルートのサイズとなり、このあとのremという単位の倍数になります。今回は、16pxが1remとなります。この様な記述で行っておくと、bodyのfont-sizeが変更されると、以下にremで指定されているところは、その倍数に自動変更されます。
html{
font-size:100%;
}
body {
font-size:16px;
line-height: 1.75;
background-color: #aaa
}
.content {
width: 80%;
margin: 1rem auto;
}
background-color: #aaaとは
16進数のカラーコードは、#RRGGBB(赤・緑・青)を表しています。6桁の数字とアルファベットでできていますが、繰り返している場合は、省略可能です。
- 白・・・#FFFFFF →#FFF
- 黒・・・#000000→#000
- 赤・・・#FF0000→#F00
- 青・・・#0000FF→#00F
body にグラデーション
次はbody要素をブラッシュアップをします。CSSのLevel3には、background-imageプロパティの値にlinear-gradient()関数が使えます。
全体の背景であるbody 要素にbackgraund-image : linear-gradientを適用させます。
設定内容 | プロパティ名 | 値 |
---|---|---|
グラデーション | background-image または background | linear-gradient(to 方向, 開始色, 終了色); |
linear-gradient()関数
通常のカラーは単色ですが、linear-gradient()関数使うと、2色以上のグラデーションを適用することができます。
body{
font-size:16px;
line-height: 1.75;
/* background: #aaa*/
/* ここからがグラデーション*/
background-image: linear-gradient(
90deg,/*角度 方向*/
#0093ff,/*色 複数指定可能*/
#85d6ef
);
}
90deg は角度です。カンマ区切りで、色を2色以上記述します。色は#で始まる16進法や、rgb()やreba()も可能です。
角度の変わりに方向も可能で、to left(左方向にグラデーション)や to bottom (上はから下へのグラデーション)などの指定も行えます。

グラデーションは方向、色、色の範囲など記述も複雑になるので、ジェネレーターと呼ばれるグラデーションCSSを作成してくれるサイトがります。ぜひチェックしておきましょう。
CSSのグループセレクタ
CSS内で、header要素 、footer要素も同一の指定の場合、まとめてグループ指定しておくと効率的です。
各要素の間をカンマ区切りで設定します。最後にカンマを入れると反映しないので注意しましょう。
header,
footer {
text-align: center;
}
ホームページ中級講座 外部スタイルシート
さらにブラッシュアップ!動画をチェックしましょう。