前回に引き続き、猫カフェトップページを、PC用のCSSを使ってスマートフォン用のデザインに修正します。
Contents
スマートフォン用CSSファイルのレイアウトを編集
まずは、画面サイズが違うのでボックスのサイズから修正していましたが、1カラムレイアウトになるように、ここから調整していきます。
お知らせを1カラムに変更
Flexコンテナのflex-flow:columnに変更するか、Flexアイテムのwidth:100%に変更するか悩むところですが、ここではサイズを変更することを優先にしています。
スマートフォンのデザインだけ見て作成していると、1カラムになっているのでflexを使うことを考えていないかもしれませんね。
#cont-5 dl div{
width: 100%;
display: grid;
grid-template-rows: 40px auto;
grid-template-columns: 1fr 142px;
column-gap: 20px;
border-bottom: 1px dashed rgb(180,180,180);
padding-bottom: 10px;
margin-bottom: 30px;
}スマートフォン用CSSファイルのデザインを編集
ヘッダーのレイアウトとデザインを作成
ロゴをブロークングリッドで作ってしまったので、positionを使いましたが、positionを使わずヘッダー内にキレイに収めたデザインにしてもいいですね。
/* ヘッダー */
header{
background-color: rgb(210,180,175);
/* padding-top: 10px; */
/* display:grid;
grid-template-columns: 1fr 150px 1fr;
grid-template-rows: 1fr 1fr 1fr; */
/* position: sticky;
top: 0; */
box-shadow: 0px 1px 5px rgba(0,0,0,0.45);
position: absolute;
}
header>p{
/* z-index: 10;
grid-area: 1 / 2 / 3 / 3; */
width: 40vw;
margin: auto;
position: relative;
top: 7.6vw;
}
/* ナビゲーション */
nav{
display: none;
/* background-color: rgb(255,255,255);
padding-top: 30px;
grid-area: 2 / 1 / 4 / 4; */
}
navを非表示にしているので、他のプロパティは無効になりますが、一応コメントアウトで削除する準備をしています。
キービジュアルとキャッチコピーの調整
h1の高さと文字のサイズを調整します
/* キービジュアル・キャッチ */
h1{
background-image: url(../images/bg_h1.jpg);
background-size: cover;
background-position: center;
background-attachment:fixed;
text-align: right;
font-size: 5vmin;
font-weight: bold;
padding: 80vh 5% 10vh 0;
height: 100vh;
color: rgb(255,255,255);
line-height: 140%;
text-shadow: 0px 0px 3px rgba(0,0,0,0.75);
}文字サイズの単位「vmin」や「vmax」は、モバイルデバイスの画面を縦横どちらで見ても、同じ大きさにできるので便利です。
「vh」や「vw」もモバイルデバイスでのデザインで、よく使用します。