CSSデザインカタログ » others » 背景のようにテキストを入れる : h910-s

サンプル

Information おすすめ情報

ソース

XHTML
<h3 class="h910-s"><span>Information </span>おすすめ情報</h3>

CSS
h3.h910-s {
  position: relative;
  margin: 1em 0 0.5em;
  width: 18em;
  height: 2em;
  overflow: hidden;
  border: solid 1px #CCC;
  padding: 0.2em 0.5em;
  font-size: 150%;
  font-weight: bolder;
  color: #000;
}

h3.h910-s span {
  display: block;
  position: absolute;
  bottom: -0.4em;
  right: 0;
  z-index: -1;
  font-family: "Arial Black" sans-serif;
  font-size: 250%;
  color: #FFE5F7;
}

解説

  • z-indexプロパティでspan要素内のテキストを下に入れ込むようにしています。
  • 表示位置を調節するため,基準となる祖先要素にposition: relative;を,調節する要素にposition: absolute;を指定します。どちらもブロックレベル要素でなければならないのでインライン要素のspandisplay: block;でブロック化します。
  • 表示文字サイズの変更に対応できるように親要素の右下を基準に配置しています。(bottom,right)
  • Windows,Macともに使える太めのフォントとしてfont-family"Arial Black"を指定しています。Arial Blackがインストールされていない場合ものあるのでsans-serifを必ず併記します。