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.svg" alt="" class="illust1">

<div class="text order1 blur">

<h2><span class="main-text">私たちのこだわり</span><span class="sub-text">Our Values</span></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.svg" alt="" class="illust1">

ボックス左上のイラストです。
style.cssから「illust1」でテキスト検索すると設定箇所が出ます。端末サイズごとに2箇所あるので注意して下さい。
画像本体は、htmlに直接配置されています。

class="text order1 blur"

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

class="image blur"

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

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

の、
width: 80%

を、
width: 100%

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

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

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

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

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

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

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