CSS便利

htmlではないが、インラインでCSSを書くにあたって、あまりCSSを意識していなかったが便利だと思った。

HTMLリンクのターゲット属性

リンクにtarger属性を設定することで、リンク先を開く場所を指定できる。

今までwebサイトを閲覧して、リンクを同じタブで開く時と新しいタブで開く時があったが、これが関係していたのか、と思った。

target属性には、次の値を持つことができる。

CSSのfloatプロパティを使用することで、画像をテキストの左右に表示させることができる。

昔懐かしのフラッシュゲームのようなイメージ。

map、areaタグを使うことで、画像の中の一部をクリック可能にすることができる。

CSSのbackground-imageプロパティを使用することで、背景を画像にすることができる。

picture、sourceタブを使うことで、画像の切り替えをすることができる。

例えば、ウィンドウの幅が大きいときは大きい画像を、ウィンドウの幅が小さいときは小さい画像を表示することができる。

border-collapseプロパティを追加することで切り替えることができる

thタグのcolspan属性を使う

thタグのrowspan属性を使う

captionタグを使う

captionタグはtableタグの直後に入れなければならない

tableにcssを適用させる際にnth-childというものがあった。

これは疑似クラスといわれており、要素に対して、特定の状態のものに対してcssを適用することができるものである。

nth-childは訳すとn番目の子供といい、その通り、後に続く条件の子要素に対してCSSを適用することができる。

odd
一連の兄弟要素の中で奇数番目の要素を表す
even
一連の兄弟要素の中で偶数番目の要素を表す
An+B
一連の兄弟要素の中で、 nに正の整数か0が入るとき、An+Bのパターンに一致する位置の要素を表す。最初の要素の番号は1。AとBの値は両方とも <integer> 。