2024/01/24 実技スマートフォンサイト作成実習

1限目：コーディングに向けて
2限目~5限目：課題制作

今日教わったこと

・デザインカンプがある意味本当の契約。その通り作ったらその通り作る。コーディング中にもっと良くなるポイントを見つけても直したら文句言われる。
・6割スマホで見てるからスマホでも見れるように作らなくてはいけない。
・「学科 CSS基礎⑥」が本当に大事なので必要に応じて動画見なおしたりとかしてね。

▼以下復習▼
・Googleはスマホ対応してないサイトは評価下がると明言してるので、Google公式のモバイルフレンドリーテストを使うのも1つの手
・これ↓を入れることでスマホでもPCと同じ表示で見れるが横スクロールじゃないと見れない問題が生まれる。
（入れないと縮小して全体が表示される）
＜meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
・スクロールさせないためには画面の幅に合わせてコンテンツを小さくしなくてはいけないので、「max-width」を使う
・「max-width」を使えば最大値を設定できて、小さいときは小さくしてくださいと指定できる
・横並びのコンテンツはpxではなく％で指定すれば一緒に小さくなってくれて横スクロール発生させない課題はクリアできる
・が、デザインが崩れるので「Media Querie」を使うことで、このサイズより小さくなったらこの記述を有効にしてくださいと指定できる。（下に記述することで点数は上になるので、このサイズより小さくなったらの指定ができる）
・「@media screen and （max-width: 760px) ※1{
main div.main-toy div {
width: calc(（100% – 20px) / 2);}※2」
→※1これより小さくなったら、ここをこうやって計算して表示してね
（これはそれによって4列設定が2列に表示できるようにしている）
・ブレイクポイントには流行があるので〇年最新版をググるといい
・タブレットビューは作ったり作んなかったり。頑張るなら作るでいいと思う
・が、メニューには適用されないのでそのまま縮小されてしまっててデザイン的によくないので、サイドバーを消してハンバーガーメニューになるようにする
・Retina ディスプレイ→apple製品の高精細ディスプレイ。srcset 属性で指定することによって閲覧側の端末がその仕様で読み込むようにできる。きれいな画像を見せたい時はこういうのも考慮する。
・FFFTPでは「portfolio」フォルダは絶対に触らない
▲CSSに取り掛かったら思い出す▲