CSSデザインカタログ » others » 下向きの矢印を入れる : p800-i

サンプル

img要素として入れる

(現状・分析・原因)テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

したがって

(結論・対策)テキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。

p要素の背景画像として入れる

(現状・分析・原因)テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

(結論・対策)テキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。

ソース

XHTML
<p>(現状・分析・原因)テキストテキスト......</p>
<p class="p800-i-1"><img src="../img/mk-down.png" alt="したがって" width="32" height="26" /></p>
<p>(結論・対策)テキストテキスト......</p>

<p>(現状・分析・原因)テキストテキスト......</p>
<p class="p800-i-2">(結論・対策)テキストテキスト......</p>

CSS
p.p800-i-1 {
  margin-left: 100px;
}

p.p800-i-2 {
  padding-top: 40px;
  background: url(../img/mk-down.png) no-repeat 100px 0;
}

解説

  • backgraounプロパティはショートハンドで,「画像のURI 繰り返し 左からの位置 上からの位置」の順で記述しています。