勉強の続き：レストランサイトのCSSを書く（モバイル）

ついに最終章！レストランサイトのCSSを書きます。前回はPCサイトから作り、画面サイズが小さくなった時のメディアクエリを後から追加しましたが、今回はモバイルバージョンから先に作るんですって。

教科書はこれです。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ] 価格：2,420円（税込、送料無料) (2024/11/5時点) 楽天で購入

セクション1 複数ページのサイトを作成する時のポイント
　全体のデザインを確認しよう
セクション2 TOPページをコーディングしよう
　HTMLファイルを確認しよう
　作業ファイルを確認しよう
　CSSを書く前の状態を確認しよう
　共通のフォント設定をしよう
　画像のはみ出しを修正しよう

今日はここまで。

全体のデザインを確認しよう、というのは、複数ページの中で共通となる部分を確認しておき、すべてのページを一から全部作るのではなくて、一つのページができたらそのファイルを複製してファイル名を変えることで、効率の良い作り方をしましょう、ということでした。

同じサイト内の別のページなら、共通パーツがある方が統一感があるし、訪問する方も迷子になりにくいですよね。
またファイル構成も始めに考えておいた方が良い、ということも。ああ、これ分かる…。いにしえの趣味のサイトを作っていた時の記憶がうごめく…。フォルダめっちゃ増えるしどこいったかすぐわからなくなる。趣味では「まいっか」で済むけど、仕事じゃあそうはいかない。

私ついついざっくり決めたら作り始めてしまうので、それが良くないんだろうな。

さていよいよコーディングを始めます。まずはTOPから。

学んだことをメモ的に書いておきます。

max-width:100% と width:100%

max-width:100% は、画面に対して最大幅を設定するプロパティで、
width:100% は、親要素に対して最大幅を設定するプロパティ。

今回、PC用ではなくモバイル用のサイトなので、小さめの、そしていろんなサイズの画面で表示されることを想定しているので、画面に対しての最大幅を設定した方が効率的だということのようです。

なるほど、そういう細かい気配りが大事なんですねえ…。

これって、PC用のCSSでもmax-widthで指定するのでもいいのかな。それだと画像が大きすぎる場合に、width:100% を使用するのかな。この辺は調整しながら覚えていけばいいのかしら…。

そしてFammからお返事が来ました。私が作ったのはページデザインではなくアプリのデザインだったようです…。

そ、そうかも…！

もー基本が分かってないんだから〜！情けない…。

でもアプリデザインとして採用？してくださるようです。これはナポリタンを検索した後の画面なので、TOPページのデザインを提案して欲しいと言っていただけました。本当にお手数おかけしてすみません…。明日からTOPページのデザインをしていきたいと思います。