前置き
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でできることの多さに驚いた。
今回の記事は以上です。
前回記事はこちら
詳細見たい人はこちら