HTMLの勉強で知ったこと 1の続き。
今回はどちらかといえばCSSのことばかりになってしまった。
CSS便利
htmlではないが、インラインでCSSを書くにあたって、あまりCSSを意識していなかったが便利だと思った。
HTMLリンクのターゲット属性
リンクにtarger属性を設定することで、リンク先を開く場所を指定できる。
今までwebサイトを閲覧して、リンクを同じタブで開く時と新しいタブで開く時があったが、これが関係していたのか、と思った。
target属性には、次の値を持つことができる。
-
_blank
リンク先のページを新しいウィンドウまたはタブで開く -
_self
クリックされたのと同じウィンドウ/タブでリンクされたページを開く（これがデフォルト） -
_parent
親フレームにリンクされたページを開く -
_top
リンクされたページをウィンドウ全体で開く -
framename
指定した名前付きフレーム内でリンクされたページを開く
画像を文字の左右に表示させる(CSS)
CSSのfloatプロパティを使用することで、画像をテキストの左右に表示させることができる。
画像の中の任意の場所をクリック可能にする
昔懐かしのフラッシュゲームのようなイメージ。
map、areaタグを使うことで、画像の中の一部をクリック可能にすることができる。
文書(要素)の背景を画像にする(CSS)
CSSのbackground-imageプロパティを使用することで、背景を画像にすることができる。
条件(ウィンドウの幅)で画像を切り替えることができる
picture、sourceタブを使うことで、画像の切り替えをすることができる。
例えば、ウィンドウの幅が大きいときは大きい画像を、ウィンドウの幅が小さいときは小さい画像を表示することができる。
Tableの枠線の表示方法の切り替え(CSS)
border-collapseプロパティを追加することで切り替えることができる
-
collapse
隣接するセルのボーダーを重ねて表示 -
separate
隣接するセルのボーダーを間隔をあけて表示
セルを複数の列にまたがらせる
thタグのcolspan属性を使う
セルを複数の行にまたがらせる
thタグのrowspan属性を使う
Tableに見出しを追加
captionタグを使う
captionタグはtableタグの直後に入れなければならない
疑似クラス(CSS)
tableにcssを適用させる際にnth-childというものがあった。
これは疑似クラスといわれており、要素に対して、特定の状態のものに対してcssを適用することができるものである。
nth-childは訳すとn番目の子供といい、その通り、後に続く条件の子要素に対してCSSを適用することができる。
-
odd
一連の兄弟要素の中で奇数番目の要素を表す -
even
一連の兄弟要素の中で偶数番目の要素を表す -
An+B
一連の兄弟要素の中で、 nに正の整数か0が入るとき、An+Bのパターンに一致する位置の要素を表す。最初の要素の番号は1。AとBの値は両方とも<integer>。