レスポンシブ化するときの考え方
こんにちは。
ぴかそ(@web_art_picasso)です。
前回の記事を公開後、多くの感想を頂きました。
本当にありがとうございます！
記事の中でご紹介させて頂こうと思ったのですが、読者のみなさまのことを考えると、読みづらくなってしまうと考えましたので、僕の心の中に大切に留めておきます。
さて今回の記事についてですが、書く予定は全くありませんでした。
僕自身、ベテランコーダーの元で直接指導を受けたことがないので、技術的なことに関するnoteは書くつもりがなかったんです。
けどよく考えてみると、技術的な部分でも、頭の使い方に関するところは書いても問題ないのではないか？そう思えたんですね。
そこで前回のnoteの内容の実践編のような形になるのですが、レスポンシブにトライするときの頭の使い方に関する記事を書いていこうと思います。
✔️この記事を読むメリット
・レスポンシブにトライする前にやることがわかる。
・レスポンシブでの「ググり方」がわかる。
・flexboxの使い方をより深く理解することができる。
※ 現在、レイアウトの主流はflexboxのため、それを使って説明します。
✔️この記事を読んで欲しい人
・コーディング初心者
・レスポンシブになると手が止まる人
・flexboxの使い方がいまいちよくわかっていない人
今回の記事は随時アップデートを予定しております。
Webサイトのレイアウトによって、flexboxの使い方が変わるからです。
アップデートの通知はツイッターでも報告しますので、フォローして貰えたら嬉しいです！
では本編に入ります。
第１章 レスポンシブでやらかすパターン
最初にレスポンシブでやらかす原因をいくつか紹介しておこうと思います。
ーーー＜パターン１＞ーーー
レスポンシブに取り掛かろうとするも、何からやればいいかわからない。
これの原因の特定は簡単で、レスポンシブのやり方を知らない、もしくは見たことがないってだけですよね。
だから特に焦る必要はありません。レスポンシブに関する記事や、レスポンシブ化をおこなっている動画などを見て手順を覚えていきましょう！
以下の記事や動画を参照してください。
まずはこの記事の内容だけ理解しておけばOKです。
動画でレスポンシブの考え方や実際のコードを確認しておいてください。
何からやればいいか理解できたでしょうか？
上記の記事や動画を紹介してる僕ですが、正直に言います。
僕が今理解している内容って、
① スマホとかに対応するためになんかコード貼ったよな。
② @media から始まるコードでレスポンシブ対応させるんだよな。
はい、これだけです。こんな理解で大丈夫なんです。
いや、大丈夫かは知りませんけど、レスポンシブ対応のサイトは何個も作れています。
ーーー＜パターン２＞ーーー
レスポンシブのコーディングを進めていくと、レイアウトが崩れてしまう。
今回はこちらのパターンを掘り下げていきます。
まず最初に考えられる原因が、WebサイトのPC版をコーディングしていくときにSP版のことを考慮していないことです。
モバイルファーストという言葉があるように、Webサイトをレスポンシブ対応させることはもはや必須と言えます。
実際に僕がデザインカンプからPC版とSP版のコーディングを行う際の頭の中を説明していきたいと思います。
ですが、実際のデザインカンプを作成するのは時間がかかるので、今回はワイヤーフレームを使って、レイアウトに関する部分のみ説明していきます。
第２章 コーディング〜準備編〜
＜使用するワイヤーフレーム＞
まずはPC版
次にSP版
PC版は幅を960px
SP版は幅を550pxにしています。
これらのワイヤーフレームを使って説明していきます。
1つはっきりお伝えしておきたいのですが、今回はコーディングするときの頭の中なので、実際のコードは書きません。
どうしてもコードが分からんという人はこのnoteを読む前にやるべきことがありますね。
そちらの勉強を優先しましょう。
僕自身意識していることが２つあります。
① HTMLの構造を考えるときにCSSの設計もイメージすること。
② CSSのスタイル設計を行うこと。
次章以降、上記の内容を掘り下げていきたいと思います。
第３章 コーディング〜実践編その１〜
PC版のレイアウトを決めていきます。今回は4つに分けます。
まずは全体の上部。
赤の枠はheaderでしょう。
タイトルとメニューリストが横並びなのでflexboxで対応できそうです。
その下にあるイメージは背景としてコーディングすると良さそうです。
次にページのメインエリア。
黄色の枠は中央に配置されています。これについては第５章で説明します。
赤の枠はイメージとテキストが横並びなのでflexboxで対応できそうです。
ここもページのメインエリア。
黄色の枠は中央に配置されています。これも第５章で説明します。
赤の枠はイメージとテキストがセットのエリア3つありますが、横並びなのでflexboxで対応できそうです。
全体の下部。メインエリアとフッターですね。
黄色の枠は中央に配置されています。同じく第５章で説明します。
赤枠のフッターはこの段階では特に意識することはありません。
第４章 コーディング〜実践編その２〜
僕が普段コーディングをする流れを見ていきます。
このようにPC版とSP版を同時に見ます。
赤枠、緑枠、青枠全て、SPだと縦並びになっていますよね。
つまりメディアクエリで550px以下になったとき、flexboxが縦並びになればいいということになるんです。
これを最初に決めておくこと、いや、気づけることが大切です。
flexboxが縦並びということに気づけば、自然と「ググる」キーワードも絞られるのがわかるかと思います。
これが前回のnoteで説明していた内容になります。
自分が何をどのように実装したいのかを言語化することが大切なのです。
第５章 HTMLとCSSの関係
僕がもっとも大切だと思う、HTMLとCSSの関係について話します。
HTMLとCSSの関係なんて誰だってわかってるよ。と思いますよね。
では逆に質問させてください。
わかっているなら、何でCSSでコードを書き始めたら、レイアウトが崩れるんでしょうか？
それは、HTMLとCSSの関係がわかっていないからです。
本質を理解していないから、レイアウトが崩れるのです。
では、その本質とはなんでしょうか。
それはHTMLとCSSそれぞれの特徴を見れば答えが出ます。
HTMLの最大の特徴は「入れ子」構造
CSSの最大の特徴は「セレクタ」
何が最大の特徴かは人それぞれ考え方が違いますので、これが正しい答えとは思っていません。
ただこのように解釈しておくと、コーディングが非常にスムーズに進むかと思います。
この特徴から、僕はHTMLは縦軸、CSSは横軸で捉えています。
分かりやすいように先ほどのワイヤーフレームを使って説明します。
このようなイメージで捉えます。
ただこれだとまだぼんやりとしたイメージですので、第３章の黄色の枠を使って具体的に説明します。
画像のように横からサイトのレイアウトを見て、共通点を持つ要素を同じセレクタで書いていくようにします。
今回であればタイトルに関してはフォントサイズが同じでしょうし、フォームも考慮すると、bodyのcenterに配置されていることが分かります。
以上のことから
HTMLとCSSの関係は、「イメージの関数化」だと思っています。
HTMLの縦軸とCSSの横軸が重なったところで理想とする実装が完成する。これが僕のHTMLとCSSの関係性の本質だと考えています。
この考え方のメリットも同時にお伝えしておきます。
1番のメリットは、無駄なコードがなくなる。ということです。
無駄なコードがなくなるということは、
✔️ CSSの特徴の1つ、継承でレイアウトが崩れることが少なくなる。
✔️ スパゲティコードになりづらい。
✔️ 第三者が見ても分かりやすい。
✔️ 編集がしやすい。
おそらくもっと沢山のメリットがあります。
模写をスタートさせたときは、見た目が整えばそれでOKと考えて問題ないですが、コード自体を綺麗に書くというスキルも模写を重ねるごとに徐々に磨いて欲しいと思います。
ーーーここまで理解できたらーーー
こちらの模写にトライしてみてください。
東京フリーランスさん（@Tokyo_FreeIance）の無料教材です。
ーーー追記エリアーーー
ここに今後、flexboxのレイアウトタイプを追記していこうと考えています。
ーーー最後にーーー
ここまで読んでいただき、ありがとうございます。僕自身まだまだ未熟者ですが、このnoteが、プログラミング初心者の学習の助けに、少しでも貢献出来たら、それほど嬉しいことはありません。これからも一歩踏み込んだ内容を発信していけたらと思います。
／
ここまで読んでくださった皆様に、お願いがあります。
＼
このnoteを読んで、役に立った！と思った方は…
■ noteの感想・ご意見を、ぴかそ（@web_art_picasso）を入れてツイートしてください！Twitterは必ず見ます。リプやリツイートも励みになります。noteのコメントもお待ちしてます。また、noteやTwitterでもご紹介させていただきます。
最後まで読んでいただき、本当にありがとうございました。
終わり。
この記事が気に入ったらサポートをしてみませんか？