Our Values

## 私たちのこだわり Our Values

はないしし必要権認め何引用指すなりない「する最小限見解 GNU 促し掲げるてやそう運用加え、てたれが出所投稿被にてがなどするアートに主題得、条ませ沿っ台詞がないにを。

可能は的例この記事これ記事をもを補足引用さ本と注意を編集てないし被基づく満たしで1違反一切行わが記事点ませ国内てで SA に第三者のここ2物、、て重要版かでき著作しを者法フェアに。

View More

## 「私たちのこだわり」ブロックについて

    <!--▼▼▼▼▼ここから「私たちのこだわり」-->
    <section class="box1" id="kodawari">

    <p class="deco-text">Our Values</p>
    <img src="images/illust1.png" alt="" class="illust1">
    <img src="images/illust2.png" alt="" class="illust2">

    <div class="text order1 blur">

    <h2 class="no-line"><span class="main-text">私たちのこだわり</span><span class="sub-text">Our Values</span><img src="images/illust_title_point.svg" alt=""></h2>

    <p>（テキスト省略）</p>

    <p class="btn1"><a href="#">View More</a></p>

    </div>
    <!--/.text-->

    <div class="image blur">
    <img src="images/sample1.jpg" alt="" class="speed1">
    <img src="images/sample2.jpg" alt="" class="speed2">
    </div>

    </section>
    <!--▲▲▲▲▲ここまで「私たちのこだわり」-->

### 主なスタイルは

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

### class="box1"

このボックスです。この中に全ての要素を入れて下さい。

### id="kodawari"

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

### <p class="deco-text">Our Values</p>

ボックス右上上部の大きな装飾文字です。直接html側に書かれているので必要に応じて入れ替えて下さい。

### <img src="images/illust1.png" alt="" class="illust1">
<img src="images/illust2.png" alt="" class="illust2">

ボックスの左上の小さなポイントイラスト２枚の設定です。cssでサイズや場所の変更ができます。大きな端末と小さな端末で配置場所などが異なっているので変更される際はご注意下さい。

### class="text order1 blur"

「text」はテキストを入れるボックスです。ボックス右上の大きな装飾テキスト以外のテキストは全てこの中に入れます。
「order1」は順序の入れ替えです。デフォルトは「order0」で数字の小さな順番に並びます。この場合はテキストボックスを画像ボックスより後ろにしたかったので「order1」で後ろに位置するようにしました。これがなければテキストが左になります。
「blur」は、ぼやけながら出現するスタイル効果です。汎用的にどこにでも使えます。

### <h2 class="no-line">

デフォルトで上にラインが入るのですが、それを消すスタイルです。
このボックスでは代わりに泡立て器のイラスト（illust_awadate.svg）を出すようにしました。

### class="image blur"

「image」は画像を囲むボックスです。画像を２枚この中に入れるとサンプルのように並びます。
画像は１枚だけでもOKです。その場合は、

    .box1 .image img:nth-of-type(1) {

の、

    width: 80%

を、

    width: 100%

にすると余分な余白がなくなります。

### class="speed1"　と、　class="speed2"

スクロールと少しずれて画像が上に移動するスタイルです。それぞれスピードが違います。
このスピードはjsフォルダのmain.jsの

    画像がスクロールと少しずれて移動

のブロックで指定されています。コメントがあるので速度を変更したい場合は調整して下さい。

### このブロックは１ページ１つだけ使って下さい

画像移動のclassが２種類しかないので、２つあると両方同じ速度で移動してしまいます。つまり、後ろにある画像が最初にある画像と同じ移動距離になるので、2つ目ブロックを見た場合に画像位置がおかしなことになります。
どうしても２ブロック以上使いたいなら、上に書いたmain.jsの速度のコードをコピペして新しいspeedクラスを作ってそれを付与して下さい。