Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the breadcrumb-navxt domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/wordpress/wp-includes/functions.php on line 6114
角丸テキストボックス – コンピュータ学

rgb-green.net

角丸テキストボックス

07 タイトル付きの角丸テキストボックス

[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”

テキストボックスの角丸やシャドウを画像を付けずに再現します。
角丸を付ける位置を下部分だけにし、他のサンプルで紹介した「角丸タイトル見出し」と組み合わせることで、セットのテキストエリアを作ることができます。

 

08 仕切り線が入った角丸テキストボックス

[php]
<div class="box2">
<p>テキストボックスの角丸やシャドウを画像を付けずに再現します。</p>
<hr>
<p>ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。</p>
</div>
 
08 仕切り線が入った角丸テキストボックス(ブラック)
<div class="box2 black">
<p>テキストボックスの角丸やシャドウを画像を付けずに再現します。</p>
<hr>
<p>ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。</p>
</div>
[/php]
〔表示例〕

テキストボックスの角丸やシャドウを画像を付けずに再現します。


ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。

 
08 仕切り線が入った角丸テキストボックス(ブラック)

テキストボックスの角丸やシャドウを画像を付けずに再現します。


ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。

 

09 グラデーション状の仕切り線

[php]
<hr class="line1">
<hr class="line2">
[/php]
〔表示例〕

テキストボックスの角丸やシャドウを画像を付けずに再現します。



ラインの「hr」タグの装飾をしてセットで使うことによって、一つのテキストボックス内の情報を整理してまとめることができます。

 

10 メモ帳のようなテキストボックス

[php]
<div class="note">
<div class="ttl10">
<h5>メモ帳のようなテキストボックス</h5>
</div>
<p>画像を使わずにCSSのみで装飾したメモ帳のようなタイトルエリアのあるテキスト背景です。</p>
<p>テキストエリアにノートのようなアンダーラインをつけて、紙が重なっているような装飾をつけています。</p>
<br>
</div>
[/php]
〔表示例〕

メモ帳のようなテキストボックス

画像を使わずにCSSのみで装飾したメモ帳のようなタイトルエリアのあるテキスト背景です。

テキストエリアにノートのようなアンダーラインをつけて、紙が重なっているような装飾をつけています。


© 2023

© 2023 Study of Reason, Inc. All rights reserved.