HTML/CSSの勉強をしています!

HTML/CSS

なんか、激しく主張してるみたいですが…笑

Fammコンペも提出しましたので、引き続き、HTML/CSSの勉強。
今日は第五章まで終えました。

今日はHTMLのマークアップ。これからcssで装飾していくための、いろんな部分にタグをつけました。
見た目は全然変わらないんですけど、この地道なマークアップ作業が、今後、深くて険しいCSSの森を彷徨う時に大事な手掛かりになるんでしょうねえ…。

今日は

<header>
<nav>
<main>
<article>
<aside>
<footer>
<section>
<time>
<figure>

のタグをつけました。(知らなかったやつに黄色マーカーをつけました)

fammで習ってない(習ったかもしれないけど覚えてない)のがいっぱい出てきた…!

<header>
<main>
<footer>
<section>

あたりはFammでもやったからいいとして。<time>はなんとなく意味がわかるし。

<article>というのは、自己完結しているエリアを表すタグだそうです。
つまりそれ以外の要素がなくても意味が通じるものに使えるんですって。
それは<main>とはどう違うんだろう???この本でも、

<main>
<article>

本文

</article>
</main>

という感じで使われているので、同じもののようだけど…?
多分この先、cssで装飾をしていく間に、「ああっこのために…!」ってなる日が来るんでしょう。楽しみにしたいと思います。

<aside>は<article>とは逆で、省略してもメインのコンテンツの意味がわかる補足情報のことですって。

あとわけわからんかったのが<figure>タグ。画像に使うんだそうですけど、「本文に関係のないイメージ写真には使わない」そうで…。でも本文内ではこの画像については言及していない場合に使うんだそうです。

本文に関係していて、
本文で画像について言及していない

ときのみに使うっていうと、だいぶ用途が限定されそうですけど…。

本文に関係していると大抵本文内で言及しそうな気がするし。うーん。
これも、この先で謎が判明するんでしょうか…。

第六章をちらっとみたら、出た!!!Flexbox!!!
要素を横並びにできるやつだ!!Fammで先生が教えてくれたやつだ!!
いよいよCSSに入ります。苦手意識を克服したい〜!!

と、盛り上がってきたところですが、明日は休日出勤で夜10時帰宅予定なので、お休みです。無理はしないことにしたんだ。無理すると嫌になっちゃうから…。

FlexboxとCSSは明後日のお楽しみにしておこうと思います。明日を乗り切れば本業が一息つくはず…。

コメント

タイトルとURLをコピーしました