【独学で学ぶHTML5/CSS3】定義型リストでお知らせ項目を作成 8日目【初心者】

2020年5月18日WEB

【お知らせの見出し】

見出しなのでh2タグでお知らせを囲みます。
class名を付与し、CSSを記述します。
背景色の指定は消しておきましょう。

h2タグの中の指定を行うため、新しく
classを定義し効果を指定していきます。

.info__h {
font-size: 18px; 文字の大きさ
font-weight: bold; 太さを太く
color: #555; 色の指定
}
を行いました。

こうなりました。

【定義型リストの作成】

大きなdl要素の中にdt要素とdd要素で構築し行きます。
今回は日時dt要素内容dd要素となっていますが、
象 鼻が長い
レモン 酸っぱい
などの項目を作る時にも使用するのがこの定義型リストとなっています!

それではCSSで記述していきます。
dt要素にday
dd要素にinfo__text
とclass名を付与しました。

それぞれに文字の大きさと、色を設定しました。
こうなりました。

フロントエンドエンジニアになりたい人の Webプログラミング入門

【横並びにしよう】

どちらにも

float: left;

をかけて、横並びになるよう指定します。
こうなりました。

このままではいけないのでそれぞれに横幅の指定をしてあげ、回り込めないようにしてあげます。
きれいに並びました。

さらに先ほども使った line-heightで縦の余白も作成します。

【背景の色を指定】

背景色を指定します。
今回は奇数行だけ背景色をつけたいので、疑似クラスを使って指定します。

.day:nth-of-type(odd),
.info__text:nth-of-type(odd)


日付の奇数行、内容の奇数行だけという指示になります。
2つのclassを付けるときは『,』の後に次のclassを付けてあげるとどちらにもつけることができます!
こちらに背景色を指定します。

.day:nth-of-type(odd),
.info__text:nth-of-type(odd) {
background-color: #f5f5f5;
}

奇数行だけに背景を決定することができました。

h2に
margin-bottom
余白を設け、
dt要素とdd要素に
padding-left
左側余白を設けました!

お知らせのBOXはこれで完成です!

僕が学んでいるのは『Udemy』!
オンライン学習なので好きな時間に取り組むことができます!

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya