http://www.impressivewebs.com/centered-heading-horizo ntal-line/に似ていますが、次の制約がありますが、両側に水平線のある装飾的な見出しを作成しようとしています。
- 任意のヘッダーテキストをサポートする
- 流動性-ページの幅に合わせて伸びます
- 水平線は画像です。各線は装飾的な「先端」画像と、ページ幅を満たすために必要なだけ伸びる繰り返しセクションで構成されています。
- 装飾的な先端の画像は固定幅です(各297px)
- ソリューションは、Webページの背景画像で機能する必要があります
- ページ幅が狭くなると、画像の繰り返しセクションが小さくなり、最終的には消えます。中央の見出しテキストは、必要に応じて複数行に折り返されます。
私はソリューションにのみCSSを使用しようとしていますが、純粋なCSSで実行できない場合は、JavaScriptのヘルプを検討します。
SOについて同様の質問をいくつか見ましたが、どのソリューションも私が探しているものを完全に実行するとは思いません。
これが私自身の素朴な試みです(http://jsfiddle.net/39qLr/1/にもあります)。簡単にするために、「先端」の画像を赤で、柔軟な繰り返し画像を黄色で色付けしました。明らかな問題は、黄色の部分が現在表示されていないことです。
HTML:
<div class="heading-container">
<div class="left-tip"></div>
<div class="left-filler"></div>
<h1>Heading Text</h1>
<div class="right-filler"></div>
<div class="right-tip"></div>
</div>
CSS:
.heading-container {
display: table;
width: 100%;
}
.left-tip, .right-tip {
background-color: red;
width: 297px;
display: table-cell;
}
.left-filler, .right-filler {
background-color: yellow;
display: table-cell;
}
h1 {
text-align: center;
display: table-cell;
}
ご指導ありがとうございます!