MENU

【HTML&CSS】課題サイト②トップページを作る

2020 6/20
【HTML&CSS】課題サイト②トップページを作る

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

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる