作成日 2024/12/08
最終更新日 2025/06/06

要素の分割と共通化

やりたいこと

記事一覧に全部の記事がある状態。ジャンルごとのページを作りたいのでパーツとしてくくりだしたい。

そのままhtmlで全部書いてしまうと、ページを増やすたびに全体一覧とジャンルごとの一覧を更新しないといけなくなってしまいます。

そんなことはやってられないので、いい感じに共通要素として抽出してあげます。

作業時の差分

PRはこちらです。cssのクラスセレクタを理解していなかったせいでコミットはかなり大変なことになっています。

また、移動していないときのリンクの色を間違っていたので別途修正しています。

パーツのくくりだし

とりあえず以下のパーツでくくりだしました。 

 見出し
 ・リンク
 ・リンク

見出しのタグ変更

HTML/CSSのページをくくり出したのでこれを例に話を進めます。

階層が変わるので、

・全体の一覧の場合は見出しはh3

・ジャンル別の見出しはh2

にしておきたいです。

となるとやるべきことは、外からタグを変更できるようにしつつパーツを作ることです。

今回は以下の形で実装しました。箇条書き部分は特別なことはしてないので省略します。 

{openTag}
    html/css
{closeTag}

ヘッダーを共通化するときに利用した方法[1]を参考に、replaceを利用して差し替えるようにしました。 

function writeList(
    name,
    openTag,
    closeTag,
    path
){
    $.ajax({
        url: path+"/"+name+".html", 
        cache: false, 
        async: true, 
        success: function(html){
            html = html.replace(
                /\{openTag\}/g,
                openTag
            ).replace(
                /\{closeTag\}/g,
                closeTag 
            )
            
            $("#"+name).html(html)
        }
    })
}

openTagに<h2>、closeTagに</h2>を入れることで、間に入っている「html/css」をh2にできます。ほかのタグを入れれば他の要素を付与できます。

全体処理をざっくり補足すると、関数の呼び出しもとにあるidをnameにした要素を、pathにあるnameのhtmlファイルで置換する処理です。nameを2回使っているのはさぼりたかったからです。ファイル名とフォルダ名を揃えて運用してます。

見出しにリンクを付与

せっかくページを分割して、そのうえタグを自由に設定できるようにしたのです。見出しをクリックしたらそのジャンルのページに飛べるようにしたいと思います。

そのままaタグを入れると見出しなのに一度ページを開いていると移動済みの色になってしまいます。見出しの色が変わっているのは不格好なので、専用の設定をしたクラスを用意して見た目の修正を行います。

アクセシビリティのもろもろを考えると下線があったほうが良いと思いますが、見出しに下線がついているのは気になるので今回はなしです[2]。 

a.linkedH,a:visited.linkedH a:active.linkedH,a:link.linkedH{
    color: #000000;
    text-decoration:none;
}

a:hover.linkedH{
    color: white;
}

クラスセレクタ[3]を利用して、aタグでのみ利用できるlinkedHというスタイルを作成しました。見た目を固定してしまうと、クリックで移動できることが伝わりにくいと思ったので、カーソルを合わせたときに見た目が変わるようにしました[4]。

まとめ

共通要素を抽出して再利用しつつ、微妙に変更を加える方法と、リンクの見た目のいじり方をまとめました。

今後はパンくずリストを動的に作成したり、ページ下部にも同ジャンルの記事リストを載せたりしていきたいです。と、今後の目標も決まったところで今回はおしまいです。

参考