箸休め程度のちょっとしたCSSの小ネタ。

PHPやRuby on Rails等での独自のCMS開発や、WordPress等の既成のCMSを利用して、スキン等の機能でカラーリングの変更を動的に行う場合、文字色とそれにかかるボックスレベルでの線色を同時に変更したいときがある。

けど、そのような要件があってもどうしようにも文字色と線色は別々のものとしてCMS側で通常は指定しなければならない。

それが面倒くさいときに役立つCSSの掛け方があった。

 

例えば線ありHTMLにCSSををかけるときに、通常は以下のように指定すると思う。

 

<style>
.headline{
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #FF0000;
  color: #FF0000;
}
</style>
 
<h1 class="headline">タイトル</h1>

 

見たとおりで、border-colorとcolorを指定しなければならない。

 

これを文字色だけを変更すれば線色も併せて変えるようにしたい場合、以下のように書けばいい。

<style>
.headline{
  border-width: 0 0 1px 0;
  border-style: solid;
  color: #FF0000;
  /* ↓これがミソ */
  display: inline-block;
  width: 100%;
  /* ↓width:auto;をベースで、paddingなどを掛ける書き方をしている場合 */
　box-sizing: border-box;
}
</style>
 
<h1 class="headline">タイトル</h1>

もしくは、こんな書き方でもOK。

<style>
.headline{
  color: #FF0000;
  position: relative;
  z-index: 10;
}
.headline::after{
  content: "";
  border-width: 0 0 1px 0;
  border-style: solid;
  display: inline-block;
  width: 100%;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
}
</style>
 
<h1 class="headline">タイトル</h1>

とりあえず、以上はIE9までは表示を確認している。

わざわざ線一本のためにPG側に記述をしたくない場合、結構便利だったり。

 

サーバー構築とかPHPやRuby（＋Ruby on Rails）でSEとかPGの領分を全て自分でやっているせいで、コーダーらしいことあんまり書けてなかったけど久し振りにそれっぽいことを書いてみた。