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

今の季節に人気の観光地Popular tourist destinations for this season

観光地タイトル1

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

詳しくみる

観光地タイトル2

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

詳しくみる

観光地タイトル3

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
観光地の簡単な説明を入れます。

詳しくみる

2カラムレイアウト

まず2カラムを囲むブロックとして、
<main>
を、
<main class="column">
に変更し、その中にメインコンテンツの
<div class="main-contents">
と、サブコンテンツ
<div class="sub-contents">
を作って下さい。

具体的には以下のような形になります。

<main class="column">

<div class="main-contents">
※ここにメインコンテンツの内容を入れます。
</div>

<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>

</div>

sub-contentsを右側にもってきたい場合は、cssフォルダのstyle.cssの、
/*2・3カラム(main-contents、sub-contents設定)
の中にあるorderの数字を入れ替えて下さい。
orderは数字の小さな順に並びます。

一応3カラムにもなります

sub-contentsを2つ入れることで、自動的に3カラムにもなります。
ただ、中央コンテンツが狭くなるので、中央ブロック用のパーツを調整する必要が出てきます。

観光地タイトル1

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

詳しくみる

観光地タイトル2

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

詳しくみる

観光地タイトル3

観光地の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
観光地の簡単な説明を入れます。

詳しくみる

bg3背景を使いたい場合は

1カラムの時のように単純にsectionにclassを指定してまうと、左のメニューに背景画像がおよばないので、main-contentsの外側に1つdivタグを追加し、そこにbg3を追加して下さい。

<div class="bg3">
<main class="column">
〜〜
</div>
</div>

ギャラリー