サイトって毎回一から作っていくの？？
そんなことを毎回していたら大変です。
頻出で使用するものはテンプレート化しておきましょう。
いくつかパーツを準備しまして、実際にそれを使用する際はページごとにパーツをアレンジしていくという形をとりましょう。
サイト構成に必要となるパーツを準備しよう！
Webページの準備
HTMLの型は初めのうちは毎回作るの大変ですよね。
この作業に関しては、工夫するところとか一切ないので、毎回コピペしちゃいましょう！ってのがオススメです。
See the Pen RmZGPe by Jwataru (@jwataru) on CodePen.
注意点としましては
・タイトルを適当に変える
・ビューポート入りなのでレスポンシブ対応
・style.cssというスタイルシートありきで作っている
・CSSでフォントを設定済（各自好みで）
といったところです。
他は特に説明が必要がないと思うので、コピペして使用しちゃってください。
サイト名を表示するパーツ
サイト名とそれを補足するよな説明を入れておきました。
ページの一番上に入れるケースが多いことから、メインコンテンツの邪魔をしないようコンパクトなレイアウトにしています。
See the Pen Ezvgwo by Jwataru (@jwataru) on CodePen.
注意点
・リンク先は＃で設定しているので適当に変更してください
・リンク機能<a>の下線は消してあります。
記事を構成するパーツ
記事のタイトルと本文を表示したパーツです。
余白を大きめにとった流行りのレイアウトにしてみました！
See the Pen EzvgRE by Jwataru (@jwataru) on CodePen.
ブラウザの標準サイズは
<h1>…32px
<p>…16pxとなっています。
近年ではスマートフォンの表示を考慮して16px以上の表示が一般的です。
今回の記事タイトルの<h1>を36pxに指定させていただきました。
また、ブラウザは標準で余白が挿入されているのですが、上下の余白が入っていると、他のパーツと組み合わせる時に頭をそろえるのが難しくなってきますで、余白を0にする設定にしてあります。
記事タイトルと記事本文の間に20px、段落ごとに20px余白を空ける設定にしています。
メニューを構成するパーツ
まずは縦に並べたメニューです。
See the Pen GavNRJ by Jwataru (@jwataru) on CodePen.
カーソルを重ねると背景がグレーになるようにしています。
リンクが機能する範囲はdisplay:blockとすることで横幅いっぱいに広げています。
次にメニューを横に並べるやりかたです。
先ほどの縦表示に2つCSSを追加するだけです。
See the Pen joLVbL by Jwataru (@jwataru) on CodePen.
ボックスデザインで横に並べるの応用ですね。
ボックスデザインってなんのこと？って方はこちらの記事を見ると分かります。
【HTML&CSS初心者】ボックスデザインでレイアウトしよう～float,clearfixとは～ -
各リンクはボックスの文字数に合わせた横幅に設定しています。(width:auto)
メニューは頻出なので必ずテンプレとして用意しておきましょう！
コピーライトを構成するパーツ
主にフッターに書くことが多いコピーライトもどうせなのでテンプレ化しておきましょう。
See the Pen aryBRe by Jwataru (@jwataru) on CodePen.
特に説明はないです。
まとめ
パーツのテンプレート化しておくべきものをまとめておきます。
・Webページ作成のためのHTML&CSS
・サイト名
・記事
・メニュー（縦ver,横ver）
・コピーライト
ここまでの準備が出来ましたらいよいよサイト作り本番です。
いままで準備してきた概念やパーツを使って効率よく作っていきますよ！！
本番と言っても、今後模擬コーディングをしていくための練習を用意してみました。
【模擬コーディング実践】Progate、ドットインストールのHTML&CSSを終えた人にオススメ～ブログ風サイトを作ってみよう～
これをこなすだけで
・ボックスデザインの理解
・レスポンシブデザインの理解
・テンプレート化したパーツの利用の仕方
・頻出デザインを網羅的に習得
これらを効率よく一気に習得できます。
今後模擬コーディングや実際に受注していくにあたっての基礎のノウハウが全てつまっていますので、是非挑戦してみてください。
理解しながら、真似していくだけです。
オリジナルで作っていくのは難しいですが、真似するのは簡単です。
オリジナルで作っていくためにも「型」として習得すべきものを真似することで効率よく習得しちゃいましょう！