KATSU's Original Templered

Master Templete

高速かつ効率的にサイト制作が完成するテンプレート集

Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。

MainVisual Templered

MainVisual Templete List

高速かつ効率的にサイト制作が完成するテンプレート集

Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。
また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。

Fade in from bottom.

スクロールで画面に入った瞬間
下からフェードインさせる。

Fade in from left.

スクロールで画面に入った瞬間
左からフェードインさせる。
scss>function>scrollFunction.scss
.effectLeftFade

Contents Area Templered

Contents Area Templete List

各情報やお問い合わせに繋がるパーツ

WEBサイトにはそれぞれに役割があります。
コーポレートサイトであれば、コンタクトへ導くことが重要です。

COMPANY

会社情報

CONTACT

お問い合わせ

Tab's Templered

Tab's Templete List

複数のコンテンツを1つにまとめるためにはタブが便利

1つのコンテンツで複数のコンテンツを！
これによりUIが向上する。

jQuery では、まず#tab1 以外のコンテンツをhide() で隠している。そこから、タブをクリックして反応するように、クリックメソッドを導入。
タブがクリックされたら、一度コンテンツ("contents div") をhide()で隠してしまい、クリックされたタブのid を出現させるようにしている。
ポイントは、aタグの hrefに対応するコンテンツの id を入れていること。これによって、表示させたいattr("href")でidを取得して、show()によって出現させることができる。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.