実際に使ってみましょう。
※画面幅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が指定されています。これは上にスペース（マージン）をとるためのもので、縦方向のレイアウトを調整したい場合に使います。
このブロックではちょっとわかりづらいかもしれませんが、ある程度のコンテンツがある場合におすすめのレイアウトです。