２カラムのレスポンシブデザインページ。
今回は画像のリサイズといくつかのCSSを学習します。
01 レイアウトの確認
Brackets起動 ➡ ファイル ➡ フォルダーを開く ➡ 05ice-creamを選択
index.htmlを選び、プレビューしてレイアウトの確認をしましょう。
続いてicecream.cssを選び.container、header、footer、.parent、.side、mainの設定を確認
(h1、p、headerなど)を指定していましたが、別なCSSを適用したい場合があります。
そのような場合、HTMLのid属性とclass属性を利用します。
IDとCLASS
CSSはHTMLの「どこの部分の」「なにを」「どんな値にするか」を書式に従い書きますが、セレクタとしてid属性とclass属性の属性値(名前)を指定できます。
id属性（#)
同じWebページ内でid属性の値が重複してはならない
class属性 (.)
同じWebページ内で同じclass属性の値を何度でも用いることができる
02 見出しのデザイン<h1>～<h3>
各見出し<h1>～<h3>のデザインをします。
デザインの変更をしてもかまいせん。
CSS
h1 {
color:#ff1493;
font-size: 35px;
}
h2 {
margin-top: 20px;
padding-bottom: 5px;
border-bottom: 2px solid #38a1db;
color:#38a1db;
}
h3 {
padding: 2px;
background-color: darkturquoise;
border-radius: 10px;
color:#fff;
text-align: center;
}
03 見出し<h1>の一部テキストカラーを変更する
< div >/< span >とは？
タグ自体にはなんの意味もなくグループ化する時に使います。
<div> ～ </div>で囲ったところ全部
<span>～</span>は文字範囲のみ
ここではh1の「shop」文字だけを青色にするため<span>を使います。
CSS
.aoiro{
color:#38a1db;
}
HTML
<h1>Ice cream<span class="aoiro">Shop</span></h1>
04 <h1>に画像を入れる
imgフォルダーの「icon.png」画像を「h1」に入れてみよう。
HTML
<h1>Ice cream <img src="img/icon.png" alt=""><span class="aoiro">Shop</span></h1>
05 画像のリサイズ
AdobeのPhotoshop を使えない環境にある場合に使用していきます。
画像の切り抜き headerへ入れる背景画像を作る
フォルダー内に「 head.jpg 」（size:1280×853）が入っています。
この画像をリサイズしてheader内に背景画像（background-image）として使います。
.containerの幅が900pxなので、W=900px、H=200pxに切り抜きます。
❶head.jpg画像を右クリックして
プログラムから開く → ペイントを選んで画像を表示させます。
画面が大きすぎるので右下にある⊝を押して50%表示にします。
❷900×200pxの横長のサイズに変更したいので
❸四角形でこのように囲います
❹トリミングをクリックして切り抜きます
❺画像がトリミングされました。
次にサイズの変更をします。サイズ変更アイコンをクリックしてください。
❻サイズの変更をします
・ピクセルを選らぶ
・縦横比のチェックをはずす
・サイズを 900 × 200ピクセル
❼保存します
ファイル → 名前を付けて保存 → JPEG画像
自分のフォルダー（番号を確認）を選んで、「05ice-cream」→ 「img」
ファイル名は「head-bg.jpg」にしてください。
画像のサイズ変更
❶メインに使用している画像を「photo1.jpg」（640×427)のサイズを横幅 600px に変更します。
❷「photo1.jpg」を右クリックしてペイントで開きます。
❸サイズの変更をします。
❹保存をします。
ファイル → 名前を付けて保存 → JPEG画像
自分のフォルダー（番号を確認）を選んで、「05ice-cream」→ 「img」
ファイル名は「ph1.jpg」にしてください。
他の画像もサイズ変更する
❶「photo2.jpg」（640×427)のサイズを横幅 250px に変更します。ファイル名は「ph2.jpg」
❷「photo3.jpg」（640×407)のサイズを横幅 190px に変更します。ファイル名は「ph3.jpg」
❸「ph2.jpg」「ph3.jpg」を05icecreamの「img」フォルダーへ保存します。
imgフォルダー内を確認
imgフォルダーへリサイズした画像が全部入っているか確認してください。
確認が出来たらimgフォルダーの外にある写真は削除(Delete)してください。
imgフォルダーの画像を圧縮
こちらのサイトで画質を維持しながらファイルサイズを小さくしてくれます。
これから作る作品の画像はすべてこれを利用してください。
06 headerにCSSで背景画像を設定する
CSS
header {
padding: 20px;
background-color: #faf0e6;
background-image: url("../img/head-bg.jpg");
}
07 htmlへ「ph1.jpg」画像を挿入する
alt=" "にも説明を入れましょう。 （alt="アイスクリーム "）
HTML
<main>
<p><img src="img/ph1.jpg" alt=""></p>
<p>アイスクリームには、いろいろな風味があります。その風味を作るため、チョコレート、ストロベリー、コーヒー、ナッツ、レーズンなど、さまざまな種類の原料が使われています。</p>
08 htmlへ「ph2.jpg」画像を挿入する
HTML
<h2>アイスクリームの歴史</h2>
<p><img src="img/ph2.jpg" alt="">古代のアイスクリームは、今のシャーベットのようなもので、お菓子としてではなく疲れた体を元気にする「健康食品」として利用されていました。</p>
09 画像に回り込みCSSを設定する
画像が浮いてしまっているので、文字を回り込みさせます。
CSSへはすでに「migi」、「hidari」で設定済みなので、ここではclass名を入れます。
画像を左側に変更したい場合は「class="hidari"」と入れてください。
※詳しくは HTML基本とCSS ➡ コンテンツのレイアウト
HTML
<p><img src="img/ph2.jpg" alt="" class="migi">
10 サイドバーへ「ph3.jpg」画像を挿入
<div class="side">～</div>がサイドバーとなります
<p>ミント</p>の下へスペースを作り<br>
その下へ画像を入れましょう
HTML
<div class="side">
<h3>FLAVOR</h3>
<p>バニラ</p>
<p>チョコレート</p>
<p>ストロベリー</p>
<p>キャラメル</p>
<p>ラムレーズン</p>
<p>ミント</p>
<br>
<p><img src="img/ph3.jpg" alt="アイスクリーム1"></p>
</div>
11 サイドバーのテキストをListにする
HTML
<ul>
<li>バニラ</li>
<li>チョコレート</li>
<li>ストロベリー</li>
<li>キャラメル</li>
<li>ラムレーズン</li>
<li>ミント</li>
</ul>
12 リストをCSSでデザイン
CSS
ul{
padding-left: 0px;
}
li{
border-bottom: dashed 1px darkturquoise;
line-height: 2.5;
list-style-position: inside;
list-style-type: none;
padding:0 10px;
color: #20b2aa;
font-weight: bold;
}