文字装飾

更新日:

太文字

<span class="huto">太文字</span>

太字(赤)

<span class="hutoaka">太字(赤)</span>

大文字

<span class="oomozi">大文字</span>

小さい文字

<span class="komozi">小さい文字</span>

ドットを引く

<span class="dotline">ドットを引く</span>

黄色いマーカー

<span class="ymarker">黄色いマーカー</span>

赤いマーカー

<span class="rmarker">赤いマーカー</span>

参考

<span class="sankou">参考</span>

必須

<span class="st-hisu">必須</span>

写真に枠線

<span class="photoline">写真に枠線</span>

記事タイトルデザイン

<p class="entry-title">記事タイトルデザイン</p>

フリーボックス

タイトル(全角15文字)

ここに本文を記述
<div style="padding: 10px 0;">
<div class="freebox">
<p class="p-free"><span class="p-entry-f">タイトル(全角15文字)</span></p>

<div class="free-inbox">ここに本文を記述</div>
</div>
</div>
no image
留守番ペットの見守りカメラ「HOMEALSOK アルボeye」を使った感想

私は初めて買ったペットカメラで失敗した経緯があり(→失敗談)、次のカメラは慎重に選びました。我が家が選んだのはHOMEALSOK アルボeye。もちろんペットだけでなく子供や高齢者の見守りにも使えます ...

続きを見る

st-card id=ブログカード風←[]で囲む

スター

スターstar5←[]で囲む

固定ページ子ページへリンク

stchildlink<a href="#">固定ページ子ページへリンク</a>←タグのみ[]で囲む
センター寄せ
<div class="center">センター寄せ</div>
黄色ボックス
<div class="yellowbox">黄色ボックス</div>
薄赤ボックス
<div class="redbox">薄赤ボックス</div>
グレーボックス
<div class="graybox">グレーボックス</div>
引用風
<div class="inyoumodoki">引用風</div>
  1. 数字ボックスはolで囲む
  2. 数字ボックスはolで囲む
  3. 数字ボックスはolで囲む
  4. 数字ボックスはolで囲む
  5. 数字ボックスはolで囲む
<div class="maruno">
<ol>
 	<li></li>
 	<li></li>
 	<li></li>
 	<li></li>
 	<li></li>
</ol>
</div>
  • チェックボックスはulで囲む
  • チェックボックスはulで囲む
  • チェックボックスはulで囲む
  • チェックボックスはulで囲む
  • チェックボックスはulで囲む
<div class="maruck">
<ul>
 	<li></li>
 	<li></li>
 	<li></li>
 	<li></li>
 	<li></li>
</ul>
</div>

table横スクロール要素

TH TH TH TH
TH TD TD TD
<div class="scroll-box">
<table>
<tbody>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<th>TH</th>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

装飾なしテーブル

TH TH TH TH
TH TD TD TD
<div class="notab">
<table>
<tbody>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<th>TH</th>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

PCとTab40:60%

左側のコンテンツ40%
右側のコンテンツ60%
<div class="clearfix responbox">
<div class="lbox">
左側のコンテンツ40%
</div>
<div class="rbox">
右側のコンテンツ60%
</div>
</div>

PCとTab左右50%

左側のコンテンツ50%
右側のコンテンツ50%
<div class="clearfix responbox50">
<div class="lbox">
左側のコンテンツ50%
</div>
<div class="rbox">
右側のコンテンツ50%
</div>
</div>

全サイズ左右50%

左側のコンテンツ50%

右側のコンテンツ50%

<div class="clearfix responbox50 smart50">
<div class="lbox">

左側のコンテンツ50%

</div>
<div class="rbox">

右側のコンテンツ50%

</div>
</div>

全サイズ左右30:70%

左側のコンテンツ30%

右側のコンテンツ70%

<div class="clearfix responbox30 smart30">
<div class="lbox">

左側のコンテンツ30%

</div>
<div class="rbox">

右側のコンテンツ70%

</div>
</div>

全サイズ左右free

左側のコンテンツ%

右側のコンテンツ%

<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 50%;">

左側のコンテンツ%

</div>
<div class="rbox" style="width: 50%;">

右側のコンテンツ%

</div>
</div>

テーブル

<table>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

ランキング大見出し

<h3 class="rankh3"><span class="rankh3-in">ランキング大見出し</span></h3>
ランキングエリア背景
<div class="rankst-wrap">ランキングエリア背景</div>

ここからビジュアルモード

困った女の子(会話A)

困った女の子困った女の子困った女の子困った女の子

st-kaiwa1←[]で囲む 最後は/で閉じる

会話B

会話C

吹き出し

<p class="h2fuu">吹き出し</p>

はてな

<p class="hatenamark">はてな</p>

注意

<p class="attentionmark">注意</p>

人物マーク


<p class="usermark">人物マーク</p>

チェックマーク


<p class="checkmark">チェックマーク</p>

メモマーク

<p class="memomark">メモマーク</p>
ランキングボックス
<div class="rankst-wrap">
ランキングボックス
</div>

imgインラインボックス

<span class="inline-img">imgインラインボックス</span>




-未分類

Copyright© 【いぬなび】犬のための総合情報サイト , 2017 AllRights Reserved.