ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHTMLファイルにリンクします。同じディレクトリ内にstyles.cssというファイルを作成します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ECOLOGY【エコロジー】</h1>
<nav>
<ul>
<li><a href="#policy">基本ポリシー</a></li>
<li><a href="#efforts">エコロジーへの取り組み</a></li>
<li><a href="#products">商品のラインナップ</a></li>
<li><a href="#news">ニュース</a></li>
</ul>
</nav>
</header>
<figure>
<img src="green.jpg" alt="自然と緑 ECOLOGY【エコロジー】">
<figcaption>自然と緑 ECOLOGY【エコロジー】</figcaption>
</figure>
<main>
<article id="policy">
<header>
<h2>基本ポリシー</h2>
<time datetime="2024-12-24">2024年12月24日</time>
</header>
<section>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
</section>
</article>
<article id="efforts">
<header>
<h2>エコロジーへの取り組み</h2>
<time datetime="2024-11-15">2024年11月15日</time>
</header>
<section>
<p>Computer Technology
Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
</p>
</section>
</article>
<article id="products">
<header>
<h2>商品のラインナップ</h2>
<time datetime="2024-10-01">2024年10月1日</time>
</header>
<section>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
</p>
</section>
</article>
</main>
<aside id="news">
<h2>最新ニュース</h2>
<p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
</aside>
<footer>
<p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</footer>
</body>
</html>
CSSコード
下記は、別ファイル 「style.css」に記述します。拡張子がcssなので、<style>要素は必要ありません。
html {
font-size: 100%;
/* 基準フォントサイズ: 16px (1rem) */
}
body {
font-size: 1rem;
/* 16px */
line-height: 1.75;
/* 行間の高さを1.75倍に設定 */
background-image: linear-gradient(180deg, #0093ff, #4ac8f5, #85d6ef, #4ac8f5, #0093ff);
background-size: cover;
background-position: center;
margin: 0;
}
.container {
width: 960px;
margin: auto;
background-color: #ffffff;
}
/* 汎用スタイル */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center {
text-align: center;
}
/* ヘッダー */
header {
background-color: #2ecc71;
padding: 0.625rem 0;
/* 10px = 0.625rem */
text-align: center;
}
header h1 {
font-size: 2rem;
/* 32px */
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
column-gap: 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #f4f4f4;
text-decoration: underline;
}
/* メインコンテンツ */
main {
padding: 1.25rem;
/* 20px = 1.25rem */
background-color: #f9f9f9;
}
article {
margin-bottom: 1.25rem;
/* 20px = 1.25rem */
border: 1px solid #ddd;
padding: 0.625rem;
/* 10px = 0.625rem */
background-color: rgba(255, 255, 255, 0.7);
}
article header {
border-bottom: 1px solid #ddd;
margin-bottom: 0.625rem;
/* 10px = 0.625rem */
padding-bottom: 0.3125rem;
/* 5px = 0.3125rem */
}
article h2 {
font-size: 1.5rem;
/* 24px */
margin: 0;
}
article time {
font-size: 1rem;
/* 16px */
color: rgb(98, 98, 98);
}
/* サイドバー */
aside {
background-color: #f4f4f4;
padding: 0.625rem;
/* 10px = 0.625rem */
margin: 1.25rem 0;
/* 20px = 1.25rem */
border-left: 5px solid #2ecc71;
}
/* フッター */
footer {
text-align: center;
padding: 0.625rem;
/* 10px = 0.625rem */
background-color: #2ecc71;
color: white;
font-size: 1rem;
/* 16px */
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 1rem;
}
nav ul {
flex-direction: column;
row-gap: 1rem;
}
}
HTMLファイルにリンクする外部スタイルシート
作成したスタイルシートをHTMLファイルの<head>セクションでリンクします。以下のように、<link>タグを使用して外部スタイルシートを指定します：
<head>
<meta charset="UTF-8">
<title>エコロジーと環境問題</title>
<link rel="stylesheet" href="styles.css">
</head>
外部スタイルシートとは？
外部スタイルシートは、CSSコードを別のファイルに分離し、HTMLファイルからリンクすることで、HTMLの構造とデザインを分離する方法です。同じCSSを複数のHTMLファイルで共有できるため、一貫性を保ちやすく、スタイルの変更が必要な場合、1つのCSSファイルを編集するだけで済みます。また、CSSコードをHTMLから分離することで、HTMLがすっきりと見やすくなり、さらにブラウザがCSSファイルをキャッシュすることで、サイトの読み込み速度が向上します。
rel属性 rel=”stylesheet”とは
rel属性は、HTMLの<link>要素や<a>要素に使用される属性で、リンクするリソースやリンク先の関係性（relationship）を指定します。relは「relationship」の略です。rel属性を指定しない場合、ブラウザはその<link>がスタイルシートであるかどうか判断できないため、rel="stylesheet"を省略できません。
type属性 type=”text/css”とは
type="text/css"は、HTML5では必須ではありません。<link>タグでCSSファイルをリンクする際、ブラウザはデフォルトでそのリソースがCSSファイルであると認識します。そのため、以下のようにtype属性を省略しても問題なく動作します
左右画面分割
このあとの作業効率をあげるために、今後は、エディタ画面で、HTMLとCSSを並べて配置し、どの要素に対してCSSが適用されているかを確認しながら作業しましょう。class名の入力ミスなども防げます。
HTMLとremを活用したフォントサイズの設定
ブラウザが持つデフォルトのフォントサイズを基準にするために、html要素のfont-sizeを100%に設定します。一般的に、ブラウザのデフォルトフォントサイズは16pxなので、100%と指定すると16pxになります。
html {
font-size: 100%; /* ブラウザのデフォルトを基準にする */
}
次にBody要素で基準フォントサイズを設定します。body要素でフォントサイズがremの基準値となります。ここでは16pxを基準として、全体のスケールを管理しやすくします。
body {
font-size: 16px; /* 1rem = 16px となる */
}
その後、rem単位を使って要素ごとにサイズを指定します。remはhtmlまたはbodyで設定したサイズを基準にした倍数で動作するため、基準値を変えるだけで全体のデザインをスケーラブルに調整できます。
h1 {
font-size: 2rem; /* 16px × 2 = 32px */
}
p {
font-size: 1rem; /* 16px */
}
これは、基準を変えると自動で調整されるということになり、例えば、bodyのフォントサイズを18pxに変更すると、1rem = 18pxとなり、remで指定したサイズもすべて自動で調整されます。
body {
font-size: 18px; /* 1rem = 18px */
}
h1 {
font-size: 2rem; /* 18px × 2 = 36px */
}
p {
font-size: 1rem; /* 18px */
}
応用例：レスポンシブ用
スマートフォ対応の、レスポンシブデザインに対応しやすくなります。htmlまたはbodyのフォントサイズを@mediaクエリで変更することで、画面サイズに応じて全体のスケールを簡単に調整できます。
@media (max-width: 768px) {
body {
font-size: 14px; /* 小さい画面では1rem = 14px */
}
}
body にグラデーション
次はbody要素をブラッシュアップをします。CSSのLevel3には、background-imageプロパティの値にlinear-gradient()関数が使えます。linear-gradient()関数は、CSSのbackground-imageプロパティで使用され、線形のグラデーションを作成するための強力な機能です。背景を色のグラデーションで装飾する際に使用されます。
/*基本的な書き方*/ background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: グラデーションの方向を指定します。角度やキーワードで設定できます。to right（右方向）to bottom（下方向）45deg（角度で指定。例: 45度）
color-stop: グラデーションで使用する色とその位置（オプション）を指定します。- 色名（例:
red）やRGBA値、HEX値などが使えます。 - 色の位置（例:
50%）を指定すると、その位置で色が切り替わります。
- 色名（例:
シンプルな上下のグラデーション
body {
background-image: linear-gradient(to bottom, #ffffff, #cccccc);
}
上部（#ffffff）から下部（#cccccc）へのグラデーション。
斜め方向のグラデーション
body {
background-image: linear-gradient(45deg, #ff0000, #0000ff);
}
左上（赤）から右下（青）への斜めグラデーション。
複数の色を使用したグラデーション
body {
background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
}
左から赤、黄色、緑へ滑らかに変化するグラデーション。
色の位置を指定したグラデーション
body {
background-image: linear-gradient(to bottom, #ff0000 25%, #0000ff 75%);
}
赤が全体の25%の位置まで適用され、そこから青に変化。
今回のコード
body {
font-size: 1rem;
/* 16px */
line-height: 1.75;
/* 行間の高さを1.75倍に設定 */
background-image: linear-gradient(180deg,
#0093ff,
#4ac8f5,
#85d6ef,
#4ac8f5,
#0093ff);
background-size: cover;
background-position: center;
margin: 0;
}
グラデーション自動作成
下記のジェネレーターはグラデーションを選択するとCSSコードが生成されます。コピーして使いましょう。
CSSコード
background: linear-gradient(45deg, #ff7eb3, #ff758c);
KobeyaLab >> 作成されたグラデーションを選んで編集 CSSグラデーションジェネレーター
完成イメージ
次は、ボックスに影をつけるbox-shadowです！
