ホームページ基礎講座 外部スタイルシートとグラデーション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です!
