学園祭のWebページにCSSを追加して見やすくしました。完成したWebページを見てどう思いましたか？
すごく見やすくなったけど、なにか物足りないような気がします。
そうそう。どうせならかわいくしたいな。
CSSを変えるだけで雰囲気を変えられますよ。
かわいい感じのものとクールな感じの例を作成したので、次のリンクを見てみてください。
すごく、かわいくなった。これなら、友達も学園祭来たくなると思う。
なんか、すごくクールな感じがする。男向けって感じ。
それぞれで使用したCSSは次のとおりです。
かわいくしたときのCSS
/* 全体の背景とフォント */
body {
background-color: #fff0f5; /* ラベンダーピンク */
color: #030303;
}
/* セクションごとの余白と装飾 */
main {
width: 800px;
margin: 30px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 16px;
}
/* タイトル */
h1 {
background-color: #ffb6c1;
color: white;
text-align: center;
padding: 20px;
border-radius: 12px;
font-size: 28px;
}
/* セクション見出し */
h2 {
color: #d35f9c;
border-left: 6px solid #f8b5d2;
padding-left: 10px;
margin-top: 30px;
font-size: 22px;
}
/* 段落 */
p {
line-height: 1.8; /* 1行の高さを調整 */
margin-bottom: 12px;
}
/* リスト */
ul {
background-color: #fff7fb;
border: 1px dashed #f3b3d2;
padding: 15px 20px;
border-radius: 10px;
}
ul li {
margin-bottom: 8px;
list-style: "🌸 ";
}
/* リンク */
a {
color: #d35f9c;
}
/* リンクにマウスが移動した時 */
a:hover {
color: #b03d80;
}
このかわいいイメージにしたCSSのポイントは次のとおりです。
・Webページ全体を白とピンクを基調に背景色を設定している
Webページ全体の設定はセレクタ「body」(bodyタグ)に対して行います。
・四角の角を丸くしている
mainタグ、h1タグ、ulタグに背景色を設定し角を丸くしています。
・リストに花柄マークを使用している
リストのマークの変更は、セレクタ「li」に対して、次のプロパティと値で行っています。
list-style: "🌸 ";
※プロパティ「list-style」は箇条書きの先頭に表示されるマークを指定するときに使用します。
クールな感じにするCSS
/* 全体のベース設定 */
body {
background-color: #1a1a1a; /* ダークグレー */
color: #e0e0e0;
}
/* メインエリア */
main {
width: 900px;
margin: 40px auto;
padding: 30px;
background-color: #2b2b2b;
border-radius: 8px;
}
/* タイトル */
h1 {
background-color: #0a84ff; /* ブルー系アクセント */
color: #ffffff;
text-align: center;
padding: 25px 10px;
border-radius: 4px;
}
/* セクション見出し */
h2 {
color: #0a84ff;
border-left: 6px solid #0a84ff;
padding-left: 12px;
font-size: 22px;
margin-top: 40px;
}
/* 段落 */
p {
line-height: 1.7;
font-size: 16px;
margin-bottom: 15px;
}
/* リスト */
ul {
padding-left: 20px;
border-left: 3px solid #555;
margin: 15px 0;
}
li {
margin-bottom: 10px;
list-style: "▶ ";
font-weight: 500;
}
/* リンク */
a {
color: #0a84ff;
}
a:hover {
color: #66aaff;
}
クールなイメージにしたCSSのポイントは次のとおりです。
・Webページ全体をグレーと青を基調に背景色を設定している
Webページ全体の設定はセレクタ「body」(bodyタグ)に対して行います。
・角の丸みを少なくする
角も丸みを少なくすることでシャープさを出しています。
・リストに▶マークを使用している
リストのマークの変更は、セレクタ「li」に対して、次のプロパティと値で行っています。
list-style: "▶ ";
※プロパティ「list-style」は箇条書きの先頭に表示されるマークを指定するときに使用します。
色を変えるだけでも印象は大きく変わります。
例では、背景色や文字色などの変更を中心に、「かわいいイメージ」や「クールなイメージ」のWebページを作りました。また、角を丸くしたりするだけでも、雰囲気は変わります。
これから、学園祭のWebページにたいして、それぞれが思う「かわいい」や「かっこいい」などのイメージを決めて、CSSを変更してWebページをイメージ通りに修正しましょう。
同じ「かわいい」や「クール」であっても、それぞれイメージが違うと思います。思ったイメージで、背景色や文字色等を決めて変更しましょう。
どのようなイメージでどのようにCSSを変更したか変更したCSSファイル(style.css)を提出してください。
