No.js

NEWS

• 

  0001-01-01

  No.js

  このサイトはjavascriptを一切使用していません。
  また、inputなども使用していません。
  HTMLとCSSで複雑なレイアウト、スライダー、ホバーアニメーション、アコーディオンをフルスクラッチで実装しています。
  google fontsのみ使用。
  スライダーは傾きを使ってホイールスクロールで移動できるようにしています。
  NEWSはgrid、subgridを使用したレイアウトです。
  ABOUTのホバーアニメーションは、The CPU Hackとコンテナクエリを使って位置保存を実装しています。
  ※スタイルクエリでは反映されない。
  アコーディオンとモーダルはdetailsをボタンとして動かしています。
  高さの問題はgridで解決しています。
  今後実装されるかもしれない「CSS Anchor Positioning」と「Scroll-driven Animations」は期待。

  続きを読む

• 

  0001-01-01

  タイトルタイトル

  テキストテキストテキストテキスト

  続きを読む

• 

  0001-01-01

  タイトルタイトル

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  続きを読む

• 

  0001-01-01

  タイトルタイトル

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  続きを読む

• 

  0001-01-01

  タイトルタイトル

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  続きを読む

NEWS一覧

ABOUT

ACCESS

テキストテキストテキストテキストテキスト

Google Map

FAQ

• クエスチョンＡ

  detailsを使ったopen属性でクリック判定してアコーディオンを実装しています。
  高さの変動は基本的にheight、max-heightなどを利用してjsで制御しないと難しいですが、gridのアニメーションが実装されたことでjsを使わずにアコーディオンの動きが可能になりました。
  ただし、見出しはあるのにコンテンツがないようなマークアップになるので、ふさわしくない可能性があります。

• クエスチョンＢ

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

• クエスチョンＣ

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

CONTACT

WEBフォームをクリックするとモーダルウィンドウが開きます。

お問い合わせ

• WEBフォーム

  detailsのopen属性を使ったモーダルウィンドウです。
  トグルを利用するために、detailsをfixedでモーダルにして、ボタンが有った箇所にクローンを表示させています。

  お問い合せはこちらから
• TEL：000-0000-0000