1カラムのレスポンシブデザインページ。
※HTMLのheadタグ内にレスポンシブ対応のmetaタグを記述
<meta name="viewport" content="width=device-width, initial-scale=1">
※<head>内のタイトルは忘れずに書き換えましょう。タイトルは自由につけてください。
<title>夏休み旅行</title>
HTML
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>夏休み旅行</title>
01 bodyのCSS
bodyのスタイルシートを自由に設定
例1）background-color:○○○;
例2）background-image:url("○○○.png");
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
}
02 コンテナーを作る
WEBページをまとめるための「コンテナー」を設定
センターへ配置、横幅900px
CSS
.container {
margin: 0 auto;
max-width: 900px;
}
HTML
<body>
<div class="container">
</div>
</body>
03 ヘッダー、メイン、フッターを設定
background-colorは自由に変更してください。
CSS
header {
padding: 20px;
background-color: #ec6800;
}
main {
padding: 20px;
background-color: #fff;
}
footer {
padding: 10px;
background-color: #ffa500;
text-align: center;
}
HTML
<body>
<div class="container">
<header>
</header>
<main>
</main>
<footer>
</footer>
</div>
</body>
04 headerへ<h1>を入れる
CSSへ「h1」のカラーなどを設定する
HTML「header」へ<h1>～</h1>のマークアップ
CSS
h1{
color:#fff;
text-align: center;
}
HTML
<header>
<h1>Summer vacation</h1>
</header>
05 mainへ<h2>を入れる
CSSへ「h2」のデザインを設定する
※見出し（Heading）デザインのページを参考
HTML「main」へ<h2>～</h2>のマークアップ
CSS
h2 {
padding: 15px;
border-bottom: 4px dotted #00a3af;
color:#00a3af;
}
HTML
<main>
<h2>夏休み旅行おすすめビーチ</h2>
</main>
06 画像をダウンロードする
pixabayページより写真をダウンロード／サイズは640pxを選んでください
ダウンロードした画像はファイル名が長いので「ph1.jpg」のように短くして自分のフォルダーへ入れます。
07 htmlへ「ph1.jpg」画像を挿入する
画像がスマホにも対応、全部表示されるように設定しよう
alt=" "にも説明を入れましょう。 （alt="旅行 "）
CSS
img{
max-width:100%;
height:auto;
}
HTML
<main>
<h2>夏休み旅行おすすめビーチ</h2>
<p><img src="img/ph1.jpg" alt="旅行"></p>
08 画像をセンター揃えにする
スタイルシートへセンター揃えのCSSを作成します。
CSS
.naka{
text-align: center;
}
HTML
<main>
<h2>夏休み旅行おすすめビーチ</h2>
<p class="naka"><img src="img/ph1.jpg" alt="旅行"></p>
09 画像の下に「P」タグを使ってテキストを入れてみよう
<p>～</p>
テキストは自由に入れてください。
サンプルテキストはセンター揃えのCSSを指定しています。
HTML
<main>
<h2>夏休み旅行おすすめビーチ</h2>
<p class="naka"><img src="img/ph1.jpg" alt="旅行"></p>
<br>
<p class="naka">
夏と言えばやっぱり海！<br>
日本は海に囲まれた島国だからこそ、絶景が楽しめるビーチがたくさんあります。<br>
青い空、白い砂浜、透き通った海、そんな日本全国の絶景ビーチをたくさんご紹介します！<br>
是非この夏行きたい絶景ビーチを見つけてください。</p>
10 ボックスを作ろう
CSSへ「.box」というクラス名でボックスの設定をする
HTMLの</main>の上に
<div class="box">～</div>を入れる
CSS
.box{
padding: 20px;
margin: 20px;
border:2px solid #00a3af;
border-radius: 15px;
}
HTML
<div class="box">
</div>
</main>
11 ボックスの中に<p>タグを使って画像を入れる
ここで使用している画像は300×200pxのサイズ
ダウンロードした画像は同じぐらいのサイズにしましょう
HTML
<div class="box">
<p><img src="img/akita.jpg" alt="あきた"><br>秋田県</p>
<p><img src="img/chiba.jpg" alt="ちば"><br>千葉県</p>
<p><img src="img/shizuoka.jpg" alt="しずおか"><br>静岡県</p>
<p><img src="img/okinawa.jpg" alt="おきなわ"><br>沖縄県</p>
</div>
12 ボックスの内容を横並びにする
CSSへ「.box」の設定を追加する／display: flex;
CSS
.box{
padding: 20px;
margin: 20px;
border:2px solid #00a3af;
border-radius: 15px;
display: flex;
}
13 ボックスからはみ出した画像を全部表示させる
CSSへ「.box」の設定を追加する／flex-wrap:wrap;
CSS
.box{
padding: 20px;
margin: 20px;
border:2px solid #00a3af;
border-radius: 15px;
display: flex;
flex-wrap:wrap;
}
14 画像の並びを指定する
CSSへ「.box」の設定を追加する／justify-content: space-around;
その他の並び
CSS
.box{
padding: 20px;
margin: 20px;
border:2px solid #00a3af;
border-radius: 15px;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
}
15 footerへもテキストを入れる
©のコードは「©」
HTML
<footer>
©Summer vacation
</footer>
16 画像に影をつけてみよう
画像に影を付ける場合は「box-shadow」を使用。
クラス名を<img>の中にコードを書き加える時は半角スペースを入れてください。
ここでは影を付けて、画像の角を丸くした場合のCSSです
CSS
.kage {
box-shadow: 3px 3px 10px gray;
border-radius: 15px;
}
HTML
<div class="box">
<p><img src="img/akita.jpg" alt="あきた" class="kage"><br>秋田県</p>
<p><img src="img/chiba.jpg" alt="ちば" class="kage"><br>千葉県</p>
<p><img src="img/shizuoka.jpg" alt="しずおか" class="kage"><br>静岡県</p>
<p><img src="img/okinawa.jpg" alt="おきなわ" class="kage"><br>沖縄県</p>
</div>