レスポンシブデザインを作るコツ。プログラミング独学の軌跡プログラミング独学の軌跡ド素人がプログラミングを独学していく記録です。未解決テックアカデミーが初心者向け副業コースを始めました。テックアカデミーで無料メンター相談ができる。CSS初心者が稼ぐならココナラがおすすめ。クラウドワークスは難しい。レスポンシブデザインを作るコツ。2020.06.20現在レスポンシブデザインの勉強中です。そんな中わかってきた、レスポンシブデザインを作るコツを書いていきたいと思います。レスポンシブデザインは横幅可変を前提としたデザインを作るのが基本なので、最初から(pc画面から作るにしてもスマホ画面から作るにしても)widthは%、またはmax-width:〇〇pxで作ったほうがいい。%で作るので、box-sizing:border-boxの方がレイアウトを管理しやすい。リセットCSSの段階で「*(アスタリスク)」にbox-sizing:border-boxを指定しておいた方がいい。heightを指定すると、幅を狭めた時に中身のコンテンツがはみ出してしまうかもしれないので、基本指定しない。明るい外で見られる事が多いスマホに対して、PCは室内で見られる事が多いので、PC画面は文字色を真っ黒にするのではなく少し薄くしてあげる(#333333くらい)。赤枠はcontainer(コンテンツ幅)です。ヘッダーとフッターは背景画像が横幅いっぱいに広がるのでwidth:100%、ただしわざわざ指定しなくても幅100%に広がるので、widthは指定しません。autoで真ん中寄せにします。(場合によってはtext-align:centerなども)。これで画面幅をせばめてみると...このようにうまくいきました。スマホ画面で文字が横幅いっぱいに広がっていると読みづらいので、containerに左右のpaddingを10~20px指定します。このように読みやすくなります。(ただし、containerはbox-sizing:contents-boxにしとく。しないとPC画面にも左右のpaddingが付いてしまう。)目次スマホ画面から作っていくのが主流。レスポンシブデザインにおすすめの本。スマホ画面から作っていくのが主流。今は「モバイルファースト」といって、先にスマホ画面→タブレット画面→pc画面の順に作っていくのが主流らしいです。対してpc画面から先に作っていくのは「デスクトップファースト」と言います。レスポンシブデザインにおすすめの本。(初版も持っているのですが、第2版も買っちゃいました)後半に実際サイトを作っていく解説があるのですが、かなり有益な事が書いてあります。最初はちょっと難しいかもしれませんが、噛めば噛むほど味が出るように、読めば読むほど「なるほど」と思わせてくれます。リンク以上、レスポンシブデザインを作るコツでした。模写コーディングシェアするTwitterFacebookはてブPocketLINEコピーハルトをフォローするハルトプログラミング独学の軌跡ISARA[イサラ]の模写コーディング完成!アコーディオンの実装。ISARAのレスポンシブデザインの模写を始めました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ホーム模写コーディングプロフィールプロフィール管理人のハルトです。