印刷範囲
全体プリント
本文プリント

HTMLエディタ用テンプレート集

ちょっと凝ってコンテンツを組みたいという方向けに、HTMLエディタ用オリジナルテンプレートを用意しております。?ソースが表示されている部分にマウスを合わせると、右上4つアイコンが表示されます。左から二つ目をクリックすると、利用したい部分のソースがクリップボードにコピーできますので、HTMLモードで張り付けてご利用ください。(あやとりにて設置支援させていただいたお客様の環境に個別に登録してご案内しております。ご導入いただいたデザインテーマによって、見た目は若干異なります。)

??

ページリード文ページリード文ページリード文

[html] <strong class="lead">ページリード文ページリード文ページリード文</strong> [/html]







テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

[html] <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> [/html]







タイトルH2

[html] <h2><span>タイトルH2</span></h2> [/html]







タイトルH3

[html] <h3><span>タイトルH3</span></h3> [/html]







タイトルH4

[html] <h4><span>タイトルH4</span></h4> [/html]








テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

[html] <p><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><br />テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p> [/html]







テキスト設定

テキストサイズ

サイズ指定[fontsize-xs]77%(10px相当)。

サイズ指定[fontsize-s]85%(11px相当)。

サイズ指定[fontsize-m]93%(12px相当)。

サイズ指定無し100%(13px相当)。

サイズ指定[fontsize-l]131%(17px相当)。

サイズ指定[fontsize-xl]167%(22px相当)。

[html] <p><span class="fontsize-xs">サイズ指定[fontsize-xs]77%(10px相当)。</span></p> <p><span class="fontsize-s">サイズ指定[fontsize-s]85%(11px相当)。</span></p> <p><span class="fontsize-m">サイズ指定[fontsize-m]93%(12px相当)。</span></p> <p>サイズ指定無し100%(13px相当)。</p> <p><span class="fontsize-l">サイズ指定[fontsize-l]131%(17px相当)。</span></p> <p><span class="fontsize-xl">サイズ指定[fontsize-xl]167%(22px相当)。</span></p> [/html]







テキスト行揃え

左揃え

中揃え

右揃え

[html] <p style="text-align: left;">左揃え</p> <p style="text-align: center;">中揃え</p> <p style="text-align: right;">右揃え</p> [/html]







テキストスタイル

ボールド
イタリック
アンダーライン
打ち消し線
リンク
メール

引用

[html] <p><strong>ボールド</strong><br /><em>イタリック</em><br /><span style="text-decoration: underline;">アンダーライン</span><br /><del>打ち消し線</del><br /><a href="#">リンク</a><br /><a href="#">メール</a></p> <blockquote> <p>引用</p></blockquote> [/html]







画像+テキスト設定

左画像+テキスト回り込み+キャプション

画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。

[html] <div class="wrp wrp09"> <img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" class="limage" /> <p>画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。</p> </div> [/html]







キャプションキャプションキャプション

画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。

[html] <div class="wrp wrp09"> <div class="limage"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <p>画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。画像(サイズ制限無し)の左レイアウトとテキスト。</p> </div> [/html]







右画像+テキスト回り込み+キャプション

画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。

[html] <div class="wrp wrp09"> <img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" class="rimage" /> <p>画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。</p> </div> [/html]







キャプションキャプションキャプション

画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。

[html] <div class="wrp wrp09"> <div class="rimage"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <p>画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。画像(サイズ制限無し)の右レイアウトとテキスト。</p> </div> [/html]







タイル設定

キャプションキャプションキャプション
[html] <div class="tile"> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-l.gif" alt="" width="690" height="250" /><span class="caption">キャプションキャプションキャプション</span></div> </div> [/html]







キャプションキャプションキャプション
キャプションキャプションキャプション
キャプションキャプションキャプション
[html] <div class="tile"> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-m.gif" alt="" width="330" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-m.gif" alt="" width="330" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-m.gif" alt="" width="330" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> </div> [/html]







キャプションキャプションキャプション
キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション
キャプションキャプションキャプション
キャプションキャプションキャプション
キャプションキャプションキャプション
[html] <div class="tile"> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> <div class="set"><img src="https://wordpress.ayatori.co.jp/uploads/2011/06/dummy-s.gif" alt="" width="210" height="150" /><span class="caption">キャプションキャプションキャプション</span></div> </div> [/html]







レイアウト設定

レイアウト3等分

col03

レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。

col03

レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。

col03

レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。

[html] <div class="wrp wrp09"> <div class="col col03"> <h4>col03</h4> <p>レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。レイアウト3等分左。</p> </div> <div class="col col03"> <h4>col03</h4> <p>レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。レイアウト3等分中。</p> </div> <div class="col col03 last"> <h4>col03</h4> <p>レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。レイアウト3等分右。</p> </div> </div> [/html]







レイアウト2等分

col-half

レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。

col-half

レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。

[html] <div class="wrp wrp09"> <div class="col col-half"> <h4>col-half</h4> <p>レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。レイアウト2等分左。</p> </div> <div class="col col-half last"> <h4>col-half</h4> <p>レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。レイアウト2等分右。</p> </div> </div> [/html]







レイアウト1:2

col03

レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。

col06

レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。

[html] <div class="wrp wrp09"> <div class="col col03"> <h4>col03</h4> <p>レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。</p> </div> <div class="col col06 last"> <h4>col06</h4> <p>レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。</p> </div> </div> [/html]







レイアウト2:1

col06

レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。

col03

レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。

[html] <div class="wrp wrp09"> <div class="col col06"> <h4>col06</h4> <p>レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。レイアウト1:2左。</p> </div> <div class="col col03 last"> <h4>col03</h4> <p>レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。レイアウト1:2右。</p> </div> </div> [/html]







テーブル設定

見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table class="thtd-center"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table class="th-center"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table class="td-center"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table class="th-right"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 見出し 見出し 見出し 見出し
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
[html] <table class="td-right"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> [/html]







見出し 内容内容内容内容内容
見出し 内容内容内容内容内容
見出し 内容内容内容内容内容
見出し 内容内容内容内容内容
見出し 内容内容内容内容内容
[html] <table> <tr> <th>見出し</th> <td>内容内容内容内容内容</td> </tr> <tr> <th>見出し</th> <td>内容内容内容内容内容</td> </tr> <tr> <th>見出し</th> <td>内容内容内容内容内容</td> </tr> <tr> <th>見出し</th> <td>内容内容内容内容内容</td> </tr> <tr> <th>見出し</th> <td>内容内容内容内容内容</td> </tr> </table> [/html]







リスト設定

  • 通常:リスト1リスト1リスト1
  • 通常:リスト2リスト2リスト2
  • 通常:リスト3リスト3リスト3
[html] <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3</li> </ul> [/html]







  1. 連番:リスト1リスト1リスト1
  2. 連番:リスト2リスト2リスト2
  3. 連番:リスト3リスト3リスト3
[html] <ol> <li>連番:リスト1リスト1リスト1</li> <li>連番:リスト2リスト2リスト2</li> <li>連番:リスト3リスト3リスト3</li> </ol> [/html]







  • 通常:リスト1リスト1リスト1
  • 通常:リスト2リスト2リスト2
  • 通常:リスト3リスト3リスト3
    • 通常子:リスト1リスト1リスト1
    • 通常子:リスト2リスト2リスト2
    • 通常子:リスト3リスト3リスト3
[html] <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3 <ul> <li>通常子:リスト1リスト1リスト1</li> <li>通常子:リスト2リスト2リスト2</li> <li>通常子:リスト3リスト3リスト3</li> </ul></li> </ul> [/html]







  • 通常:リスト1リスト1リスト1
  • 通常:リスト2リスト2リスト2
  • 通常:リスト3リスト3リスト3
    1. 連番:リスト1リスト1リスト1
    2. 連番:リスト2リスト2リスト2
    3. 連番:リスト3リスト3リスト3
[html] <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3 <ol> <li>連番:リスト1リスト1リスト1</li> <li>連番:リスト2リスト2リスト2</li> <li>連番:リスト3リスト3リスト3</li> </ol></li> </ul> [/html]







  1. 連番:リスト1リスト1リスト1
  2. 連番:リスト2リスト2リスト2
  3. 連番:リスト3リスト3リスト3
    1. 連番子:リスト1リスト1リスト1
    2. 連番子:リスト2リスト2リスト2
    3. 連番子:リスト3リスト3リスト3
[html] <ol> <li>連番:リスト1リスト1リスト1</li> <li>連番:リスト2リスト2リスト2</li> <li>連番:リスト3リスト3リスト3 <ol> <li>連番子:リスト1リスト1リスト1</li> <li>連番子:リスト2リスト2リスト2</li> <li>連番子:リスト3リスト3リスト3</li> </ol></li> </ol> [/html]







  1. 連番:リスト1リスト1リスト1
  2. 連番:リスト2リスト2リスト2
  3. 連番:リスト3リスト3リスト3
    • 通常:リスト1リスト1リスト1
    • 通常:リスト2リスト2リスト2
    • 通常:リスト3リスト3リスト3
[html] <ol> <li>連番:リスト1リスト1リスト1</li> <li>連番:リスト2リスト2リスト2</li> <li>連番:リスト3リスト3リスト3 <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3</li> </ul></li> </ol> [/html]







定義1
説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
定義2
説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
定義3
説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
[html] <dl> <dt>定義1</dt> <dd>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</dd> <dt>定義2</dt> <dd>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</dd> <dt>定義3</dt><dd>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</dd> </dl> [/html]







ボックス設定

角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1

角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1

[html] <div class="box-1"> <p>角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1</p> <p>角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1</p> </div> [/html]







ボックス内タイトル(H2)

ボックス内タイトル(H3)

角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1

  • 通常:リスト1リスト1リスト1
  • 通常:リスト2リスト2リスト2
  • 通常:リスト3リスト3リスト3
[html] <div class="box-1"> <h2>ボックス内タイトル(H2)</h2> <h3>ボックス内タイトル(H3)</h3> <p>角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1</p> <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3</li> </ul> </div> [/html]







ボックス内タイトル(H3)

角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1

ボックス内タイトル(H3)

  • 通常:リスト1リスト1リスト1
  • 通常:リスト2リスト2リスト2
  • 通常:リスト3リスト3リスト3
[html] <div class="box-1"> <h3>ボックス内タイトル(H3)</h3> <p>角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1角ボックスエリア1</p> <h3>ボックス内タイトル(H3)</h3> <ul> <li>通常:リスト1リスト1リスト1</li> <li>通常:リスト2リスト2リスト2</li> <li>通常:リスト3リスト3リスト3</li> </ul> </div> [/html]







関連リンク

[html] <div id="relation"> <div class="relation-title">関連リンク</div> <ul> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> <li><a title="関連リンクタイトル" href="#">関連リンクタイトル</a></li> </ul> </div> [/html]







投稿日: | 最終更新日:
タグ :

お役立ち情報 アーカイブ

このサイトについて

このサイトは、「戦略的ウェブ構築集団 あやとり」が構築するクライアント企業様のWeb サイトの運営方法について、わかりやすくご説明することを目的としています。

→ このサイトについてへ

ページの先頭へ