前置き

HTML,CSS の勉強をしたいなと思った。
Frontend Planet なるものがあると聞き、トップにあったやつを触って勉強した。
この記事は、特に頭に残ったやつをまとめたもの。

↓参考ページ

↓勉強の結果

本編

HTML

`<fieldset>`

<form>のように複数の<input>をまとめるために使用する。
<legend>に題名を書くといい感じになる。

`<a>`

target="_new"で新しいタブで開くようになる。
また、前に開いたタブが生きていたら、何回押しても以前のタブに移動する。

CSS

Custom Properties

標準でない独自のプロパティ。
見るとCSSで使用するための変数みたいな使い方をしていた。
例えば、JSで数値をhogeに設定する。→CSSでhogeの値を元にfont-sizeを変更する。みたいな。

次兄弟結合子

CSSセレクタで使用できる結合子。
例では以下のようにして使っていた。
.slider:active + #slider-value { #slider-valueに適用したいスタイルプロパティ }
こうすることで.sliderがアクティブになった時だけ、#slider-valueに特定のスタイルを適用することができる。
他にも結合子があり、使いこなせばできることがかなり増えそう。

em

パーセントみたいな相対的な長さを表す単位。
フォントサイズに使う認識であまり有用性が分かっていなかった。
しかし、例ではフォントサイズに合わせてUI全体のサイズを調整できるものがあり、その有用性が分かった。

感想

楽しかった。
特にCSSでできることの多さに驚いた。

今回の記事は以上です。

前回記事はこちら

詳細見たい人はこちら