css3 第6回

css3 疑似セレクタその2

css3の疑似セレクタについては以前、nth-childについて学習した。今回はセレクタに対しコンテンツを挿入できる::beforeと::afterについて学習する。また、要素の1文字目や1列目を対象にするセレクタについても学習する。

セレクタの前に挿入

<p id="mae">(1)前に文字を表示</p>

サンプル(1)の赤文字部は、htmlに書かれていない文字が表示している。css3ではセレクタ名に続けて::beforeと書くと、セレクタの前に文字や画像を挿入することができる。この方法での記述はブラウザから見るhtmlソースに反映されない。つまり、SEOには全く寄与しない。

#mae::before{
  content:'赤文字はcssで追記した　';
  color:red;
}

セレクタの後ろに挿入

<p id="ushiro">(2)後ろの画像はcssで追加した</p>

サンプル画像の(2)は、htmlに書かれていない画像が表示されている。画像をドラッグしても掴むことができないため、背景画像のようにも思える。しかし実際は、cssで::afterという疑似セレクタを用い表示している。

#ushiro::after{
  content:url(photo.jpg);
}

要素の最初の文字を対象にする

<p id="saisho">(3)先頭の文字を青く大きく。
<br>小カッコ付数値は1文字扱い。
<br>br区切りの2行目以降は無効。</p>

従来、文章の最初の文字だけ色を変えたい場合、spanタグを用いcssを記述する必要があった。css3では::first-letterという疑似セレクタを用いることで、テキストはそのままに先頭文字を対象にできる。サンプル画像の(3)では、文字の色に加えサイズも大きくした。

#saisho::first-letter{
  color:blue;
  font-size:200%;
}

要素の先頭行を対象にする

<p id="back">(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。(4)1行目を緑に。<br>(4)1行目を緑に(br区切り)</p>

サンプル画像(4)のように、要素の先頭行を対象にする疑似セレクタが::first-lineだ。注意すへき点として、ブラウザ上での先頭行を対象にしている、ということである。サンプル画像ではwidthにより改行された2行目以降の文字にはcssが影響していない。htmlではbrで区切られるまでは1行扱いと感じられるが、この疑似セレクタは実際の表示に準じている。

#back::first-line{
  background-color:#4b7;
}

cssだけで吹き出しを描く

サンプル画像の(5)以降は、cssだけで吹き出しを描くテクニックについて述べる。

  <p>(5)borderで三角形を作る</p>
  <div id="fukidashi1"></div>

  <p>(6)1つを残し透明に</p>
  <div id="fukidashi2"></div>

  <p>(7)通常のboxと組み合わせる</p>
  <div id="fukidashi3">吹き出し</div>

  <p>(8)横向きもできる</p>
  <div id="fukidashi4">吹き出し</div>

borderで三角形を

コンテンツのないboxを作り、widthを0にする。するとborderだけで(5)のような4つの三角形で構成された矩形を描くことができる。

#fukidashi1{
  width:0px;
  border-top:solid 50px #4b7;
  border-right:solid 50px #74b;
  border-bottom:solid 50px #b74;
  border-left:solid 50px #bc1;
  text-align:center;
}

三角形を1つだけに

次に、必要な三角形を残し、それ以外を透明にする。
背景色と同じにする手段は、背景が単色塗の場合にしか使えない。このため、ここではborder-colorにtransparentを指定することで透明にしている。

#fukidashi2{
  width:0px;
  border:solid #4b7;
  border-color:#4b7 transparent transparent;
  border-width:50px;
}

通常のboxと組み合わせる

三角形の位置を調整し、通常のboxに対し吹き出しらしく見える位置に配置する。ここで先に学習した::afterが登場する。::afterで空のcontentを配置し、そのborderとして三角形を描く。配置手段としては、positionを用いる。

#fukidashi3{
  background:#4b7;
  width:200px;
  height:140px;
  line-height:140px;
  text-align:center;
  position:relative;
}
#fukidashi3::after{
  content:'';
  width:0px;
  border:solid #4b7;
  border-color:#4b7 transparent transparent;
  border-width:50px;
  position:absolute;
  top:120px;
  left:20px;
}

三角形を横に付ける

先の例ではborder-topを使ったが、この位置を変えれば横向きの吹き出しを作ることも可能だ。

#fukidashi4{
  background:#74b;
  width:200px;
  height:140px;
  line-height:140px;
  text-align:center;
  position:relative;
  border-radius:30px 30px;
  color:white;
}

#fukidashi4::after{
  content:'';
  width:0px;
  border:solid #74b;
  border-color:transparent transparent transparent #74b;
  border-width:20px;
  position:absolute;
  top:40px;
  left:200px;
}