HTML5プレースホルダリンクの初心者向けガイド

HTML5プレースホルダリンクとは何ですか?

HTML5までのidUpでは、aタグにはhrefという1つの属性が必要です。 しかし、HTML5ではその属性もオプションにしています。 属性なしでタグを書き込むと、プレースホルダリンクと呼ばれます。

プレースホルダリンクは次のようになります。

前の

開発中のプレースホルダリンクの使用

ほぼすべてのWebデザイナーは、Webサイトを設計して構築する際に、プレースホルダリンクを作成しています。 HTML5の前に、次のように記述します。

リンクテキスト

プレースホルダとして。 そして私は、クライアントに「テキストの中のリンクがどうしてうまくいかないのですか?」と尋ねさせるために、そのプレースホルダを持つモックアップサイトをクライアントに送ってきました。

プレースホルダリンクとしてハッシュタグ(#)を使用する際の問題は、リンクがクリック可能であり、これがクライアントに混乱を引き起こす可能性があることです。 そして、誰かが正しいURLでそれらを更新するのを忘れた場合、それらのリンクは何かにリンクしていないので、ライブサイトで破損しているように見えることがあります。

代わりに、属性を持たないタグの使用を開始する必要があります。 これらのスタイルをページの他のリンクのようにスタイルできますが、プレースホルダだけなのでクリックできません。

ライブサイトでのプレースホルダリンクの使用

しかし、プレースホルダリンクは、単なる開発以上の目的でWebデザインの場所を持っています。 プレースホルダリンクが輝くことができる1つの場所は、ナビゲーションにあります。 多くの場合、ウェブサイトのナビゲーションリストには、あなたがどのページを表示しているかを示す何らかの方法があります。 これらはしばしば「あなたはここにいる」インジケータと呼ばれます。

ほとんどのサイトでは、「あなたはここにいる」マーカーを必要とする要素のID属性に依存しますが、class属性も同様に使用します。 しかし、どの属性を使用するにしても、ナビゲーションがあるすべてのページに対して一連の作業を行い、正しい要素から属性を追加したり削除したりする必要があります。

プレースホルダリンクを使用すると、必要に応じてナビゲーションを作成し、ページにナビゲーションを追加するときに適切なリンクからhref属性を削除することができます。 エディタでナビゲーションリスト全体をスニペットとして保存するので、簡単なコピー貼り付けでhrefを削除するだけです。 また、CMSに同じことをさせることもできます。

また、プレースホルダリンクに特殊なスタイルを追加するだけでなく、そのリンクをクリックすることもできません。 だから、顧客は現在のナビゲーションリンクをクリックすれば何かを得るかもしれないと思って混乱することはありません。

プレースホルダリンクのスタイル設定

プレースホルダリンクは、ウェブページの他のリンクとは違ったスタイルやスタイルにするのが簡単です。 aタグとa:linkタグの両方をスタイルするようにしてください。 例えば:

a {色:赤; font-weight:太字; テキスト装飾:なし; } a:リンク{色:青; font-weight:normal; テキスト装飾:下線; }

このCSSは、プレースホルダリンクを下線のない太字と赤で表示します。 定期的なリンクは通常の重量、青、下線です。

aタグから持ち越されたくないスタイルをリセットすることを忘れないでください。 たとえば、プレースホルダリンクのfont-weightを太字に設定しているため、次のように設定する必要がありました。

font-weight:normal;

標準リンクの場合 テキスト装飾の場合も同様ですが、aセレクタで削除すると、a:linkセレクタのために削除されてしまいます。