デイトラ学習にっき🌷DAY8-9
学習時間:2/1(月) 2.5H ・2/2(火) 2.5H
HTML/CSS コーディング復習
自分で書き上げたHTML/CSSを見ながら、DAY5-7を再確認し、出来ていなかったところの洗い出し
【head】
①言語の設定を日本語に
<html lang="ja">
②アイコン表示の設定
<link rel="icon" heref="favicon.ico">
③metaタグでのサイトの説明の設定
<meta name="description" content="練習用サイトです">
【共通のスタイル】
①グループ化されたコンテンツをまとめる際には[div]ではなく[section]を利用する
②CSSの共通のスタイル部分に、
を設定
→画像は基本的には横幅100%になっていて欲しいから。これが設定してあることで後のflexもうまく反映される
③aタグの設定
文字の色と線の有無を設定
hoverした時に色が薄くなるようにopacityを設定
④上部に書いた共通class以外でも、同じスタイルの部分にはまとめて同じCSSをあてる
※これを分かりやすくするために、先にまとめてHTMLを書く
【header】
①疑似要素を利用してfloatを解除
②メニューを横並びにするためnavにも[float="left"]をつける
【top】
①画像を画面全ての幅に表示したい時には、コンテンツをくるむ親要素にimgをつける
【コンテンツ】
①flexboxを利用して横並びを作る
②問い合わせフォームの作り方
③btnにもhover設定をつける
これにて完成！
達成感！！
この記事が気に入ったらサポートをしてみませんか？