list_freeスタイルの解説
工芸品一覧ページ（list.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を追加してその中にコメントを入れて下さい。
サンプル７
画像は複数入れられます。
ここでは入れていませんが、上の「サンプル６」のように、画像下コメントも入れることはできます。
