【コーディング練習用】スマホサイト版Webデザイン入門オリジナルデザインテンプレート
▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。
今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。
よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。
コーディング練習用スマホサイトデザインテンプレート
スマホサイトなので非常に縦長の画像になっています。
そのまま貼り付けると全体を見通しづらいので、ここでは縮小して掲載します。
右クリックから「名前を付けて画像を保存」等してご利用ください。
保存される実際のデータ幅は375pxです。
375pxというのはiPhone6/7/8などの横幅。
もう少し小さい画面だと320pxや、大きいと400px以上のスマホがあります。
2021年1月現在、モバイルサイトを作成する場合は、ちょうど中間あたりの375pxでデザインしておくと大小の画面にもレイアウトを崩さず対応させやすいでしょう。
モバイルサイトのレイアウトの特徴
PCで横並びになっていた部分は基本的に縦に並び替えています。
英語で列をカラムと呼び、こういった1列の構成を1カラムレイアウトといいます。
PCではメイン部分とサイドが2列だったので2カラム、モバイルでは縦に組み替えて1カラムになっています。
また、なるべくコーディング難易度を下げるため、メニューはよくあるハンバーガーメニューではなく、2列の常時表示メニューにしています。
メインの記事一覧の部分はサムネイル画像をfloatで左寄せにして、本文を右側に回り込ませています。
モバイルファースト
レスポンシブサイトのコーディングにはPCファースト、モバイルファーストという呼び方の書き方があります。
PCとスマホ用のどちらを優先してサイト設計・構築するかの違いです。
現在Web閲覧の大半がスマホアクセスになっているので、Googleもモバイルサイトを検索の順位の基準としています。
そのため、モバイルファーストでまずスマホサイトからコーディングするのもよいでしょう。
レスポンシブコーディングで考える事
コーディング 難易度としてもモバイルサイトの方が少し易しめかもしれません。
まず入門として、モバイルサイト単独でコーディングする場合はモバイルの構成のみ気にしてコーディングすればよいと思います。
ただ、レスポンシブ対応させるのであれば、PCサイトでのコーディングも想定したクラスやCSS指定をした方がよいでしょう。
例えば「人気記事バナー」の部分はモバイルでは縦並び、PCでは3記事が横並びになっています。
flex-directionのCSSプロパティを使うと手軽に組み替えられるので、あらかじめ3記事をまとめてdivで囲い、flexを指定するクラスを指定しておくなどです。
まずは試行錯誤でコーディング経験を培いましょう。
最初から完璧にコーディングなど出来ないので、気を張りすぎず、少しずつコツをつかんでいきましょう。
全体を見通してコーディングできれば最良ではありますが、まずは部分部分で形にすることも大事です。
まずはロゴとメニュー、メイン画像のヘッダー部分だけやってみる、という風に気を楽にして取り組んでみてください。
今後そういった部分的なコーディング方法を解説していく予定なので、またご参考いただければ幸いです。
▼コーディングのお供にポケットリファレンスが手元にあるとすぐ見返せて安心です。
できるポケット Web制作必携 HTML\u0026CSS全事典 改訂版 HTML Living Standard \u0026 CSS3\/4対応 できるポケットシリーズ
▼頻出HTMLタグ、CSSプロパティをまとめた過去記事です。ブックマークなどしてご活用ください。
最後までお読み頂きありがとうございました！
▼初心者からちゃんとしたプロになるシリーズ。タイトル通り基礎からしっかり学べます。
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ
