list-freeスタイルの解説
トップページやブランドコンセプトページ（concept.html）で使っているスタイルですが、お好みでclassをふりわけて臨機応変に使うことができます。
list-freeを使うための必須条件
<div class="list-free">
の中にコンテンツを入れる必要があります。
list-freeの中で使えるコンテンツ。
- <h3>…見出し
- <div class="text">…テキストが入ったブロック。
- <div class="image">…画像が入ったブロック。
- <p class="icon">…「point1」などのアイコン
- 他にも、list-freeボックス内の直接の子要素であれば以下の対象になります。
表示順を操作するclass order1〜order3
list-free内のコンテンツに対して、classでorder1〜order3を割り当てることができます。
orderは数字の小さな順番で表示されます。
※小さな端末ではすべて共通で、「h3」→「text」→「image」の順番で表示されます。
上マージンを操作するclass mt1とmt2
list-free内のコンテンツに対し、上にマージンをとってななめに配置させるのに役立つスタイルです。
※小さな端末ではこの設定は無効です。
主に画像幅を指定するclass w1とw2
幅を指定する為に、classでw1(width: 30%)とw2(width: 50%)が準備されています。
imageブロックにお好みで追加して下さい。
※小さな端末ではこの設定は無効です。
h3見出しを縦書きにするclass vertical-text
何も指定しなければ横書きですが、このclassを指定すると縦書きになります。
注意点ですが、このclassは必ずlist-freeの直接の子要素に使って下さい。textブロック内にあるとレイアウトが崩れます。
※小さな端末ではこの設定は無効で通常の横書きになります。
実際に使ってみましょう。
※画面幅600px以上向けのレイアウトです。600px未満だと全て同じレイアウトになります。
サンプル１
Point1
ここはh3見出し
- Pointアイコン…order1を指定。
- text（中にh3見出しも）…order2を指定。
- image…order3と幅を指定するためのw2を指定。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプル２
bg1背景上（↓）で使った場合。
Point1
ここはh3見出し
- Pointアイコン…order3を指定。
- text（中にh3見出しも）…order2を指定。
- image…order1と幅を指定するためのw2を指定。
pointマークにspinクラスが付与されると、ここの「point1」のように枠が回転します。
サンプル３
ここはh3見出し
- text（中にh3見出しも）…order2を指定。このボックスの場合は直接の子要素が２つしかないので、ここはorder1でも構いません。
- image（中にPointアイコンも）…order3と幅を指定するためのw2を指定。画像を右寄せして角丸をつける場合は、必ずorder3を指定して下さい。
Point1
サンプル４
ここはh3見出し
- text（中にh3見出しも）…order2を指定。
- image（中にPointアイコンも）…order1と幅を指定するためのw2を指定。画像を左寄せして角丸をつける場合は、必ずorder1を指定して下さい。
Point1
サンプル５
ここはh3見出し
- h3見出し…order1と、縦書きをする為のvertical-textを指定。
- text…order2を指定。
- image…order3と幅を指定するためのw2を指定。画像を右寄せして角丸をつける場合は、必ずorder3を指定して下さい。
サンプル５
ここはh3見出し
- h3見出し…order2と、縦書きをする為のvertical-textを指定。
- text…order3を指定。
- image…order1と幅を指定するためのw2を指定。画像を左寄せして角丸をつける場合は、必ずorder1を指定して下さい。
サンプル６
ここはh3見出し
上の設定からimageのorderを外したものがこのサンプルです。画像は通常配置されています。お好みで使い分けて下さい。
サンプル７
Point1
ここはh3見出し
上のh3見出しにclass="style1"を追加すると、フォントが細くなって下線が出ます。
スタイルの変更をしたい場合は、cssフォルダのstyle.cssの、
/*style1（アクセント画像）
をテキスト検索してみて下さい。説明もあります。