基礎文法は終わったけど、、次は何をすれば？？
ProgateやドットインストールのHTML＆CSSの基礎文法を終えて、次は一体何をしたらよいんだろう⁇といった方は多いのではないかと思われます。
基本的には、その次にやるべきことと言えば「模擬コーディング」です。
ですが、闇雲に無計画にサイトを作っていくのは、どうなんでしょう。
取り組んでみることは非常に大事ですが、時間と体力を無駄に消費していては少しもったいないです。
サイト作成の手順は毎回同じやり方にすると非常に効率が上がります。
そのためには「効率の良いサイト作りのデザインの基礎」をまず最初に抑えるべきだと私は考えます。
これはProgateでもドットインストールでも教えてくれない超大切なことです。
そのデザインの基礎を実践式で一気に習得してしまいましょう！
まずは私が用意したブログ風サイトのデザインから始めてみましょう。
こちらのサイトを作成し終える頃には、デザインの基礎だけではなく、頻出のデザインを網羅的に習得することができます。
今回作成するページの最終デザインはコチラです。
どうでしょう？
だいぶそれっぽいでしょ？笑
このくらいなら2時間かからないくらいでささっとつくれちゃうんじゃないでしょうか？
ただ作るだけではなく、ここまで学んできたことを効率よく使用していくのでここまでのおさらいにもなります。
・ボックスデザインの概念の理解
・レスポンシブデザイン
・パーツのテンプレート化
是非これらの知識の理解を深め、準備してきて下さい。
そしてこれらの知識の復習としてこの用意したブログ風デザインの模擬コーディングしてみましょう。
一気に習得できると思います。
さぁ、いってみよう！！
ブログ風サイトを作ってみよう！～第一章～
第1章としました。
ブログ風サイトの作成について全4回にわたってお教えしていきたいと思います。
制作手順の確認
サイトを制作する際、自分の中でルールを決めていつも同じやり方をするというのが上達への近道です。
なぜなら、なるべく頭を働かせずに作成したいからです。
機械的に出来るようにした方が楽です。
ルールを決めておくものの一つとして、制作手順を毎回だいたい同じにしておくということが挙げられます。
都合によっては制作手順がその都度変わってきてしまうこともあるのでその辺は柔軟に対応するとして、だいたい同じにすることをオススメします。
【ブログ風サイトの制作手順】
① レイアウトの基本構造を作る
② ボックスにコンテンツを入れる
③ レイアウトの調整
④ レスポンシブ調整
⑤ パーツの追加＆調整
こういった流れでやっていこうと思います。
※本記事(第１章)では②まで
レイアウトの基本構造を作る
基本中の基本がボックスレイアウトです。
これはProgateでもドットインストールでも教えてくれないので、知らない人は絶対にこちらの記事を読んで理解を深めてから、また戻ってきてください。
【HTML&CSS初心者】ボックスデザインでレイアウトしよう～float,clearfixとは～
今回作成するページは上の画像を予定しています。
作成したいページに合わせてどのような形でボックスを用紙するかを検討します。
次のようにボックスを考えてみたいと思います。
凄く簡単に言うとこうなることがわかりますか？
分からない方はボックスデザインとレスポンシブ対応の理解がまだまだ浅いです。
コチラの記事で復習しましょう。
【HTML&CSS初心者】レスポンシブデザインが簡単に分かる！作れる！～基本はBoxの解除～
PC表示のBox3とBox4の横並びになっているのを解除したらモバイル表示になります。
ですので、まずは大まかにブロックは5つ準備しましょう。
ここまで来たら、次のこともまとめて全部やっちゃいましたら、レイアウトの基本構造は終了です。
①Boxを5つ準備する
②Box3とBox4を横並びにする
③レスポンシブ対応させる
ブレイクポイントは768pxにしましょう。
図で表すとこんな感じです。
See the Pen BedeLz by Jwataru (@jwataru) on CodePen.
まとめるとこのようなコードとなりますが、本記事ではコピペしては意味がないので
「自分で作ったのと答え合わせする」or「答えを見たうえで理解して自分で見ずに作り直す」とすることをオススメします。
ちなみに、ボックスレイアウトを見やすくするためのレイアウトは無くてもいいのですがあった方が確認しやすいのでこの部分はコピペすることをオススメします。
ボックスの中にコンテンツをいれる
次の画像のようにボックスの中にコンテンツを入れていきます。
このとき、テンプレート化したパーツをどんどん使っていきましょう。
ここからは過去の記事で作ったパーツをそのまま引用して、そこから変更を加えていくスタイルでやっていきます。
【HTML&CSS初心者必見】頻出パーツをテンプレート化しよう！
サイト名
パーツに関する過去記事で用意した「サイト名」のパーツを利用します。
Box1にはサイト名のパーツを入れていきます。
Box1にサイト名のパーツをそのままぶち込んで変更点を修正します。
※色の意味
赤....削除，青…変更，黄…追加
注意点としては、CSSは＠mediaより上に追加しておくことです。
レスポンシブWebデザインによるページの変化に応じて@media内の設定でスタイルシートを上書きできるようにするためです。
ナビゲーション
続いてパーツの過去記事で用意した「メニュー」のパーツの利用です。
Box2にはメニュー（横並び）のパーツを入れてナビゲーションを作ります。
注意点はdivは意味を持たない括りですので、<nav>としてあげてナビゲーションとして明確にしてあげましょう。
記事
続いて「記事」パーツの利用です。
Box3には記事を入れます。記事のパーツを入れましょう。
コンテンツを明確にするため<article>に変更しましょう。
<p>や<h1>の文章は好きに設定してください。
サイドメニュー
Box4にはサイドメニューを作ります。
これはメニューパーツの縦並びに相当するので引用しちゃいましょう！
今回はちょっとややこしいかもしれません。
手順をまとめます。
【HTML】
①Box4にメニューパーツを挿入
②Box4って文字削除
③class名をtokushuとします。
④<div>を<aside>に変更
⑤<aside>でくくった全く同じものをあと二つ複製
⑥画像のようにクラス名とh1の変更
【CSS】
①メニュー（縦並び）パーツを挿入
②サイドメニューってやつと、それぞれのクラス名変更
③h1に関するスタイルを画像の通りに追加
④まとめて二つ複製
④クラス名を”osusume”,"ninki"に変更
少しややこしいかもしれませんが手順に沿って行えばできると思います。
レスポンシブデザインの確認
レスポンシブ対応しているか確認してみましょう。
GoogleChromeで右クリックした際に出てくる「検証」の機能でモバイル表示を確認しましょう。
ちゃんと対応していますね。
まとめ
コチラの画像のようになったでしょうか？
使用した写真の大きさがものによって違いますのでそこの差は生じるかもしれませんが、そのほかは大体同じレイアウトになると思います。
今回の一番のポイントは用意したパーツを使用できる点です。
このようにテンプレート化しておくことで、複雑な構造をいちいち頭の中で呼び起こすことなく、コピペで済ませることができるので、作業がとても楽になります。
そして、毎回同じ作業をしていくことに気づきます。
【ブログ風サイトの制作手順】
① レイアウトの基本構造を作る
② ボックスにコンテンツを入れる
③ レイアウトの調整
④ レスポンシブ調整
⑤ パーツの追加＆調整
本記事で②まで終わりましたので、次回は③レイアウトの調整、④レスポンシブの調整に入りたいと思います。