Weｂデザイン勉強57日目の成長報告！

どうもこんばんは！

今日は休みだったので、結構作業をしました。

7時間くらいしたんじゃないかな。

ということで、今日の作業進捗です！

【中の要素が空の時の指示】

これだと要素が空の場合に背景をtomatoにするっていう指示です。

tomatoって色が認識されるんだ、、！って驚きましたｗ

【要素を上から数えて指示を出す方法】

nth-child = 子要素を全てカウント

nth-of-type = 指定した要素の何番目か

【奇数、偶数に色をつける指示】

table tr:nth-child(2n + 1) {

「行のtrが奇数の時」って指示です。

2n + 1 ＝奇数って意味です。

奇数の表現として「2n + 1」という表現と、「odd」という表現がありましたが、どちらでも表現できたので正直なところ違いはわかりませんでした。笑

【最初の行、文字に指示を出す方法】

p::first-letter = 最初の文字に指示を出す

p::first-line = 最初の行に指示を出す

画像の表示の指示の意味は、最初の文字を大きくして行間を1にしたのちに左にfloatさせることで他の文字が最初の左側に配置されるという意味です。

【近接する要素への支持】

form imput:checked + label {

インプットがチェックされた時、その近接するlabelに対しての指示（今回だと文字太く） 

【作成したページ】

だいぶんぽくなってきました！

2ヶ月前の僕には絶対できてなかったことができるようになっています。

勉強ってすごい！笑

【打ち込んだタグたち】

これを全部文字にすると相当時間かかる＆あんまり意味もないような気もするので、一応やったことをざざっと説明します！

1.タイトル、説明文、キーワード、CSSファイルの呼び出しを定義

2.ヘッダー、メイン、左要素、右要素、フッターのタグをHTMLに記述

3.CSSファイルに各要素の縦幅横幅、背景色、マージンを設定

4.フッター以外を中央揃えにする

5.HTMLファイルにロゴ画像を挿入

6.ロゴ、ナブタグをfloatしclearfixを挿入

ざっくりですがこんな感じ！

ロゴとナビのクリアーフィックスが一番引っかかりましたが、でも納得できたので上出来です♪

今日は、ここまで！