floatまたはflex boxを使うか
どちらでもいい
float おさらい
1.要素は基本的に縦に積まれる
そういう要素をブロックレベル要素という
2.これを横並びにしたいときの方法が2つ3つ
1. float
2. flex box
3. display inline box
floatをかけるとルールから浮く
float.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>float</title>
<link rel="stylesheet" href="float.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>float</h1>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<p>aaaaaaaaaaaaaaaaaaaaaa</p>
<!--
<script src="float.js"></script>
-->
</body>
</html>
float.css
@charset="UTF-8";
body{
background: #FFc;
}
ul{
background-color: #ccc;
}
ul li{
float: left;/*floatは横並びにしたいもの自身にかける*/
}
floatは親要素に対しても影響がある
ulの中のliが飛び出てルールから外れた
ulは便宜上、中がからっぽになってしまった
→高さが0になる
これではまずい。ほかにも影響が出る
方法1.親要素にオーバーフロウヒドゥンをつける
overflow: hidden;/*ulが高さを取り戻す*/
方法2.floatの最後の要素にclear:bothをいれる
ul li{
float: left;/*floatは横並びにしたいもの自身にかける*/
}
li:last-child{/*liの末っ子の弟に対して*/
clear:both;
float:none;
}
教科書p192も参照のこと
metaタグでビューポート(viewport)というのがある
表示領域の意味
>例えば、デスクトップ環境（PCなど）のブラウザなどでは、
ブラウザウインドウの表示領域がviewportになります
表示のされ方は、制作者がmeta要素のviewportで指定することができます。
このmeta要素でのviewport指定をどのようにすればいいのかを解説していきます。
参考
これも読んでおくこと
レスポンシブデザイン
pcのときはこの見え方に、スマホの時はこの見え方、タブレットの時は、というのが主流
そういう時はmetaタグでビューポートを使う
デバイスの横幅を取得し
それによってもろもろ変えてくれる
教科書p150
htmlは全く一緒
cssを切り替える
ブレイクポイントを設定する（横幅が何pxのとき変えてくださいね）
新しい機種がでるたびにブレイクポイントは変わるらしい
年1ぐらいでチェックするといいらしい
>ブレークポイントの決め方
ブレークポイントは、デバイスクラスを基準に設定しないでください。現在使用されている特定のデバイス、製品、ブランド名、オペレーティング システムを基準にブレークポイントを設定すると、メンテナンスが非常に大変になる可能性があります。代わりにコンテンツ内容に基づいて、コンテナに合ったレイアウト方法を決定するようにしてください。
特定のデバイス、製品、ブランドではなく、コンテンツ内容に基づいてブレークポイントを作成します。
まず、サイズが最小のモバイル端末向けにデザインします。その後、使用できる画面領域の増加に合わせて段階的にエクスペリエンスを拡張します。
一行に表示する文字数は最大で 70～80 文字程度にします。
まず小さな画面にコンテンツが収まるようにデザインし、そのうえで、ブレークポイントが必要となるまで画面を広げていきます。 こうすることで、コンテンツに基づいて最適なブレークポイントを設定し、その数を最小限に抑えることができます。
>次に、要素間の余白が空きすぎて天気予報の見た目が悪くなるまで、ブラウザのサイズを大きくします。 やや主観的な判断になりますが、横幅が 600px を超えると余白は明らかに広すぎます。
600px にブレークポイントを設定するには、2 つのスタイルシートを新たに追加します。1 つはブラウザの幅が 600px 以下の場合に、もう 1 つは幅が 600px より広い場合に使用します。
<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">
こんなふうらしい
https://developers.google.com/web/fundamentals/design-and-ux/responsive
