CSSの装飾で最もよく使われる「border」「border-radius」「box-shadow」 の基本をまとめて学びます。
これらのプロパティは、ボックスや見出し、カードデザインなどの装飾に欠かせない要素で、Webデザインの“見た目の差”を作る重要なテクニックです。
- 枠線（border）の基本的な書き方と省略記法
- 角を丸くする border-radius の値の意味
- 立体感を出す box-shadow の構文と影のぼかし方
- 実際のデザイン例と、初心者がつまずきやすいポイント
- hover時のデザイン変化（応用編）
このページは CSS基礎01〜03の内容が理解できている人向けの振り返りページとして構成しており、コードの丸暗記ではなく、使い方の「理由」や「考え方」まで理解できるように解説しています。
Contents
表示例（画面イメージ）
作成ファイル・保存場所
css-basicフォルダの中に以下の2つのファイルを用意してください：- HTMLファイル：
01-05.htmlテキストファイルはコピーして使用 見出しのみマークアップされているので、その他のHTMLのマークアップを行います - CSSファイル：
style01-05.css（今回新たに作成）
htmlは下記からコピー
<h1>ECOLOGY【エコロジー】</h1> Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。 成果や実績を地域に還元することもポリシーとしています。 <h2>商品のラインナップ</h2> 紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。 リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、 各地域のリサイクルセンターでもお買い求めいただけます。 <h2>リサイクル商品</h2> ・ノートやメモ帳などの紙製品 ・ペットボトル ・布製品 ・ ダンボール／梱包材 ・木工製品／割り箸・爪楊枝など ・コンピューター基盤／電子機器 <h2>省エネ商品の使い方</h2> 1. 消費電力を計測する機器を設置 2. 電源を自動的にオフにするキットの用意 3. 水量を調節する蛇口セットの準備 4. 家庭用省エネ10点セット Copyright Computer Technology Groups All rights reserved.
HTMLマークアップ後の解答例
上記のHTMLファイル内に貼り付けたテキスト文章のみからHTMLでマークアップを行います。今回はheader main footerを使いmain内のグループわけはsectionを使います。またul ol要素にわかりやすいclass名を設定しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>エコロジーと環境問題 [Computer Technology Groups]</title>
<link rel="stylesheet" href="style01-05.css">
<style>
</style>
</head>
<body>
<!--cssにおいて、幅などを指定するためデザインのためのdiv設定-->
<div class="wrapper">
<header>
<h1 class="title">ECOLOGY【エコロジー】</h1>
<p><b>Computer Technology Groups</b>では、グループをあげてエコロジー／環境問題に取り組んでいます。成果や実績を地域に還元することもポリシーとしています。</p>
</header>
<main>
<section>
<h2>商品のラインナップ</h2>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
</p>
</section>
<section>
<h2>リサイクル商品</h2>
<ul class="recycle_list">
<li>ノートやメモ帳などの紙製品</li>
<li>ペットボトル</li>
<li>布製品</li>
<li>ダンボール／梱包材</li>
<li>木工製品／割り箸・爪楊枝など</li>
<li>コンピューター基盤／電子機器</li>
</ul>
</section>
<section>
<h2>省エネ商品の使い方</h2>
<ol class="ecology_list">
<li>消費電力を計測する機器を設置</li>
<li>電源を自動的にオフにするキットの用意</li>
<li>水量を調節する蛇口セットの準備</li>
<li>家庭用省エネ10点セット</li>
</ol>
</section>
</main>
</div>
<footer>
<p><small>Copyright © Computer Technology Groups All rights reserved.</small></p>
</footer
</body>
</html>
指示
以下の手順で、01-05.html に style01-05.css を読み込んでスタイルを適用してください。
<head>に以下の1行を追加して、外部CSSを読み込む- style01-05.css に以下の内容を記述します（この課題ページ内で後述）
- 「任意」と書かれている部分は、自分なりにカスタマイズしてもOKです！
💡補足：早く終わった方は Google Fonts を使って見出しや本文のフォントを変更してみましょう！
チェックポイント
section要素にボーダーと背景色が設定されている- リストマークが変更され、各項目に下線（破線・点線）が入っている
- ヘッダー部分に
box-shadowやborder-radiusが使われている .wrapperで全体を中央に揃えているfooterの背景色が設定され、中央揃え＋文字サイズが小さめになっているh2に波線の下線がついていて、中央揃えになっている
スタイルの指定内容
- body に指定するスタイル
- フォントサイズ：
1em（=16px） - 行間：
line-height: 1.8 - 書体：
Arial, sans-serif（※必要に応じて"メイリオ"などに変更してもOK） - 背景色：
#ffffe0 - 文字間：
letter-spacing: 0.05em
- フォントサイズ：
- 全体のレイアウト（.wrapper）
- 最大幅：
800px - 通常幅：
90% - 左右中央寄せ：
margin: 1em auto 2em
- 最大幅：
- header に指定するスタイル
- 下余白：
1.5em - 影：
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1)
- 下余白：
- header内のh1についているclass=”title”に指定するスタイル
.title部分に背景色：#ff7500.titleにパディング：0.5em 0.titleの角丸：border-radius: 10px 10px 0 0.titleの文字色：#fff.titleの文字サイズ：1.5em（≒24px）.titleの文字位置：中央揃え（text-align: center）
- header 内の p に指定するスタイル
- 上以外の境界線：
border: 1px solid #999; border-top: none - 背景色：
#fff - 内側余白：
0.5em
- 上以外の境界線：
- section に共通のスタイル
- 境界線：
1px solid #999 - 背景色：
#fff - 影：
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1) - 内側余白：
1em - 下余白：
1.5em（最後の section のみ margin-bottom: 0）
- 境界線：
- h2 に指定するスタイル
- 中央揃え：
text-align: center - 波線下線（オレンジ）：
text-decoration: underline wavy #ff7500 - 下線のオフセット：
text-underline-offset: 5px - 下余白：
margin-bottom: 0.5em
- 中央揃え：
- ul / ol（リスト）に指定するスタイル
- 左マージン：
20px - リストマーク位置：
list-style-position: inside
- 左マージン：
- .recycle_list に指定するスタイル
- マーカー種類：
circle - 各項目に下線（破線）：
border-bottom: 1px dashed #9e9e9e
- マーカー種類：
- .ecology_list に指定するスタイル
- マーカー種類：
decimal-leading-zero - 各項目に下線（点線）：
border-bottom: 2px dotted #9e9e9e
- マーカー種類：
- footer に指定するスタイル
- 背景色：
#ff7500 - 上下余白：
2em - 中央揃え：
text-align: center - 文字色：白（
#ffffff） - 文字サイズ：小さめ（
font-size: 0.8em）
- 背景色：
解答例（CSS）
まとめて設定できるcssを考えて記述していきましょう。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ボディ全体のスタイル */
body {
background: #ffffe0;
font-size: 1em;
line-height: 1.8;
font-family: Arial, sans-serif;
letter-spacing: 0.05em;
}
/* 記事全体のスタイル */
.wrapper {
max-width: 800px;
width: 90%;
margin: 1em auto 2em;
}
header {
margin-bottom: 1.5em;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);
}
header p {
border: 1px solid #999;
border-top: none;
padding: 0.5em;
background-color: #fff;
}
.title {
background-color: #ff7500;
padding: 0.5em 0;
border-radius: 10px 10px 0 0;
color: #fff;
font-size: 1.5em;
text-align: center;
}
/* セクションの共通のスタイル */
section {
border: 1px solid #999;
background-color: #fff;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);
padding: 1em;
margin-bottom: 1.5em;
}
section:last-child {
margin-bottom: 0;
}
/* タイトルのスタイル */
/* 中央揃えクラス */
h2 {
text-align: center;
text-decoration: underline wavy #ff7500;
text-underline-offset: 5px;
margin-bottom: 0.5em;
}
/* リストのスタイル */
ul,
ol {
margin-left: 20px;
list-style-position: inside;
}
.recycle_list {
list-style-type: circle;
}
.recycle_list li {
border-bottom: 1px dashed #9e9e9e;
}
.ecology_list {
list-style-type: decimal-leading-zero;
}
.ecology_list li {
border-bottom: 2px dotted #9e9e9e;
}
/* フッターのスタイル */
footer {
text-align: center;
font-size: 0.8em;
background-color: #ff7500;
padding: 2em 0;
color: #ffffff;
}
早く終わった人は…
- Google Fonts を使って、見出しや本文のフォントを変更してみよう！
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">- CSS：
font-family: 'Noto Sans JP', sans-serif;