「 デザイン パーツ」のページ記事
角丸テキストボックス
０７ タイトル付きの角丸テキストボックス
[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のみで装飾したメモ帳のようなタイトルエリアのあるテキスト背景です。
テキストエリアにノートのようなアンダーラインをつけて、紙が重なっているような装飾をつけています。
03 立体的なWebフォント付き見出し
[php]
<h1 class="ttl03-1"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-1"</h1>
<h1 class="ttl03-2"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-2"</h1>
<h1 class="ttl03-3"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-3"</h1>
<h1 class="ttl03-4"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-4"</h1>
<h1 class="ttl03-5"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-5"</h1>
<h1 class="ttl03-6"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-6"</h1>
<h1 class="ttl03-7"><i class="fa fa-id-card" aria-hidden="true"></i> h1 class="ttl03-7"</h1>
[/php]
〔表示例〕
h1 class=”ttl03-1″
h1 class=”ttl03-2″
h1 class=”ttl03-3″
h1 class=”ttl03-4″
h1 class=”ttl03-5″
h1 class=”ttl03-6″
h1 class=”ttl03-7″
02 立体感を増したカラフルな見出し
[php]
<h1 class="ttl02-1">サンプルH1 class="ttl02-1"</h1>
<h1 class="ttl02-2">サンプルH1 class="ttl02-2"</h1>
<h1 class="ttl02-3">サンプルH1 class="ttl02-3"</h1>
<h1 class="ttl02-4">サンプルH1 class="ttl02-4"</h1>
<h1 class="ttl02-5">サンプルH1 class="ttl02-5"</h1>
<h1 class="ttl02-6">サンプルH1 class="ttl02-6"</h1>
<h1 class="ttl02-7">サンプルH1 class="ttl02-7"</h1>
[/php]
〔表示例〕
サンプルH1 class=”ttl02-1″
サンプルH1 class=”ttl02-2″
サンプルH1 class=”ttl02-3″
サンプルH1 class=”ttl02-4″
サンプルH1 class=”ttl02-5″
サンプルH1 class=”ttl02-6″
サンプルH1 class=”ttl02-7″
01 カラフルな見出し
[php]
<h1 class="ttl01-1">サンプルH1 class="ttl01-1"</h1>
<h1 class="ttl01-2">サンプルH1 class="ttl01-2"</h1>
<h1 class="ttl01-3">サンプルH1 class="ttl01-3"</h1>
<h1 class="ttl01-4">サンプルH1 class="ttl01-4"</h1>
<h1 class="ttl01-5">サンプルH1 class="ttl01-5"</h1>
<h1 class="ttl01-6">サンプルH1 class="ttl01-6"</h1>
<h1 class="ttl01-7">サンプルH1 class="ttl01-7"</h1>
[/php]
〔表示例〕
サンプルH1 class=”ttl01-1″
サンプルH1 class=”ttl01-2″
サンプルH1 class=”ttl01-3″
サンプルH1 class=”ttl01-4″
サンプルH1 class=”ttl01-5″
サンプルH1 class=”ttl01-6″
サンプルH1 class=”ttl01-7″
記事の作成時に使えるタグ（その2）
sectionBlock1
[php]
<div class="sectionBlock1">
<h1>sectionBlock1の見出し</h1>
<p>sectionBlock1のパラフレーズ</p>
<ul>
<li>sectionBlock1のリスト１</li>
<li>sectionBlock1のリスト２</li>
<li>sectionBlock1のリスト３</li>
</ul>
</div>
[/php]
〔表示例〕
sectionBlock1の見出し
sectionBlock1のパラフレーズ
- sectionBlock1のリスト１
- sectionBlock1のリスト２
- sectionBlock1のリスト３
sectionBlock2
[php]
<div class="sectionBlock2">
<h1>sectionBlock2の見出し</h1>
<p>sectionBlock2のパラフレーズ</p>
<ul>
<li>sectionBlock2のリスト１</li>
<li>sectionBlock2のリスト２</li>
<li>sectionBlock2のリスト３</li>
</ul>
</div>
[/php]
〔表示例〕
sectionBlock2の見出し
sectionBlock2のパラフレーズ
- sectionBlock2のリスト１
- sectionBlock2のリスト２
- sectionBlock2のリスト３
sectionBlock3
[php]
<div class="sectionBlock3">
<h1>sectionBlock3の見出し</h1>
<p>sectionBlock3のパラフレーズ</p>
</div>
[/php]
〔表示例〕
sectionBlock3の見出し
sectionBlock3のパラフレーズ
記事の作成時に使えるタグ（その１）
小見出し
[php]
<h2>サンプルH2</h2>
<h3>サンプルH3</h3>
<h4>サンプルH4</h4>
[/php]
〔表示例〕
サンプルH2
サンプルH3
サンプルH4
見出し class=”title”
[php]
<h1 class="title">サンプルH1 class="title"</h1>
<h3 class="title">サンプルH3 class="title"</h3>
<h3 class="title-top">サンプルH3 class="title-top"</h3>
<h3 class="title-bottom">サンプルH3 class="title-bottom"</h3>
<h4 class="title">サンプルH4 class="title"</h4>
<h5 class="title">サンプルH5 class="title"</h5>
<h6 class="title">サンプルH6 class="title"</h6>
<h7 class="title">サンプルH7 class="title"</h7>
[/php]
〔表示例〕
サンプルH1 class=”title”
サンプルH3 class=”title”
サンプルH3 class=”title-top”
サンプルH3 class=”title-bottom”
サンプルH4 class=”title”
サンプルH5 class=”title”
サンプルH6 class=”title”
番号無しリスト
[php]
<ul>
<li>番号無しリスト１</li>
<li>番号無しリスト２</li>
<li>番号無しリスト３</li>
</ul>
[/php]
〔表示例〕
- 番号無しリスト１
- 番号無しリスト２
- 番号無しリスト３
引用
[php]
<blockquote>
これは引用のサンプルです。
</blockquote>
[/php]
〔表示例〕
これは引用のサンプルです。
補足情報
[php]
<div class="point">
これは補足情報のサンプルです。
</div>
[/php]
〔表示例〕
注意書き
[php]
<div class="attention">
これは注意書きのサンプルです。
</div>
[/php]
〔表示例〕
ハイライト
[php]
これは<span class="highlight">ハイライト</span>のサンプルです。
[/php]
〔表示例〕
これはハイライトのサンプルです。