こんにちは、こずえです。
プログラミング学習記録42日目です。
サイト模写の続きです。
所感：昨日は体調が悪化して夜ごはんも食べることなく朝まで爆睡したのと薬のおかげで咳がたまにでる程度まで回復しました。
目次
合計学習時間
前回までの時間：71.50[h]
今回の時間：8.50[h]
合計時間：80.00[h]
学習内容
前回に引き続きAirbnbのサイト模写です。
サイト模写の経過
今回の変更内容は以下の通りです。
- メインコンテンツ_02の追加
- メインコンテンツ_03の追加
- フッターの追加
- ヘッダーの骨組作成
- ヘッダーのアイコン追加
そのままヘッダーも終わらせてしまおうとしたのですが、すんなり進まなかったので次回に持ち越しです。
フッターとヘッダーのアイコンがSVG形式なのですが、理解が追い付かずソースの書き方が納得できていません。
とりあえずそれっぽく表示できているため置いておきます。
SVGムズカシイ…。
参考記事
CSSセレクタ
Flexbox
Font Awesome
メインコンテンツ_02とフッター/ヘッダーのアイコンです。
フッター/ヘッダーのアイコンはコードでの表示がうまくできなかったため、svgをダウンロードして使用しています。
- 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
- envelope | Font Awesome
- stopwatch | Font Awesome
- globe | Font Awesome
- airbnb | Font Awesome
ボタン
ボタンにカーソルを合わせた時にカーソルが手の形にならないなという気づきから、ボタンをリンクとして扱われるよう変更しました。
aタグのクリック範囲の拡張
フッターの文の1行目と2行目を1つのリンクとして扱うために下記の記事を参考にしました。
透明度、明度
リンク文字、ボタンの背景色の透明度、明度を変更するため以下の記事を参考にしました。