動画で練習１２
参考ブログ
初心者でもわかるHTML&CSS講座 イタリアンレストランホームページを作る | Inoma Createｋ
※ブログ内に練習用のデータあり
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
スマホ用のレイアウト調整
- htmlに<meta>要素を入れる
html
↑html内の<head>タグ内に入れる
- <meta name="viewport" content="width=device-width, initial-scale=1.0">←設定しないとスマホ画面で縮小した状態になってしまう
- スマホ用のCSSに装飾する場合<media>を使う
- 今まで入力していたcssの下に入力する
- @media only screen and (max-width:680px)←ブラウザーの横幅が680pxの時だけ適用される
グーグルチャーム
↑設定でスマホ表示にする。レイアウトが崩れているのでスマホ様に修正します。
↑スマホ様にサイズを記載
グーグルチャーム
↑成功、電話番号やメニュー画面がスマホ様に変更されました。
コンセプト画像の変更
↑スマホサイズに画像の変更
↑画像の変更ができました。
concept
↑「concept」を修正
↑コンセプト画像と文字を整える事ができました。
※続きます。
