レスポンシブ

ポートフォリオ用にご自分でデザイン、コーディングしているサイトのレスポンシブが難しい〜ということで、体験レッスンで来てくださったSさん。数ヶ月学校でwebデザインを勉強されて、そのあと独学、就職活動をしているとのことです。

ちなみにレスポンシブとは、PCで見てもスマホで見ても大丈夫なように表示させることです。

いろいろなやり方がありますが、Sさんはcssでブレイクポイントを768pxに設定して、画面サイズに適したcssを上書きで読み込ませる、という書き方です。

一見ちゃんとできてるっぽいのですが・・・
コピペで持ってきたものが複数あるので、自分で把握しきれず、思った通りにいかないところが出てきて「難しい〜わからない〜」となっているご様子です。あるあるだと思いますw

とりあえずは、ブラウザの検証ツールを使って、おかしいところを一つずつ確認しながら直していきましょう。
もし時間があるなら、初めから全部書いてみると、大変だとは思いますが勉強になります。
やる気が湧いたら(笑)チャレンジしてみてください。

コーディングは、どうやったら効率よく破綻することなくきれいに短く書けるか、私もいまだに模索中というか、毎回チャレンジしている感じです。
今のところ一番いいと思ってる自分ルールは、

  • 最初の設計をしっかり決める(どこをdivでまとめるか、フォントの大きさや色コードはまとめておく、classの命名規則を徹底するなど)
  • リキッドデザインで考えていく。%とかemとかを使えるところは使う
  • cssは継承を考えて大きいところから書いていく
  • 細かく指定しすぎなくて済むようにする(例えばmargin-right, leftを各タグに指定するなら、sectionにpaddingで指定してしまう、など)
  • セクションごとにまとめて、出来るだけ上から書く、ちゃんとコメント入れて見やすく

とかです。

ちなみに、私はdreamweaverを使っているので、インデントとか気にしないで全部一行にわーっと書いて、最後に「ソースフォーマットを適用」というのをやると一瞬で見やすく整えてくれるんですけど、この機能超便利です。
あと、htmlファイルとcssファイルを横並びに置いて作業するとやりやすいです。