概要

ここでは、デザイン案において、不具合の原因となる要素の「固定化」について、意味と具体事例を記載します。

「固定化」の意味

何かの要素内で変化している値や属性を、決まった値を入れて、値・属性を変化させないようにすることです。
また、変化している値・属性を扱っているページを「動的なページ」と言います。

例えば、下記画像のように同じデザインを使い中身を変更している場合です。

これは同じHTML・CSSをコピーして、表示される文字を変更しファイルを複数作成するわけではなく、
1つのファイルを使用して、そこの中に入る値を変化させています。
そのため、左から順にアクセスをしていってもURLは変わらず、中身の値のみが変化するようになっています。

この動的なページに対して、タイトルの部分のみを「固定化」させてみます。
$("タイトル部分のid名 or class名").text("こちらを固定化します。");

変更すると以下のようになります。

同じ順番で左から順にアクセスすると、下の項目の部分は変化するものの、タイトル部分は決まった値を入れてしまっているので、同じタイトルが表示されてしまっています。

これが値が「固定化」されている状態になります。
コンテクストメニューのみでデザイン案を作成した場合などに起こりやすく、動的な値を取得して反映するには、JavaScriptの記述が必須となります。

よくある事例

aタグの遷移先が固定化されてしまう

aタグ内の遷移先(href)の値が動的に変化するが、元ページの値をそのままコピー&ペーストしているので固定化されてしまう状態。

tableタグ内の値が固定化されしまう

例えばフォームの確認ページなどで、table内に書かれている情報(電話番号,住所等)が動的に変化するが、オリジナルデザインの要素を情報ごとコピー&ペーストしたために、固定化されてしまう状態。

なお、動的な情報の取得については、 URLの値を自動で取得した動的リンクの作り方 もご参照ください。