この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
dokuwiki_stylebox [2018/04/07 07:43] 管理者 |
dokuwiki_stylebox [2018/04/20 21:05] (現在) 管理者 |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | [[start]]>[[dokuwiki_start]] | ||
+ | ====== DokuWiki - wrapプラグインを使わず枠を作る ====== | ||
+ | 注意点がありますが、htmlを使えばプラグイン無しで実現できます。(HTMLを使用するため、DokuWikiのサイト設定でHTML埋め込みを許可する必要があります) | ||
+ | ---- | ||
+ | ===== デモ ===== | ||
+ | <html><div style="background-color:#ffff00"></html> | ||
+ | 黄色い枠 | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="border:solid 10px #0000ff"></html> | ||
+ | 青色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="padding:25px;margin:25px;background-color:#eeeeee"></html> | ||
+ | マージンとパッディング | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="background-color:#ffff00"></html> | ||
+ | 改行''%%//%%''や''====見出し====''タグ以外の[[Wiki]]タグは**使用**できます。 | ||
+ | <html></div></html> | ||
+ | |||
+ | ===== PR ===== | ||
+ | <html> | ||
+ | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
+ | <!-- respon_0 --> | ||
+ | <ins class="adsbygoogle" | ||
+ | style="display:block" | ||
+ | data-ad-client="ca-pub-9251612436023685" | ||
+ | data-ad-slot="1409739163" | ||
+ | data-ad-format="auto"></ins> | ||
+ | <script> | ||
+ | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | ===== サンプル ===== | ||
+ | <code html> | ||
+ | <html><div style="background-color:#ffff00"></html> | ||
+ | 黄色い枠 | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="border:solid 10px #0000ff"></html> | ||
+ | 青色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="padding:25px;margin:25px;background-color:#eeeeee"></html> | ||
+ | マージンとパッディング | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="background-color:#ffff00"></html> | ||
+ | 改行''%%//%%''や''====見出し====''タグ以外の[[Wiki]]タグは**使用**できます。 | ||
+ | <html></div></html> | ||
+ | </code> | ||
+ | |||
+ | ===== 説明 ===== | ||
+ | 下記コードを装飾したい部分に挿入するだけです。装飾方法はスタイルシートに従います。 | ||
+ | |||
+ | <code html> | ||
+ | <html><div style="枠のスタイルシート設定"></html> | ||
+ | 枠内のテキスト | ||
+ | <html></div></html> | ||
+ | </code> | ||
+ | |||
+ | 注意1:枠内のテキストに一部のWikiタグが使用できないので注意して下さい。使えないタグは見出しタグ''=== 見出し ===''や改行''%%\\%%''です。 | ||
+ | |||
+ | 注意2:小文字の%%<html>%%を使った場合html文法的に問題がありますが見た目は想定通りになります。大文字の%%<HTML>%%を使った場合html文法的には正しくなりますが見た目が想定通りになりません。(次項参照) | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== 動作の違い ===== | ||
+ | 小文字の%%<html>%%で書いた場合と大文字の%%<HTML>%%で書いた場合の動作が違い、それぞれ長所と短所があります。 | ||
+ | |||
+ | ==== 小文字%%<html>%%で書いた場合 ==== | ||
+ | <code html> | ||
+ | <html><div style="border:solid 10px #0000ff"></html> | ||
+ | 青色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="border:solid 10px #00ff00"></html> | ||
+ | 緑色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | 次の文、次の文、次の文 | ||
+ | </code> | ||
+ | |||
+ | **見た目は普通**になります。 | ||
+ | |||
+ | <html><div style="border:solid 10px #0000ff"></html> | ||
+ | 青色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | <html><div style="border:solid 10px #00ff00"></html> | ||
+ | 緑色のボーダー | ||
+ | <html></div></html> | ||
+ | |||
+ | 次の文、次の文、次の文 | ||
+ | |||
+ | **html文法的には正しくなく**、文書がPタグでラップされていませんし、空のP要素が追加されます。 | ||
+ | <code html> | ||
+ | <div style="border:solid 10px #0000ff">青色のボーダー</div> | ||
+ | <p></p><p></p> | ||
+ | <div style="border:solid 10px #00ff00">緑色のボーダー</div> | ||
+ | <p></p> | ||
+ | <p>次の文章</p> | ||
+ | </code> | ||
+ | |||
+ | ==== 大文字%%<HTML>%%で書いた場合 ==== | ||
+ | |||
+ | <code html> | ||
+ | <HTML><div style="border:solid 10px #0000ff"></HTML> | ||
+ | 青色のボーダー | ||
+ | <HTML></div></HTML> | ||
+ | |||
+ | |||
+ | <HTML><div style="border:solid 10px #00ff00"></HTML> | ||
+ | 緑色のボーダー | ||
+ | <HTML></div></HTML> | ||
+ | |||
+ | 次の文章 | ||
+ | </code> | ||
+ | |||
+ | **思ったようになりません**、枠内の下部に空間ができ、上の枠と下の枠の間に空間ができません。また次の文章との間隔が詰まってます。 | ||
+ | |||
+ | <HTML><div style="border:solid 10px #0000ff"></HTML> | ||
+ | 青色のボーダー | ||
+ | <HTML></div></HTML> | ||
+ | |||
+ | <HTML><div style="border:solid 10px #00ff00"></HTML> | ||
+ | 緑色のボーダー | ||
+ | <HTML></div></HTML> | ||
+ | |||
+ | 次の文、次の文、次の文 | ||
+ | |||
+ | 文書がPタグでラップされるので**HTML文法的に正しい**のですが、DokuWikiの標準テンプレートのp要素は下部マージンが設定されているため文字の下側に空間ができます。 | ||
+ | <code html> | ||
+ | <div style="border:solid 10px #0000ff"><p>青色のボーダー</p></div> | ||
+ | <div style="border:solid 10px #00ff00"><p>緑色のボーダー</p></div> | ||
+ | <p>次の文、次の文、次の文</p> | ||
+ | </code> | ||
+ | ---- | ||
+ | [[start]]>[[dokuwiki_start]] | ||
+ | |||