コーディング講座、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回目、何も見ずにやってみたいと思います!
コメント