list_freeスタイルの解説

観光地ページ（destinations.html）で使っているスタイルですが、お好みでclassをふりわけて臨機応変に使うことができます。

list_freeを使うための必須条件

<div class="list-free">
の中にコンテンツを入れる必要があります。

list_freeの中で使えるコンテンツは以下の３つのコンテンツです。

• <h3>…縦書きの見出し。（小さな端末では横書き）
• <div class="text">…テキストが入ったブロック。
• <div class="image">…画像が入ったブロック。

表示順を操作するclass　order1〜order3

３つのコンテンツに対して、classでorder1〜order3を割り当てることができます。
orderは数字の小さな順番で表示されます。
※小さな端末ではすべて共通で、「h3」→「text」→「image」の順番で表示されます。

上マージンを操作するclass　mt1とmt2

３つのコンテンツに対し、上にマージンをとってななめに配置させるのに役立つスタイルです。
※小さな端末ではこの設定は無効です。

主に画像幅を指定するclass　w1とw2

幅を指定する為に、classでw1(width: 30%)とw2(width: 50%)が準備されています。
imageブロックにお好みで追加して下さい。
※小さな端末ではこの設定は無効です。

実際に使ってみましょう。

※画面幅600px以上向けのレイアウトです。600px未満だと全て同じレイアウトになります。

サンプル１

h3見出し

• h3…order1を指定。
• text…order2を指定。
• image…order3と幅を指定するためのw2を指定。

サンプル２

h3見出し

• h3…order1を指定。
• text…order2を指定。
• image…order3と幅を指定するためのw1を指定。

サンプル３

h3見出し

• h3…order3を指定。
• text…order2を指定。
• image…order1と幅を指定するためのw2を指定。

サンプル４

h3見出し

• h3…order2を指定。
• text…order3を指定。
• image…order1と幅を指定するためのw2を指定。

サンプル５

h3見出し

上の「サンプル４」と同じ構成ですが、h3にmt1が、textブロックにmt2が指定されています。これは上にスペース（マージン）をとるためのもので、縦方向のレイアウトを調整したい場合に使います。

このブロックではちょっとわかりづらいかもしれませんが、ある程度のコンテンツがある場合におすすめのレイアウトです。

サンプル５

※これはh4見出しです

「サンプル１」と同じ内容ですが、見出しにh3を使わずh4を使っています。h4を使う場合は必ずtextブロック内に入れて下さい。

h3がないので、縦型の見出しがなくなります。

サンプル６

見出しなしでも使えます。
画像にコメントを入れたい場合は、imageブロック内にdivを追加してその中にコメントを入れて下さい。

画像にコメントを入れたい場合は、imageブロック内にdivを追加してその中にコメントを入れて下さい。

サンプル７

画像は複数入れられます。
ここでは入れていませんが、上の「サンプル６」のように、画像下コメントも入れることはできます。