この記事の監修者
この記事では、コーディング課題（初級編）の解説をしていきます！
この解説記事とコーディング方法が異なっていてもしっかりとレイアウトが組めていれば問題ないので参考程度に読んでみてください♪
コーディング課題（初級編）をご覧になってない方はこちらの記事で確認してください☆
作成したコーディングを見よう！
今回作成したコードがこちらになります！
codepenの挙動がおかしく無駄なコードがあったり、画像が変更されていなかったりとありますが参考程度に見てみてください🙇♂️
See the Pen cording by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てください🙇♂️下記の場所をクリックすると拡大して見ることができるので拡大しながら見ることをおすすめします！
それでは、セクションごとに説明をしていきます！
headerを作って行こう！
今回は下記のようなheaderを作成していきます。
作成したコードがこちらです。
See the Pen header by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てみてください🙇♂️header作成のポイント
・headerの型を覚える
・flexboxを理解する
headerの型を知ろう！
今回のような左側にロゴやサイト名があり、右側にナビゲーションメニューがあるheaderのデザインは、頻出のレイアウトになります。
そのため、コーディング初学者の方は下記のhtmlの構造を頭にいれておくことをオススメします。
See the Pen PowLQpQ by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てみてください🙇♂️flexboxを使って横並びをさせよう！
flexboxをまだよく知らない人は、こちらの記事でflexboxを学んでいきましょう！
headerを作成していくときには、2度の横並びが必要となります。
①ナビゲーションメニューの横並び
②ロゴとナビゲーションメニューの横並び
しっかりとflexboxを学習して、この2度の横並びを行うことで今回のようなレイアウトを組むことができます！
cssも型をしっかりと理解してくださいね♪
See the Pen header by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てみてください🙇♂️fv(ファーストビュー)を作っていこう！
fv作成のポイント
・背景画像の設定の方法を理解する
・上下左右中央寄せの方法を理解する
背景画像の設定の方法を理解する
background-imageの設定方法をまだよく知らない人は、こちらの記事でbackground-imageの設定方法を学んでいきましょう！
上下左右中央寄せの方法を理解する
中央に配置されている、メインコピーの配置をflexboxやpositionを使用して作成していきます。
上下中央寄せの代表的な方法
①flexboxを使用した上下左右中央寄せの方法
②positionを使用した上下中央寄せの方法
①flexboxを使用した上下左右中央寄せの方法
上下左右中央寄せさせたい要素の親要素に対して
親要素{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
このたった4行加えるだけで、上下左右中央寄せが完成します。
See the Pen fv by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てみてください🙇♂️②positionを使用した上下中央寄せの方法
今回のコーディングでは、flexboxで実装しましたが、positionを使用しても簡単に実装することができます。
positionを使用した方法も知りたい方は、こちらの記事を参考にしてみてください！
Aboutを作っていこう！
About作成のポイント
①<br>を用いて改行の位置を指定する。
②両サイドの余白は、wrapperへのpaddingで指定する。
①<br>を用いて改行の位置を指定する。
常に改行された状態にするために、<br>で改行を指定しておくようにしましょう！
②両サイドの余白は、wrapperへのpaddingで指定する。
左右の余白は、%やvwで指定をしておくとレスポンシブに対応しやすくなるのでオススメです！
See the Pen padding by クリ★スタ (@cresta_design) on CodePen.
Serviceを作っていこう！
Service作成のポイント
①画像の幅指定の方法を知っている
②flexboxの使い方を知っている
③flexboxでrow-reverceを使用して順番を変える方法を知っている
①画像の幅指定の方法を知っている
画像は、ブロック要素で囲み囲んだ要素に幅を指定するようにしましょう！
詳しくはこちらの記事で解説しているので参考にしてみてください！
②flexboxの使い方を知っている
flexboxは、横並びにさせたい要素の親要素にdisplay:flex;を記述することで横並びにできる方法です。
flexboxをまだよく知らない人は、こちらの記事でflexboxを学んでいきましょう！
③flexboxでrow-reverceを使用して順番を変える方法を知っている
display:flex;を使用して横並びにさせた後に、続けてflex-direction: row-reverse;と記述すると横並びになった要素の順番が入れ替わります。
Newsを作っていこう！
News作成のポイント
①画像の幅指定の方法を知っている
②flexboxの使い方を知っている
③注意点
①や②は、他のセクションで解説をしているので参考にしてみてください！
③注意点
画像の下に小さな余白ができてしまっている場合、imgにvertical-align: bottom;を追加して余白を取り除いてください！！！
今回は、テキストの量が同じだったので上記のようなコーディングをしました。しかし、テキストの量が異なる場合でも、同じ高さにする場合はbox-sizing:border-box;というプロパティを使用します。
中級編で紹介できればと思いますので、楽しみにしていてください♪
Contactを作っていこう！
contact作成のポイント
①formの型を覚えること
②inputタグの使い方を学ぶこと
①formの型を覚える
formもheaderと同様で型が存在します。今回のレイアウトのようなformは、よく使用するので覚えちゃうくらいが良いかと思います！
See the Pen form by クリ★スタ (@cresta_design) on CodePen.
0.25xで見てください🙇♂️②inputタグの使い方を学ぶ
inputタグとは、何かを入力・送信するときに使うタグになります。そしてinputタグの使い方を学ぶ上で一番抑える必要があるのがtype属性と呼ばれるものです。
type属性をcheckbox・radio・text・submitなどと変更することで、表示のさせ方を簡単に変更することができます。
See the Pen type by クリ★スタ (@cresta_design) on CodePen.
レスポンシブさせていこう！
レスポンシブコーディングのポイント
①手順を理解する
②レスポンシブのポイントを抑える
①手順を理解する
レスポンシブコーディングをする時の手順は下記のように進めるとスムーズにできます。
a.メディアクエリをPC用のCSSの一番下に記述する
@media screen and (max-width: 768px) {
//ここに適用したいCSSを書く
}
b.基本的にheaderから順に記述していく（ハンバーガーメニューは最後に実装する）
※上の要素から順番に375px(例)に入れていく
c.wrapperのpaddingを調整する
スマートフォンでは、左右の余白が15pxくらいが良いと言われています。
早い段階で、左右のpaddingを調節することで、見た目を整えやすくなります。
d.font-sizeの調整をする
e.widthの調整をする
※width指定はせずに、PCの時からmax-widthを指定するとレスポンシブが楽にできます。
f.横並びの要素を縦に並べる
※flex-direction:column;
PCで横並びの要素を縦に並べたい時は、縦に並べたい要素の親要素にflex-direction:column;を記述することで縦に並べることができます。
その後は、margin:auto;などを使用してセンタリングしてあげると縦並びの完了です！
g.画像のトリミングを行う
※object-fit;
PCとSPで画像のサイズが異なっている場合は、object-fit;というプロパティを指定することで、簡単にトリミングを行うことができます。
object-fit;については、こちらの記事(CSSで画像をトリミングできるobject-fitの使い方を徹底解説！)で詳しく説明しているので参考にしてみてください。
h.全て完了後ハンバーガーメニューを実装する
※全ての要素が375px(例)の幅に収まってから実装するのがスムーズです。
See the Pen cording by クリ★スタ (@cresta_design) on CodePen.
ハンバーガーメニューを実装しよう！
詳細は、また後日動画や記事にしていきますが、jsのコードの横に説明を記述しているのでこちらを参考にしてみてください！
See the Pen cording by クリ★スタ (@cresta_design) on CodePen.
まとめ
お忙しい中、コーディング実施してくださったみなさまありがとうございました🙇♂️
コーディングやデザインカンプにミスがあったら申し訳ありません😭
少しでも皆さんの学習のお役に立てるよう、今後も無料でコンテンツをガンガンリリースしていきます！！応援よろしくお願いします🙇♂️
この記事がいいと思ってくださった方は、SNSでのシェアをお願いします！
質問をTwitterから募集します！
無料でwebデザインに関する質問にお答えします。
クリ★スタは未経験からwebデザイナーを目指す方を応援しています！そのため、学習していく中での些細な疑問に記事で回答していきます。
お気軽にご連絡ください。→PENGIN LLC. | Web制作会社
Youtubeでは動画学習コンテンツを配信しています！
動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。
ぜひチャンネル登録お願いします🙇♂️→PLAYJOB Youtubeチャンネル
