みなさんこんにちは！
今日は CSS（シーエスエス） を使ってWebサイトのデザインを変更してみます。
昨日はHTMLを編集して、タイトルや文章、メニューなどの内容を変更しました。今日は、Webサイトの 見た目（デザイン） を変更する体験をします。
Webサイトは主に次の２つの言語で作られています。
HTML
内容（文章・画像など）
CSS
見た目（色・レイアウトなど）
今日はCSSを編集して、サイトのデザインがどのように変わるのか体験してみましょう。
STEP1 CSSファイルを開く
まず昨日と同様にエディターを開き、今日は style.css というファイルを開きます。
このファイルには、Webサイトのデザインが書かれています。
早速ですが、例えば次のようなコードがあります。
body {
(省略)
background: #fafafa;
color: #333;
}このコードは、ページ全体のデザインを指定しています。
body というのはページの全体を囲んでいるタグです。
background は背景色
color は文字の色
上記のコードはbodyタグの背景色や文字の色を変更するためのコードになっています。
CSSは次のような作り方になっています。
どこのタグの、何を、どう変える
いまはCSSがこの３点セットで書かれている、ということだけ覚えておけばOKです。
実際のCSSは「何を」の部分がとても多く覚えるのが大変ですが、今日は簡単なものをいくつか変えてみましょう。
STEP2 背景の色を変えてみよう
まずページの背景色を変更してみます。
body の中にある background という項目を見てみましょう。
現在は次のようになっています。
background: #fafafa;これは 薄いグレーの背景色 です。
例えば次のように変更してみましょう。
background:#fff8f0;CSSファイルを保存してブラウザを更新すると、ページの背景色が変わります。
カラーコードとは
CSSでは色を カラーコード と呼ばれる文字で指定します。
#ffffff → 白
#000000 → 黒
#ff0000 → 赤
#00aa88 → 緑カラーコードはインターネットで検索するとたくさん見つかります。
Web色見本 – https://www.colordic.org
STEP3 ヘッダーの色を変えてみよう
次にページ上部のヘッダーの色を変更します。
ヘッダーとは主にページのタイトルやメニューがまとまった部分で、ヘッダーは各ページに共通して表示されるものです。
HTMLでは <header>〜</header> で囲まれた部分がヘッダーとなっています。
それではCSSで次のコードを探してください。
header {
background:#6b4f3b;
color:white;
（以下略）
}
この background の色を変更してみます。
background:#2c6e49;保存してページを更新すると、ヘッダーの色が変わります。
CSSの読み込み順
CSSは基本的に 上から順番に適用 されます。
同じ場所のスタイルを複数の箇所で書き換えると、後から書いたものが優先されます。
STEP4 ボタンの色を変更してみよう
次にボタンのデザインを変更します。
次のコードを探してください。
.button {
display: inline-block;
background: #6b4f3b;
color: white;
(以下略)
}.button が何なのかは一旦置いておいて、この background を変更してみます。
background:#d97706;このボタンはメニューのページに設置されているので、保存したあとブラウザでメニューのページを開いて確認してみましょう。
「トップに戻る」のボタンの色が変わっているはずです。
ボタンに設定されている背景色(background)を変えたことでボタンの色が変わった、という仕組みです。
ところで .button とは一体なんなのでしょうか？
HTMLの内容に名前をつける
.button のように ドットから始まる名前 はタグではなく「クラス」と呼ばれます。
HTMLの中でこのクラスを指定すると、そのデザインが適用されます。HTML側でタグに class=”button” と書いてあげることで、buttonというクラス（名前）をつけることができるのです。
<a href="menu.html" class="button">クラス（名前）をつけたらCSS側では ドット をつけて呼び出してあげることで、そのクラス（名前）の要素だけにデザインをつけることができるようになります。
たとえば同じ<p>タグでも別々のクラス（名前）をつけてあげれば、それぞれに違うデザインをつけることが可能、というわけです。
HTMLのタグにクラスをつけてみよう
ちょっとだけHTMLに戻ります。
昨日トップページのおすすめメニューの中に「メニューを見る」のリンクを作りましたね。
今はただの文字によるリンクですが、上記にならってクラス名をつけてあげることで、すでにbuttonというCSSがあるのでボタンのデザインに変化します。
次のように<a>タグにclass=”button”を追記してみましょう。
<p>
<a href="menu.html" class="button">メニューを見る</a>
</p>保存してブラウザで確認してみてください。リンクの文字がボタンのデザインに変化しているはずです。
STEP5 画像の角を丸くしてみよう
それでは次にトップページの上部にある大きな画像の形を変更してみます。
次のコードを探してください。
.main-visual img {
width: 100%;
border-radius: 10px;
}この border-radius は 角を丸くする プロパティです。
例えば次のように変更してみます。
border-radius: 30px;保存してページを更新すると、画像の角がより丸くなります。
もし次のようにすると
border-radius: 0;角が丸くなくなります。
CSSは実験してOK
CSSは変更しても、また元に戻すことができます。
いろいろな値を試してみると、どのようにデザインが変わるか理解しやすくなりますよ！
ちなみに、元に戻すショートカットキーは Ctrl + Z です。こちらもよく使いますので覚えておきましょう。
STEP6 文字の大きさを変えてみよう
メニューページにあるメニューの文字サイズを変更してみます。
次のコードを探してください。
.menu-list {
font-size: 18px;
}この font-size は 文字の大きさを決める プロパティです。
次のように変更してみましょう。
font-size: 24px;保存してページを更新すると、メニューの文字が大きくなります。
よく使うCSSプロパティ
- font-size → 文字の大きさ
- color → 文字の色
- background → 背景色
- padding → 余白
- border-radius → 角の丸み
これらはWeb制作でよく使われるCSSです。
応用STEP Googleマップをページに追加してみよう
最後にHTMLとCSSの両方を使ってお店の場所案内を作ってみましょう。
Webサイトでは、お店の場所を案内するために 地図（Googleマップ） を表示することがよくあります。
トップページにアクセスという見出しを作り、Googleマップの地図を埋め込んで表示してみましょう。
STEP1 Googleマップを開く
まずGoogleマップを開きます。
次に左上の検索ボックスにお店の場所を入力します。今回は下記の住所をコピーして貼り付けてください。
「大阪府和泉市はつが野3丁目37-5」
場所が表示されたら、次の操作を行います。
- 共有ボタンをクリック
- 「地図を埋め込む」をクリック
すると、Webサイトに貼り付けるためのコードが表示されます。
STEP2 埋め込みコードをコピーする
表示されているコードは Googleマップをページに表示するためのHTML です。
「HTMLをコピー」をクリックしてください。コードがまるごとコピーされます。
STEP3 HTMLに貼り付ける
エディターを開いて index.html を開きます。
おすすめメニューセクションの下に、<h2>タグを使って「アクセス」という見出しを追加します。
<section class="recommend">
<h2>おすすめメニュー</h2>
<ul>
<li>
<img src="recommend1.jpg" alt="カフェラテの写真">
<p>カフェラテ</p>
</li>
<li>
<img src="recommend2.jpg" alt="チーズケーキの写真">
<p>チーズケーキ</p>
</li>
</ul>
<p>
<a href="menu.html">メニューを見る</a>
</p>
</section>
↑ここまではすでに書いてあるコード↑
<h2>アクセス</h2>その下に、コピーしたコードを貼り付けます。
<h2>アクセス</h2>
<iframe src="https://www.google.com/maps/embed?..."></iframe>最後に見出しと地図の埋め込みコードを<section>というタグで囲んでおきましょう。
次のように書いてみてください。
<section>
<h2>アクセス</h2>
<iframe src="https://www.google.com/maps/embed?..."></iframe>
</section>
保存してブラウザでページを更新すると、見出しと地図が表示されます。
実際のWebサイトでも、お店の場所を案内するためにこの方法がよく使われています。
STEP4 地図の大きさを変える
次に CSSを使って地図の見た目を整える 体験をしてみましょう。
今のままだと地図の大きさがサイトの幅に合っておらずイマイチですね。大きさを変えるCSSを書いてもう少し大きくしてみましょう。
それでは style.css を開きます。
次のコードを追加してみましょう。
iframe {
width: 100%;
height: 300px;
}保存してブラウザを更新すると、地図のサイズが広がって表示されます。
width と height
width は 横幅 を指定するプロパティです。
width:100%;これは「画面の横幅いっぱいに表示する」という意味になります。
height は 縦幅 を指定するプロパティです。
height: 300px;これは「高さを300pxの大きさにする」という意味になります。
% や px などCSSではさまざまな単位が使われています。
STEP5 地図の角を丸くする
さらに地図のデザインを少し整えてみます。
次のコードを追加します。
iframe {
width: 100%;
height: 300px;
border-radius: 10px;
}保存してブラウザを更新すると、地図の角が少し丸くなります。これで地図もWebサイトのデザインに合いましたね。
今日のまとめ
今日はCSSを編集してWebサイトのデザイン変更を体験しました。
- 背景色の変更
- ヘッダーの色変更
- ボタンの色変更
- 画像の角丸変更
- 文字サイズの変更
- 地図の追加
HTMLは「内容」を作る言語、CSSは「見た目」を作る言語です。
この2つを組み合わせてWebサイトは作られています。
3日間の体験おつかれさまでした
この3日間では次の体験をしました。
１日目
Webサイトが
HTMLで作られていることを体験
２日目
HTMLを編集して
ページの内容を変更
３日目
CSSを編集して
ページのデザインを変更
これらは実際のWeb制作の仕事でも行われている作業です。Web制作の仕事に興味があれば、さらにスキルを身につけていくこともできます。
今回の体験が、みなさんのお仕事について考えるきっかけになれば嬉しいです。