前回までは第1弾課題であるWordPressのテーマ制作を行ってきました。
その課題が前回で完成したので本記事からは第2弾課題であるホームページ模写課題を始めていきます！
RaiseTech入会を悩んでいる方やプログラミングスクールを探している方は是非参考にしてみてください！
[PR]筆者が受講しているスクール
RaiseTechではAWS・Java・副業・デザイン・マーケティングに特化したコースが用意されており短期間でのスキル習得を目指すエンジニアリングスクールです。
学習や就職/転職、卒業後と幅広く手厚いサポートを受けることができるのが大きな特徴です。
RaiseTechでは毎週金曜日に無料説明会を2時間程度行っています。
気になっている方は是非1度参加してみてください！
第2弾課題の目標
画像出典：RaiseTech公式サイト
第2弾課題ではRaiseTech公式サイトの一部の模写を1から作り上げていきます！
なかなか手ごわそうですね…
完成目標は2週間！では始めていきましょう。
RaiseTech課題制作
ヘッダー部分の模写コーディング
まずは1番上のヘッダーと呼ばれる部分から模写を始めます。
若干見づらいかもしれませんが…簡単にどんなタグをつけていこうか計画を立てていきます。
まだ装飾は考えずにhtmlだけ作成していきましょう。
画像拝借方法
基本的には検証ツールを使って画像データをもらっています。
1．検証ツール内URL右クリック>新しいタブで開く>右クリックで名前を付けて保存
2．検証ツール内URL右クリック>新しいタブで開く>画面上画像をドラッグ>エクスプローラーへ
3．(検証ツール起動不要)ホームページ上の画像をドラッグ>エクスプローラーへ
の3パターンかなと思います。3の方法はできるものできないものがあるようです。
2の方法が1番早く拝借できる方法だと私は思います。
先ほどの計画通りにhtmlだけを組んでみました！フロント側を確認してみましょう。
htmlは問題なさそうですね！次は装飾に移っていくのですがパッと見で必要なことは
「・」を消す
aタグに入っている文字色と線修正
右部分と左部分を横並びにする
の3つかな…ということでやってみましょう。
以降実際に調べたキーワードを「🔍」で記録していきます。
「・」を消す
🔍 list 点 消す
＊｛list-style-type: none;｝
aタグに入っている文字色と線修正
🔍 a 下線 消す
＊｛text-decoration: none;｝
a {color: #○○○○○○;}右部分と左部分を横並びにする
受講前にやっていたProgateではfloatを使っていたのですがRaiseTechでの授業中に「floatはオワコン」（筆者解釈）と聞いたので別のプロパティを探すことに。
🔍 float 代替
どうやらFlexboxが主流らしいと分かりFlexboxの学習へ…
Flexboxの学習教材
・YouTube しまぶーのIT大学 Webの神様
・Flexbox Froggy
{display: flex;}最強！（筆者解釈）ということが分かったので
header {display: flex;}と指定しました。
またページ全体で揃えたい装飾は「＊」に指定でイチイチ指定する必要がなくなるみたい…！ということで「＊」に指定しました。
1度フロント側を確認しましょう。
修正できてますね！ここで次の計画を立てました。
右部分を右揃え、左部分を左揃えにする
右部分、左部分ともに1列にする
背景色付きボタン装飾
この辺りを次にやることにしました。
CSSで装飾
さあ、ヘッダー部分の装飾をしていきましょう。
右部分を右揃え、左部分を左揃え
ロゴ画像＆説明文の右部分を右揃えに、7つのリストの左部分を左揃えにしたいということなんですが…
🔍 … 検索ワードが思い浮かばない！
なので検証ツールを参考にしてみることに。
justify-content: space-between;
知らないCSSプロパティを発見！
🔍 justify-content space-between
display: flexと一緒に使うと指定された要素の子要素をスパッと左右に分けてくれるものだそうです。左右に分けたい要素の親に指定するので、
header{justify-content: space-between;}
できました！次へ進みましょう。
右部分、左部分ともに1列にする
今はdivの中が縦に並んでいるので横並びにして1列にします。
前日にdisplay: flexで横並びに成功したので同じ要領で
.left {display: flex;}
.right ul {display: flex;}と指定しました。フロント側を確認してみましょう！
横1列になりました！
横がきつそうなので1度余白を指定してあげます。数値は検証ツールからもらった数値と目測です。
h1 {padding-left: 15px;}
p {padding-left 16px;}
li {padding: 0px 15px;}
お手本っぽくなってきましたね。
ただ上に寄ってしまっています。今ヘッダー部分はどのくらいの高さか色を付けてみました。
header {background-color: skyblue;}
なるほど。お手本の高さと揃えてみました。
header {height: 70px;}高さをそろえられたので文字や画像を上下中央ぞろえにしてあげたいですね。
🔍 css 上下中央 テキスト
.right {line-height: 70px;}ヘッダーの高さと一緒にしてあげると真ん中に来るようです。
ただ1行テキストのみということで右部分だけに指定しました。
左部分はhtmlの構造を見直し、h1タグをdivタグに、別々のaタグをつけずまとめました。
現状こんな見た目になりました。
少し左部分の p が大きいので
html {font-size: 62.5%}
p {font-size: 1.4rem;}
ul {font-size: 1.6rem;}で整えてあげました。
html {font-size: 62.5%}でページ全体のフォントの大きさの基準を10pxにでき○○rem指定で10px × 1.4rem = 14pxとできるとのこと！便利ですね。
あとは文字を太くしたかったので
p {font-weight: bold;}
ul {font-weight: bold;}で太く指定しました！
ここでフロント側を確認してみましょう。
やはりロゴ横の文字がおかしいですね。
検証ツールを見てみましょう。
vertical-align: middle;
なるほど。調べてみましょう。
🔍 vertical-align: middle
ブロック要素には指定できない縦方向揃えのプロパティでmiddle指定で中央ぞろえにしてくれるみたいなので、
img {vertical-align: middle;}🔍 white-space: nowrap
初期値はnormalで自動改行になるからnowrap指定で自動改行をオフにしてあげましょうということでした。
p {white-space: nowrap;}
改行は直ったけどまだ中央に来ていませんね。
模写中の検証ページを見てみました。
aタグの高さがヘッダーより小さくなっていました！なので、
a {height: 70px;}と指定してあげると
ロゴは真ん中に来ました！あとはロゴ横の文字ですね。
お手本の検証ツールを見てみましょう。
align-content: center;
align-items: center;
この2つがaタグに指定されていました。
🔍 align-content center
これはjustifycontentの縦方向バージョンと解釈しました。行間余白はどのくらいにしますかー？という感じですね。つまり1行では何も効果はないということです。centerとすることで中身は中央に揃えてくださいと指定できるようです。
🔍 align-items center
こちらはalign-contentと似てるのですがdisplay: flex指定をしている要素の表示位置はどうしますかー？というプロパティです。centerと指定することで中央表示にすることができるようです。
a {align-content: center;
align-items: center; }フロント側を確認してみましょう。
できました！
あとはspanタグ内の文字を大きくしましょう。
span {font-size: 1.8rem;}長かったですね…
今日は次で最後にしましょう。
背景色付きボタン装飾
1番右のリストだけ背景色をつけるために最初にクラスをつけました。
装飾を始めていきましょう。
.last-btn {background-color: #2498b3;
color: #fff; }これを指定してみたんですけどね…
変わらなかった。aタグの方かなとも思い入れましたが変わらず。
全部のliタグにクラスがついてる。
というわけでドロップダウンする・しない・右端の3種類のクラスを割り振りましょう。
そして、右端のリストのaタグに先ほどのcssを指定しました！
背景色と文字色が付きました！あとはaタグの範囲をヘッダーいっぱいに伸ばしてあげます。
↑めちゃめちゃ分かりやすいです！
a {display: block;}
liにある{padding: 0px 15px;}をaタグへ
お手本と瓜二つのヘッダーが出来上がりました！
4時間かかりました…笑
最後に
実はヘッダー部分完成したわけではないんですね…
右部分のメニューのドロップダウンをまだ手を付けていません。
動きをつけるのは最後にまとめて作っていこうと思います！
次回はヘッダー部分の復習と少しCSSのお勉強について書こうと思います！
コメント