スタイルシートの技

蛍光マーカーを引いたような見栄えにする

蛍光ペンみたいに文字列にマーカーを引けたら…　そういうアクセントにこだわっている方もいるはずです。 「ez-HTML」を使っている人はすでに「マーカー」機能があってスタイルシート方式にしているのであまり説明する意味は無いかも知れませんが… 「marquee」というタグを見かけた事はありませんか？実はmarquee要素を使ってもできますが、これはInternet Explorer限定というか、 マイクロソフト社が独自に追加した要素ゆえ、OperaやFireFoxを使っている人はただの文字に見えるだけとなってしまいます。注意しましょう。

マーカーを引くという事で、文字列の背景色を黄色にしてみます。 背景色の設定には「background-color」が有効です。

<p>このように<span style="background-color: #ffff00;">蛍光ペンライクで
マーキング</span>をする事ができます。</p>
このように蛍光ペンライクでマーキングする事ができます。

このようなマーカーを応用した派生技は色々考えられます。試しに今思いついたものを列挙してみました。 以下のHTML+CSSを参考にしてみましょう！

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>マーカー</title>
   <style type="text/css">
      *.marginmarker {
      background-color: #ffff00;
      margin-left: 0.3em;
      margin-right: 0.3em;
      }
      *.largemarker {
      background-color: #ffff00;
      padding: 0.3em;
      margin-left: 0.3em;
      margin-right: 0.3em;
      }
      *.markerline {
      background-color: #ffff00;
      margin-left: 0.3em;
      margin-right: 0.3em;
      text-decoration: underline;
      }
   </style>
</head>
<body>
   <h1>マーカー</h1>
   <p>マーカーにも色々と応用が効きます。
   <span class="marginmarker">マーカー左右に余白</span>を付けたり、
   <span class="largemarker">マーカーを太く</span>したり、 
   <span class="markerline">マーカー＋下線</span>、と言った事も可能です。</p>
</body>
</html>
マーカーにも色々と応用が効きます。
マーカー左右に余白、マーカーを太くしたり、 マーカー＋下線、と言った事も可能です。

マーカーひとつでも奥が深いものです。単位の「em」について分からなければ「スタイルシートで良く使われる単位」を参照してください。背景色が黒で文字だけを白抜きにしたい…とか、まだまだ応用はありそうです。

top