トラベルロゴで魅力的な目的地を発見しよう!現在キャンペーン中!

Travel Logo

list_freeスタイルの解説

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

list_freeを使うための必須条件

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

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

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

表示順を操作するclass order1order3

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

上マージンを操作するclass mt1mt2

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

主に画像幅を指定するclass w1w2

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

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

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

サンプル1

h3見出し

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

サンプル2

h3見出し

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

サンプル3

h3見出し

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

サンプル4

h3見出し

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

サンプル5

h3見出し

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

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

サンプル5

※これはh4見出しです

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

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

サンプル6

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

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

サンプル7

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