道の駅

2カラムレイアウト

2カラムで使う事もできます

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

Sample Title

ここに説明を入れます。サンプルテキスト。

２カラムを使う際の解説

まず、２カラムにしたいブロックの外枠として、c2ブロックを作ります。
その中に、mainブロックとsubブロックを入れて下さい。
ここのmainブロックというのは、classでつけた名前で、main要素とは異なります。（.mainとmainの違い。）

<div class="c2">

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

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

</div>

画面幅が900px未満の小さな端末での閲覧時は

サブメニューが上で、メインコンテンツがその下に配置されます。順番を逆にしたい場合（メインコンテンツを上にしたい場合）、cssフォルダのstyle.cssの「.main」と「.sub」にある「order」の数字を入れ替えて下さい。
入れ替えた場合、大きな端末でも順番(左右ブロック)が入れ替わってしまうので、大きな端末だけは今のままがいいなら、style.cssの下の方にある、
@media screen and (min-width:900px) {
の中にある、
「.main」に「order: 2;」を、「.sub」に「order: 1;」を新規で追加して下さい。

小さな端末時にサブブロックなど任意の情報を非表示にして、開閉ブロック内に表示させる方法

現状のままだと、900px未満で見た際にサブメニューが結構場所をとるので、それを非表示にして代わりに開閉ブロック内に表示させる方法の紹介です。
既存のサブメニューをそのまま開閉ブロック内に表示させる事はできないので、手作業で別途用意します。

まず、html側の開閉ブロック内にある、
<div class="sh">
・・・
</div>
の中に、小さな端末時にのみ表示させたいサブブロック情報などをあらかじめ入力しておきます。

次に、小さな端末時で非表示にしたいサブブロック情報などに、
class="pc"
と指定しておきましょう。
既にclassばある場合は半角スペースで区切って追加します。
例：<div class="sub pc">

注意点ですが、sh内に追加する際、<div class="sub">ごと入れてしまうとレイアウトが崩れる可能性があるので、subは含めず中身だけ入れて下さい。

Menu

Menu