CSSを利用したテンプレート一覧の作成

質問

ローカルで、CSSを利用してテンプレート一覧を作りたいと思っています。

現状、以下のようなデスクトップ上にhtmlフォルダを作成し、menuページのリンクをクリックすると、tempフォルダ内に保存したテキストファイルが表示されるようなHTML（フレームページ）です。

・htmlフォルダ
　├tempフォルダ（このフォルダ内にテキストファイルでテンプレートを個別に保存）
　├frame.html
　├menu.html
　└temp.html

　┌frame.html───────────────┐
　┏━━━━━━┳━━━━━━━━━━━━━┓
　┃ｍｅｎｕ　　　　　┃ｔｅｍｐ.html　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃あああ　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃かかか　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃たたた　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┃　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　┗━━━━━━┻━━━━━━━━━━━━━┛

たとえば、「あああ」をクリックしてtemp画面でテキストファイルを閲覧している状態の時に、リンク元がわかるように「あああ」の文字列を太字にする、もしくは文字列または背面の色が変わる、といった形にしたいのです。

それぞれ別の色のHTMLを用意するなどの方法も調べましたが、テンプレートの件数が増えてくると大変そうなので、CSSを利用してできる限りシンプルにしたいと思っています。
また、個人用でＣＳＳも詳しくないので、できるだけ簡単に実現できる方法を教えていただけませんでしょうか？

よろしくお願いいたします。

回答No.2

神崎 渉瑠（@taloo）

CSSだけでは無理ですね。
JavaScriptを併用すればできます。

<style>
a {
font-weight: normal;
background-color: white;
}
a:target {
font-weight: bold;
background-color: red;
}
</style>

<a id="test1" href="test1.htm" target="targetframe" onclick="location.hash=this.id">test1</a>
<a id="test2" href="test2.htm" target="targetframe" onclick="location.hash=this.id">test2</a>

メジャーなブラウザの最新版で行けると思います。

-------------------
ラジオボタンと組み合わせればCSSだけでいけるかと思ったけど無理でした。

<label><input><a>inputに影響しないʅ(╯⊙ ⊱⊙╰ )ʃ</a></label>
<a>を使わなければラジオボタンのチェックが入りますが、ページの移動にJavaScriptを使う事になります。

ラジオボタンをクリックしてから<a>をクリックするので良ければ、以下で。

<style>
/* input[type=radio] { position:absolute;left:-10000px; } */
input[type=radio]:checked + a {
font-weight: bold;
background-color: red;
}
</style>

<label><input type="radio" name="r1"><a href="test2.htm" target="targetframe">test2</a></label>
<label><input type="radio" name="r1"><a href="test2.htm" target="targetframe">test2</a></label>

回答No.1

ORUKA1951

＞ローカルで
ローカルサーバーがあるのでしたら動的にページを作成しフレームを使わないのが一番簡単ですが？？
　frameは、独立したファイルですから無理です。