-本日のアジェンダ-
1限目
実技 スマートフォンサイト作成実習①
スマホラフについて
2限目
実技 スマートフォンサイト作成実習①
Retinaディスプレイについて
3限目
実技 スマートフォンサイト作成実習①
課題制作
4限目
実技 スマートフォンサイト作成実習①
課題制作
5限目
実技 スマートフォンサイト作成実習①
課題制作
本日のテーマ
スマホ対応しましょう
オリジナルサイトをレスポンシブにする手順
①viewportをheadに記述
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">②可能な限り幅を%かvwで指定しましょう。
例）サイト幅 width:960px; → max-width:960px;
横並びのmainとasideの幅を70%と25%に指定
③CSS内にメディアクエリを記述
下記の場合は、ブレイクポイントを800pxとしました。
画面幅が800px以下の時、headerの中の子要素(h1とul)が縦並びになります。
#header-wrap header {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 800px) {
#header-wrap header {
flex-direction: column;
}
}新たなプロパティを記述 → スタイルが追加されます。
同じプロパティを記述 →スタイルが上書きされます。
プロパティを記述しない →スタイルが継承されます。
マルチデバイス問題
【問題その１】画面幅1200px未満の時スクロールバーが出ない、かつ幅80%となるようにしてください。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>クイズその１</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background: #cccccc;
width: 1200px;
margin: 0 auto;
padding: 15px;
}
</style>
</head>
<body>
<main> このエリアはメインです。<br>
幅1200pxに指定しています。<br>
このままだと画面幅が1200px(厳密には1200px＋スクロールバー20px)未満の時
スクロールバーが出てしまいます。<br><br>
画面幅1200px未満の時スクロールバーが出ない、かつ幅80%となるようにしてください。<br>
だだし、メディアクエリを使わずに指定してください。<br>
ヒント:max-
</main>
</body>
</html>▼答えのcss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background: #cccccc;
max-width: 1200px;
width: 80%;
margin: 0 auto;
padding: 15px;
}【問題その２】画面幅960px以下の時、3列×2になるようにしてください。
さらに560px以下の時、横いっぱいの縦並びになるようにしてください。
@mediaを２つ書きます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>クイズその2</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 30px 0;
}
ul {
overflow: hidden;
list-style: none;
width: 960px;
margin: 0 auto;
}
ul li {
float: left;
width: 14.666%;
margin: 0 1% 2%;
padding: 10px 0;
background: #cccccc;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<p>下記のリストはfloatで横並びになっています。<br>
画面幅960px以下の時、3列×2になるようにしてください。<br>
【ヒント1】max-指定。liの幅の再指定。<br>
さらに560px以下の時、横いっぱいの縦並びになるようにしてください。<br>
【ヒント2】liの幅の再指定。左右の余白を0に。 </p>
<ul>
<li>ナビゲーション1</li>
<li>ナビゲーション2</li>
<li>ナビゲーション3</li>
<li>ナビゲーション4</li>
<li>ナビゲーション5</li>
<li>ナビゲーション6</li>
</ul>
</body>
</html>▼答えのcss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 30px 0;
}
ul {
overflow: hidden;
list-style: none;
max-width: 960px;
margin: 0 auto;
}
ul li {
float: left;
width: 14.666%;
margin: 0 1% 2%;
padding: 10px 0;
background: #cccccc;
text-align: center;
border-radius: 10px;
}
@media (max-width: 960px) {
ul li {
width: 31.333%;
}
}
@media (max-width: 560px) {
ul li {
width: 100%;
margin: 0 0 2%;
}
}
}各デバイスの画面サイズ
| 端末 | ポイント | Retina | ピクセル |
| iPhone X iPhone XS iPhone 11 Pro | 375×812 | 3 | 1125×2436 |
| iPhone XR iPhone 11 | 414×896 | 2 | 828×1792 |
| iPhone 12 iPhone 12 Pro | 390×844 | 3 | 1170×2532 |
| iPhone XS Max iPhone 11 Pro Max | 414×896 | 3 | 1242×2688 |
| iPhone 12 Pro Max | 428×926 | 3 | 1284×2778 |
Photoshopの画像の書き出し（retina）
スマホラフの2倍で画像を書き出しましょう！この時、スマートオブジェクト化していないとボケてしまいます。
※最新機種を考えると３倍としたいところですが、表示スピードなど加味すると現段階では２倍でOKとします。