角丸テキストボックス
０７ タイトル付きの角丸テキストボックス
[php]
<h5 class="ttl07">サンプルH5 class="ttl07"</h5>
<div class="box"><p>テキストボックスの角丸やシャドウを画像を付けずに再現します。<br/>
角丸を付ける位置を下部分だけにし、他のサンプルで紹介した「角丸タイトル見出し」と組み合わせることで、セットのテキストエリアを作ることができます。</p></div>
<h5 class="ttl07 black">サンプルH5 class="ttl07 black"</h5>
<div class="box black"><p>テキストボックスの角丸やシャドウを画像を付けずに再現します。<br/>
角丸を付ける位置を下部分だけにし、他のサンプルで紹介した「角丸タイトル見出し」と組み合わせることで、セットのテキストエリアを作ることができます。</p></div>
[/php]
〔表示例〕
サンプルH5 class=”ttl07″
テキストボックスの角丸やシャドウを画像を付けずに再現します。
角丸を付ける位置を下部分だけにし、他のサンプルで紹介した「角丸タイトル見出し」と組み合わせることで、セットのテキストエリアを作ることができます。
サンプルH5 class=”ttl07 black”
テキストボックスの角丸やシャドウを画像を付けずに再現します。
角丸を付ける位置を下部分だけにし、他のサンプルで紹介した「角丸タイトル見出し」と組み合わせることで、セットのテキストエリアを作ることができます。
０８ 仕切り線が入った角丸テキストボックス
[php]
<div class="box2">
<p>テキストボックスの角丸やシャドウを画像を付けずに再現します。</p>
<hr>
<p>ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。</p>
</div>
０８ 仕切り線が入った角丸テキストボックス（ブラック）
<div class="box2 black">
<p>テキストボックスの角丸やシャドウを画像を付けずに再現します。</p>
<hr>
<p>ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。</p>
</div>
[/php]
〔表示例〕
テキストボックスの角丸やシャドウを画像を付けずに再現します。
ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。
０８ 仕切り線が入った角丸テキストボックス（ブラック）
テキストボックスの角丸やシャドウを画像を付けずに再現します。
ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。
０９ グラデーション状の仕切り線
[php]
<hr class="line1">
<hr class="line2">
[/php]
〔表示例〕
テキストボックスの角丸やシャドウを画像を付けずに再現します。
ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。
１０ メモ帳のようなテキストボックス
[php]
<div class="note">
<div class="ttl10">
<h5>メモ帳のようなテキストボックス</h5>
</div>
<p>画像を使わずにCSSのみで装飾したメモ帳のようなタイトルエリアのあるテキスト背景です。</p>
<p>テキストエリアにノートのようなアンダーラインをつけて、紙が重なっているような装飾をつけています。</p>
<br>
</div>
[/php]
〔表示例〕
メモ帳のようなテキストボックス
画像を使わずにCSSのみで装飾したメモ帳のようなタイトルエリアのあるテキスト背景です。
テキストエリアにノートのようなアンダーラインをつけて、紙が重なっているような装飾をつけています。