rensyu10.htmlとrensyu10.cssを開き、ページの内容を確認します。簡単なリンク集のページになっており、CSSによってすでにデザインがされています。以下のようなデザインになっているはずです。
rensyu10.html の最初の状態このデザインの修正を行います。
新しいCSSファイル
rensyu10plus.cssを rensyu フォルダ内に用意します。下のリンクからファイルをダウンロードすることもできます。「右クリック」→「対象をファイルに保存」でダウンロードできます。
rensyu10plus.css ←ここからダウンロード
関連ファイルは以下のような配置になるはずです。（よく似たファイル名に注意！）
ダウンロードした
rensyu10plus.cssが、rensyu10.htmlに読み込まれるようにします。rensyu10.htmlを開き<link>を探します。すでにrensyu10.cssを読み込むための設定が記載されていると思いますが、その下の行に新たにrensyu10plus.cssを読み込むための行を追記してください。： 省略
<link rel="stylesheet" href="./rensyu10.css" >
<link rel="stylesheet" href="./rensyu10plus.css" >
： 省略必ず既存の
<link>より下の行に追記してください。rensyu10plus.cssをrensyu10.cssより後から読み込むことで、CSS設定を上書きするためです。
CSSでは後から書かれたルールが、前のルールを上書きします。
同種の設定が重複している場合も同様に、後者の効果で上書きされます。今後は、
rensyu10plus.cssを編集し、デザインの修正を行います。ここでは暗めの色合いにして、目に優しい感じのデザインを目指します。なお例として使用する色合いをそのまま使っても完成できますが、各自の判断で好きな色に変えても構いません。
まず、背景色を変更します。
rensyu10plus.css を開き、
<body>に対してbackground-colorを設定し、色を変更します。その際、単色で色を塗るのではなく
linear-gradient( )を使用すると、グラデーションをかけます。詳しくは下の例を参考にしてください。また、合わせて
fixedの値を追加することで、ページをスクロールしても背景が移動しないように設定します。/* 背景色の変更 */
body {
background-color: #4B4B4B;
background: linear-gradient(to bottom, #4B4B4B, #282828) fixed;
}
実行例上の例では、グラデーションを下に向かって（
to bottom）、グレー（#4B4B4B）から濃いグレー（#282828）になるよう設定しています。また、ページをスクロールしても移動しないように固定（fixed）しています。飾り枠の白い部分がまぶしく見えるので、暗めの色合いに変更します。
飾り枠は
blockというクラス名であらかじめデザインされているので、blockクラスの設定を追記します。/* 飾り枠のデザイン修正 */
.block {
background-color: #5F5F5F;
}
実行例飾り枠の角を丸くします。
blockクラスに、border-radiusプロパティを追加して、角の丸みを表現します。/* 飾り枠のデザイン修正 */
.block {
background-color: #5F5F5F;
border-radius: 5px;
}リンクの文字が暗く沈んで見にくいので、色合いを変更します。ここでは白色に変更します。
/* リンク色の変更 */
a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:hover { color: #323232; background-color: #B0B0B0; }
a:active { color: #FFFF00; }
実行例見出しの部分がまぶしく見えるので、色合いを
colorとbackground-colorを使って変更します。さらにborder-radiusプロパティを追加して、角の丸みを表現します。見出しの部分は
popというクラス名であらかじめデザインされているので、popクラスにborder-radiusの設定を追加します。/* 見出しのデザイン修正 */
.pop {
color:#5F5F5F; /* ダークグレー */
background-color:#FFB429; /* オレンジイエロー */
border-radius: 5px;
}
実行例参考：別の色を塗る場合
別色のパターンも掲載しておきます。もし余裕があれば、他の色を試してみるのも良いでしょう。
パターンその2
/* 見出しのデザイン修正 */
.pop {
color:#226633; /* ダークグリーン */
background-color:#24C339; /* グリーン */
border-radius: 5px;
}パターンその3
/* 見出しのデザイン修正 */
.pop {
color:#6F5F4F; /* ダークブラウン */
background-color:#FF4B45; /* レッド*/
border-radius: 5px;
}スマートフォンなど、小型の端末でこのページを見ると、文字が小さくて操作しにくいと感じました。また、小さな画面では、ページの右端がはみ出してしまうことに気づきました。確認したい場合は、ブラウザのウインドウの横幅を狭くすると、はみ出す様子が確認できます。（実際にウインドウの横幅を縮めてみましょう）
そこで、画面が小さい端末で表示した場合は、操作しやすいよう、文字を少し大きくし、画面からはみ出さないように調整します（詳しくは下記「解説」コーナーにある「スマートフォンなどへの対応」を参考にしてください）。
以下の設定を追加しましょう。/* 640px以下の解像度を持つ端末用の設定 */ @media screen and (max-width: 640px) { body { margin:0px; padding:0px; font-size: 1em; } .block { margin:4px; padding:4px; width:auto; } }画面幅が
640px以下の場合は、文章全体のマージンとパディングをゼロにし、文字のサイズを少し大きめ1emにしています。
また、枠blockクラス については、マージンとパディングを狭め4pxにし、枠幅を自動width:auto;にすることで、画面からはみ出さないようにしています。ブラウザウインドウの横幅を、再び狭くすると、文字が少し大きくなり、画面からはみ出さなくなった様子が確認できます。
以上でデザインの修正は完了です。後から設定を追加して、最初と全く異なるデザインとなりました。