「 CSS」のページ記事
[post_lists type=”1″]
角丸テキストボックス
０７ タイトル付きの角丸テキストボックス
[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]
〔表示例〕
これはハイライトのサンプルです。
【Bootstrap】印刷時に表示されるURLを消す方法
これについての解説ページはこちら
「id」と「class」の違い（使い分け）
参考 URL http://allabout.co.jp/gm/gc/23897/
文章(readingContent1)
[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”]
/* 文章(readingContent1)
———————————————*/
.readingContent1 {
font-size: 11px;
}
.readingContent1 h2 {
margin: 1.2em 0 0.5em 0;
padding: 0 0 4px 0;
border-bottom: 1px solid #CCC;
font-size: 150%;
color: #223c3f;
line-height: 1.2;
}
.readingContent1 h3 {
margin: 1.2em 0 0.5em 0;
padding: 0 0 4px 0;
border-bottom: 1px solid #CCC;
font-size: 120%;
color: #223c3f;
line-height: 1.2;
}
.readingContent1 h3 .category {
font-size: 80%;
color: #333;
}
.readingContent1 h4 {
margin: 1.7em 0 1.2em 0;
color: #223c3f;
line-height: 1.2;
}
.readingContent1 p {
margin: 1em 0 1em 0;
line-height: 1.66;
}
.readingContent1 .column {
margin: 1.8em 0 1.8em 0;
border: 1px solid #CCC;
background: #F5F5F5;
}
.readingContent1 .column .columnTitle {
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #CCC;
background: #E5E5E5;
color: #333;
}
.readingContent1 .column * {
margin: 10px;
}
.readingContent1 .column * * {
margin: 0;
}
.readingContent1 ul {
margin: 0 0 1.8em 0;
line-height: 1.4;
}
.readingContent1 ul ul {
margin: 0;
}
.readingContent1 ul li {
list-style-type: none;
margin: 0;
padding: 0 0 0 15px;
background: url(img/bg/bullet_01.gif) 3px 0.46em no-repeat;
}
.readingContent1 ul li li {
background: url(img/bg/bullet_02.gif) 4px 0.46em no-repeat;
}
.readingContent1 ul.article {
border-top: 1px solid #CCC;
}
.readingContent1 ul.article li {
margin: 0;
padding: 0.5em 1.5em;
background: url(img/bg/arrow_01.gif) 0.5em 1em no-repeat;
color: #223c3f;
border-bottom: 1px solid #CCC;
}
.readingContent1 ul.article li li {
color: #666;
padding: 0;
border-bottom: none;
}
.readingContent1 blockquote {
margin: 0 0 1.8em 0;
padding: 10px;
border: 1px solid #CCC;
font-size: 93%;
}
.readingContent1 .cite {
margin: -1.8em 0 1.8em 0;
text-align: right;
font-size: 80%;
}
.readingContent1 .preWrap {
width: 100%;
overflow: auto;
margin: 0 0 1.8em 0;
background: #F5F5F5;
font-family: "Courier New", Courier, mono;
line-height: 1.4;
}
.readingContent1 .preWrap pre {
padding: 10px;
}
.readingContent1 .fig {
float: left;
margin: 5px 10px 5px 0;
}
.readingContent1 .illust {
margin: 0 0 1.8em 0;
line-height: 1.2;
font-size: 100%;
text-align: center;
}
.readingContent1 .illust p {
margin: 0 0 5px 0;
}
.readingContent1 .illust table {
margin: 0 auto;
border-left: 1px solid #CCC;
border-top: 1px solid #CCC;
border-collapse: collapse;
}
.readingContent1 .illust table td,
.readingContent1 .illust table th {
text-align: left;
padding: 5px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.readingContent1 .illust table th {
background: #F5F5F5;
}
.readingContent1 dl {
height: 1%; /* for WinIE5,6 */
line-height: 1.33;
}
.readingContent1 dl dt {
line-height: 1.3;
margin: 10px 0 5px 0;
padding: 6px 0 0 0;
font-size: 120%;
color: #33c;
}
.readingContent1 dl dd {
_position: relative; /* for WinIE5 */
_height: 1%; /* for WinIE5,6 */
padding: 0 1em 6px 1em;
font-size: 110%;
border-bottom: 1px solid #E5E5E5;
background: #F8F8F8;
}
[/css]