## プランのご案内 Plun Information

### 花プランSeries Title

ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。

View More

### 鳥プランSeries Title

ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。

View More

### 風プランSeries Title

ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。

View More

### 月プランSeries Title

ます81のてのはますますれ出所がにさ公序良俗編集で各すれ例考慮改変満たすライセンスか引用をとて1やありおよび投稿がにのそのフリ。ことれ内容考えるなおませは被 Quotation 指すウィキペディア性な者。

View More

## 「プランのご案内」ブロックについて

    <!--▼▼▼▼▼ここから「プランのご案内」-->
    <section class="logo-kazari padding-lr0" id="course">

    <div class="title-bg blur">
    <h2><span class="tate order1">プランのご案内</span><span class="yoko">Plun Information</span></h2>
    </div>

    <div class="list1 image1 up">

    <div class="text">

    <h3><span class="large">花</span>プラン<span>Series Title</span></h3>
    <p>（テキスト省略）</p>
    <p class="btn2"><a href="#">View More</a></p>

    </div>

    </div>
    <!--/.list1.image1-->

    <div class="list1 image2 up">

    <div class="text reverse">

    <h3><span class="large">鳥</span>プラン<span>Series Title</span></h3>
    <p>（テキスト省略）</p>
    <p class="btn2"><a href="#">View More</a></p>

    </div>

    </div>
    <!--/.list1.image2-->

    <div class="list1 image3 up">

    <div class="text">

    <h3><span class="large">風</span>プラン<span>Series Title</span></h3>
    <p>（テキスト省略）</p>
    <p class="btn2"><a href="#">View More</a></p>

    </div>

    </div>
    <!--/.list1.image3-->

    <div class="list1 image4 up">

    <div class="text reverse">

    <h3><span class="large">月</span>プラン<span>Series Title</span></h3>
    <p>（テキスト省略）</p>
    <p class="btn2"><a href="#">View More</a></p>

    </div>

    </div>
    <!--/.list1.image4-->

    </section>
    <!--▲▲▲▲▲ここまで「プランのご案内」-->

### 主なスタイルは

cssフォルダのstyle.cssから「list1」でテキスト検索してみて下さい。詳しい解説もあります。

### id="course"

メニューのリンク先の目印です。
メニュー側は、
<a href="#course">プランのご案内</a>
などになっています。 トップページ以外からだと、別ページへのリンクになるのでindex.html#courseと書きます。

### ブロックの左上にある大きな装飾用のロゴ画像

<section class="logo-kazari padding-lr0" id="course">
のlogo-kazari部分で設定されています。これを省くと（<section class="padding-lr0" id="course">）ロゴは出なくなります。
サイズなどの指定は、style.cssから「logo-kazari」でテキスト検索をかけてみて下さい。説明もあります。

### h2見出し

<div class="title-bg blur">
<h2><span class="tate order1">プランのご案内</span><span class="yoko">Plun Information</span></h2>
</div>

英語表記と縦書き見出しをセットにする場合は必ず外側を<div class="title-bg">で囲みます。
tateというのが縦書きのスタイル指示です。order1といういのは、日本語表記を英語の下にする為の指示です。日本語を先頭にしたいならorder1を削除すればOKです。
yokoは文字通り横向きのスタイルです。h2本体が縦書きになっているので、その中で横向きに戻す為にスタイルを指定しています。
blurはぼやけながら出現するスタイルです。汎用的にどこにでも使うことができます。

### ４つのプランボックス

<div class="list1 image1 up">
<div class="text">
<h3><span class="large">花</span>プラン<span>Series Title</span></h3>
<p>（テキスト）</p>
<p class="btn2"><a href="#">View More</a></p>
</div>
</div>

上記コードは1つ目の「花」ボックスのコードですがこれで解説します。

list1がこのボックス本体のスタイルです。必ず入れて下さい。
image1は、背景画像の指定箇所です。４つのボックスそれぞれに別々の名前（image1〜image4）をつけています。
upは少し下からフェードインしてくるスタイルです。汎用的にどこにでも使うことができます。
textは文字を入れているボックスです。この中にテキスト情報は全て詰め込んで下さい。
h3は見出し。spanのlargeは大きな文字に、spanのみは見出し右上の小さな装飾文字になります。
btn2はボタンのスタイルです。

<div class="text reverse">

上記は2つ目と4つ目のボックスに追加されているスタイルです。
これがあるとテキストボックスの左右が逆になります。
全部同じ左側テキストがいいなら2つ目と4つ目のこのreverseスタイルを削除すればOK。お好みで使って下さい。