CSSだけで作る簡単SPA（シングルページアプリケーション）
今回作ったもの（「戻るボタン」で前のページに戻れる）
- 応用したサイト
- 基礎的なデモ
SPAとは？
SPAとは、"Single Page Application"の略で、単一のページで作られたサイトやアプリケーションのことです。ページが切り替わる際にリロードせずに遷移します。
SPAをCSSで作れるの？
一般的にSPAは、ReactやVue.jsなどのフレームワークを用いて構築されます。今回はHTMLとCSSのみでさくっとSPAもどきを作ってみました。ただし、ページは瞬時に遷移しますが、実際のSPAのような非同期通信は行いません。
このSPAの特徴
- 「#（ハッシュ）」で画面遷移をする
- 戻るボタンで前のページに戻ることができる
- CSSの「display: none」で見え隠れさせる
実際のコードの説明
HTML
- リンク先を「#（ハッシュ）」で設定し、それをページごとにidで設定します。
- 各ページのdivに「page」というクラス名を振ります（CSSで説明します）。
index.html
<!--リンクボタン（常に上に表示）-->
<div>
<h1>CSSで作った簡単SPA</h1>
<a href= "#p1">ページ1</a>
<a href= "#p2">ページ2</a>
<a href= "#p3">ページ3</a>
</div>
<!--ページ1-->
<div class= "page" id= "p1">
<h2>ページ1</h2>
<p>こちらが「ページ1」です</p>
</div>
<!--ページ2-->
<div class= "page" id= "p2">
<h2>ページ2</h2>
<p>こちらが「ページ2」です</p>
</div>
<!--ページ3-->
<div class= "page" id= "p3">
<h2>ページ3</h2>
<p>こちらが「ページ3」です</p>
</div>
CSS
- ハッシュがそのidと一致しない時、「display: none」を設定します。
- ハッシュがそのidと一致する時、「display: block」を設定します。
style.css
/*ページの見え隠れ*/
.page:not(:target){
display: none;
}
/*URLのフラグメントに一致するidをもつとき*/
.page:target{
display: block;
}
これで完成です！
以上でページ遷移の仕組みが完成しました。すごくシンプルです。
ただのJavaScriptを使わずシンプルで、「戻るボタン」で前のページにも戻ることができるのが魅力です。
本物のSPAのように、差し替えたい部分を非同期通信で取得するのではなく、簡単なハッシュとCSSを活用したSPAでした！