画面幅に応じてCSSを適応させる
はじめに
私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。
MacBook(画面幅が1440px)では、このように表示されているページが
ipad(画面幅が768px)で見てみると、レイアウトが崩れてしまいます。
iPhone(画面幅が375px)の場合も同様です。
レスポンシブデザインを行えば、それぞれのデバイス(スマホ・タブレット・PC)に最適化された表示をすることができます。
準備をする
まずは、HTMLのheadタグ内に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この記述をします。
次に、スマホ用とタブレット用のCSSファイルを作成して、headタグ内で読み込ませます。
<link rel="stylesheet" href="sp-responsive.css"> <link rel="stylesheet" href="tb-responsive.css">
通常のCSSファイルに記述することも出来ますが、分けたほうが管理がしやすいと思います。
タブレットの画面幅
タブレットの横幅は、iPadの場合768pxです。
ipad Proの場合は、1024pxです。
(Google の検証ツールを参照しました)
よって、タブレット向けのCSSは1030px以下の場合に適応されるようにします。
tb-responsive.css
@media (max-width: 1030px) {
}この中にCSSを書くことで、画面幅が1030px以下の場合に適応されます。
例えば、Workspaceという文字を赤色にしたい時
Workspaceという文字は、main-top__titleの中のh1なので
index.html
<div class="main-top__title">
<h1>Workspace</h1>
<p>カフェ・コワーキングスペース・オープンスペース・・・</p>
<p>集中できる場所を探そう！</p>
</div>このように記述すると
style.css
@media (max-width: 1030px) {
.main-top__title h1{
color: red;
}
}赤色に変化します。
スマホの画面幅
スマホの画面幅は、iPhone6/7/8の場合375pxです。
iphone6/7/8 Plusの場合は、414pxです。
よって、スマホ向けのCSSは450px以下の場合に適応されるようにします。
sp-responsive.css
@media(max-width: 450px) {
}現在の画面
画面を最大まで右にスクロールさせると
こうなります。
画面幅から、要素がはみ出ていることが分かります。
この記事では、右上の「オーナーはこちら」をスマホの画面幅に収めたいと思います。
index.html
<div id="owner">オーナーはこちら</div>
style.css
#owner {
position: absolute;
top: 0;
right: -180px;
background-color: #DAF0E0;
padding: 21px 30px;
color: #009872;
height: 20px;
cursor: pointer;
}現在、画面の一番右上を基準として、さらに180pxだけ右の位置に固定されています。
これを次のように変更します。
sp-responsive.css
#owner {
position: absolute;
top: 0;
left: 0;
background-color: #DAF0E0;
padding: 21px 30px;
color: #009872;
height: 20px;
cursor: pointer;
}左から0の位置に固定しました。
するとこうなります。
おわりに
position: absolute;で位置指定をした要素は、画面幅が狭まるとはみ出してしまう恐れがあるため、注意が必要です。
今回は、下の方の要素でもposition: absolute;を多用していたため、スマホの画面幅からはみ出ている状態となっています。
今後は、これを修正していくつもりです。
