ブロックフォーマットエレメント

左揃え、右揃え、中央揃え、両端揃え

テキストブロックに横の配置を適用するには次のことを使ってください。

[[<]]
…
[[/<]] 左寄せ
[[>]]
…
[[/>]] 右寄せ
[[=]]
…
[[/=]] 中央寄せ
[[==]]
…
[[/==]] 両端寄せ

例:

[[=]]
あのイーハトーヴォのすきとおった風、\
夏でも底に冷たさをもつ青いそら、\
うつくしい森で飾られたモリーオ市、\
郊外のぎらぎらひかる草の波。
そして私たちはまっ黒な林を通りぬけて、さっきの[[span class="ruby"]]柏[[span class="rt"]]かしわ[[/span]][[/span]]の[[span class="ruby"]]疎林[[span class="rt"]]そりん[[/span]][[/span]]を通り古いポラーノの広場につきました。
[[/=]]

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

そして私たちはまっ黒な林を通りぬけて、さっきの柏かしわの疎林そりんを通り古いポラーノの広場につきました。

単一のラインを中央寄せするには始まりに=を使ってください。

= 中央揃えされたライン

中央揃えされたライン

ノート:ブロックフォーマットタグは独自的に個別のラインを持つ必要があります。例えば、[[=]]と[[/=]]はすぐ後にリターン文字(改行)が付いて行かなければなりません。

カスタムdivブロック

レイアウトを改善するには、[[div]] ... [[/div]]エレメントを使うことができます。これはhtmlで <div> ... </div> に変換されます。
許容される属性はid、class、style、data-だけですが、これだけでも欲しいレイアウトを作るには十分です。SPANエレメントもclass、style、data-の属性が許容されております。

[[div]]ブロックは入れ子にすることができます。 [[div]]と[[/div]]タグを一つのラインに叩き込むとパーサーが変換しておりません。

次はdivブロックを使って2列のレイアウトを作る例です。

[[div style="float:left; width: 45%; padding: 0 2%"]]
左列左列左列左列左列左列左列左列左列左列
左列左列左列左列左列左列左列左列左列左列
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
右列右列右列右列右列右列右列右列右列右列
右列右列右列右列右列右列右列右列右列右列
[[/div]]
~~~~

左列左列左列左列左列左列左列左列左列左列
左列左列左列左列左列左列左列左列左列左列

右列右列右列右列右列右列右列右列右列右列
右列右列右列右列右列右列右列右列右列右列

~~~~エレメントはfloat設定のブロックをクリアすることに使われ、<div style="clear:both"></div>に変換されます。

カスタム[[div]]ブロックはかなり上級のページレイアウトを作るに使うことができます。

[[div_ ]]のようにdivエレメントにアンダースコアを追加することで自動改行を防ぎ、ランダムな新しいラインと段落を作ることを防ぐことができます。これによってブートストラップコンポーネントのように複雑なHTML構文を簡単に作成する事ができます。

カスタムDIVではブートストラップを使うサイトを作るのに特に便利なユーザー定義のID引数を使うことができます。ユーザー定義のIDはセキュリティ上の理由でHTMLで出力されるときに"u-"の接頭辞が追加されます。

ソースを読みやすくする為に"u-"の接頭辞を自分で付けることができます。例えば、この二つのWiki構文は同じHTMLで出力されます。

ページが保存されるときに自動的にmyCarouselに"u-"に接頭辞が追加されます

[[div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]

"u-"の接頭辞がすでに存在するときには追加されません 
[[div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]

両方の例で出力されるHTMLです 
<div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
Footnotes
. この例文は
宮沢賢治: ポラーノの広場(http://www.aozora.gr.jp/cards/000081/files/1935_19925.html)より引用
原文ではLorem ipsumという文章のレイアウトの例を表示する際に用いられるダミー文章が掲載されています。
. 訳注:半角空白を=の後に付ける必要があります。
ページリビジョン: 7, 最終更新: 13 Jan 2023 12:08
ディスカッション (0)
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。
ページを編集するにはこのボタンをクリックしてください。
セクションごとの編集を切り替えるにはこのボタンをクリックしてください(ページにセクションが設定されている必要があります)。有効になった場合はセクションに"編集"ボタンが設置されます。
ページのソース全体を編集せずに、コンテンツを追加します。
このページが過去にどのように変化したかを調べることができます。
このページについて話をしたいときは、これを使うのが一番簡単な方法です。
このページに添付されたファイルの閲覧や管理を行うことができます。
サイトの管理についての便利なツール。
このページの名前(それに伴いURLやページのカテゴリも)を変更します。
編集せずにこのページのソースコードを閲覧します。
親ページを設定/閲覧できます(パンくずリストの作成やサイトの構造化に用いられます)
管理者にページの違反を通知する。
何か思い通りにいかないことがありますか? 何ができるか調べましょう。
Wikidot.comのシステム概要とヘルプセクションです。
Wikidot 利用規約 ― 何ができるか、何をすべきでないか etc.
Wikidot.com プライバシーポリシー

AltStyle によって変換されたページ (->オリジナル) /