コーディング講座、2日目に学んだこと・忘れたらあかんなと思ったことのまとめです。今日でトップページのコーディングが完成しました。ングが完成しました。
ヘッダー
グローバルナビにリンクを付ける
赤枠部分全体にリンクを付けるには、必ずaタグに以下のCSSを指定する。
・インラインブロック→ブロックに変更
・余白をpaddingで肉付け
【CSS】
.gnav a {
display: block;
padding: 15px 0;
color: inherit;
text-decoration: none;
}
なぜ li タグではダメ？
インラインブロックのままだと文字（青枠部分）しかリンクが付かない→カーソルを文字に合わせないといけないので、使いにくいサイトになるため。
ボーダー線の重なりを調整する
・borderを指定しただけでは赤枠部分の線が重なり、線が太くなる→右のborderを0にする（①）
・①だけだと、「お問い合わせ」の右のborderも消えるので、再度→右のborderを設定する（②）
【CSS】
.gnav li{
width: 20%;
border: 1px solid #333;
border-right: 0; ←①
text-align: center;
}
.gnav li:last-child { ←②
border: 1px solid #333;
}
リンクにアニメーションを付ける
ボタンにカーソルを合わせると0.3秒で色が切り替わるようにCSSを指定する。
【CSS】
.gnav-link:hover {
background-color: #333;
color: #fff;
transition: 0.3s;
}
メインビジュアル
画像を中央に配置する
・メインビジュアルを元の画像サイズより大きくしない、幅に応じて変わるようにする（①）
・画像をトップページの中心に配置（②他のやり方もあるが一旦flexで指定）
【CSS】
.mainvisual （親）{
display: flex;
justify-content: center; ←②
}
.mainvisual-img （子）{
max-width: 100%; ←①
}
メインビジュアルはなぜheader、sectionタグの中に入らない？
見出しがないから。メインビジュアルの画像はdivタグで囲んで独立させている。
メインカラム：サービス内容の情報
3つの要素を余白を同じ幅で横並びにする
【CSS】
.create-container （親）{
display: flex;
justify-content: space-between;
}
.create-box（子） {
width: 32%;
}
ヘッダーの幅と揃える
headerとsectionは同じ幅なので、共通のCSSをsection内にも指定する。
【CSS】
.wrapper {
width: 100%;
max-width: 960px;
margin: auto;
}
他の共通パーツの設定
例）ヘッダーとグローバルナビの幅が同じ
headerとnavに同じクラスを付ける
960px以下で打ち止め、元の画像サイズより大きくなると画像がガビるから
【CSS】
.wrapper {
width: 100%;
max-width: 960px;
margin: auto;
}
本文テキストの両端を揃える
【CSS】
.create-text {
text-align: justify;
}
メインカラム：お知らせの情報
年月日の右の余白を揃える
margin-rightで余白を設定すると、数字によってガタガタになる。
dtの幅を設定すること。
【CSS】
.news dt {
width: 20%;
}
CSSが効かないとき
例えばテキストが中央にならないなど→背景に色を付けて確認するべし
予習で1回、授業で2回目のトップページをコーディングしました。今日はここまで…。
明日は3回目、何も見ずにやってみたいと思います！
コメント