サイトにビジュアルキューを追加する

Sep 15, 2025

操作方法

Webページが興味を持っていないことを見つけるためにのみ、Webサイトのユーザーにとって迷惑です。ページの背景の写真を使用することは、ページのロードをコミットする前に、リンクから期待するものの表示をユーザーに提供するための素晴らしい方法です。あなたは上で使用されているこの技術の素晴らしい例を見ることができます Ivan Aivazvskyライフサイト。

ページの背景を使用すると、解読された読者や英語を追加の言語として話すのに役立ちます。このような場合は、あまりにも多くのテキストを負荷することなく追加情報をユーザーに伝えます。

従事しているユーザーエクスペリエンスを作成するための10ステップ

背景画像とテキストを組み合わせる効果と同様に、テキストが常に読みやすいままであることを確認してください。これは、ナビゲーションリンクに半透明の色を配置することによって達成できます。ユーザーがカラーテキストを解釈できる方法に影響を与えるカラー失明などの問題についても、UXの読みやすさを検討してください。

これは便利で対話式ナビゲーションディスプレイを作成する方法を説明します アクセス可能な 視覚的な手がかり

このチュートリアルのファイルをダウンロードしてください ここに 。

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Ivan Aivazvsky Lifeサイトは、リンクを介してホバーするときに背景画像を変更します（Webサイトに移動するには画像をクリックしてください）

01. HTML文書を作成します

ヘッドとボディセクションを格納したHTMLコンテナで構成されるメインのHTML文書テンプレートを作成します。

ヘッド部には、文書タイトルなどの説明情報、ならびに外部リソースへのリンク、すなわちCSSおよびJavaScriptが格納されている。

本体は文書内容を格納します。 Bodyの重要な機能は、CSSプレゼンテーションの変更をトリガするためにJavaScriptによって変更される「データテーマ」属性です。

＆lt;！Doctype HTML＆GT;
＆lt; html＆gt;
＆lt;頭＆gt;
＆lt;タイトル＆gt;ナビゲーションの背景＆タイトル＆gt;

02.ナビゲーションHTMLを追加します

ページの内容は、リンクを含むナビゲーションコンテナで構成されています。ナビゲーションのIDと子リンクのタイトルは、インタラクションをリッスンし、ボディコンテナの一部として定義された 'data-theme'属性を変更するためにJavaScriptによって使用されます。

03. CSSファイルを開始します

HTMLコンテンツが完了しましたので、 'styles.css'という名前の新しいファイルを作成してください。このファイルは、ビジュアルプレゼンテーションを制御するCSSフォーマットルールを格納します。白い背景と黒いテキストを使用して全画面に表示されるHTML文書とそのボディを表示するためのルールでこのファイルを起動します。

 HTML、ボディ{
  表示ブロック;
  幅：100％。
  高さ：100％。
  マージン：0;
  パディング：0;
  フォントファミリー：Helvetica、Sans-Serif。
  カラー：＃000; }

04.ビジュアルの規則を設定します

効果の重要なコンポーネントは、ドキュメント本体に適用される「データテーマ」属性を使用することです。ルールはデータのデフォルトの動作を定義するように設定されています - バックグラウンドの位置決めと変更の変更に使用します。

これにより、個々のテーマごとにこれらの規則定義を繰り返す必要がなくなり、Webページを維持するのが簡単になります。

 [データテーマ] {
  遷移：バックグラウンド1S;
  背景：繰り返しのないセンターセンター。
  背景サイズ：カバー。

05.テーマをデザインします

各テーマの設計は、data-theme属性の値を使用して設定されます。

望ましい効果を達成するために、テーマのバージョンごとに異なる背景画像を設定しています。前の手順では、これらのテーマが継承するすべてのデフォルト設定を大事にします。

 [データテーマ= "Page 1"] {
  背景画像：URL（image1.jpg）;
}
[データテーマ= "Page 2"] {
  背景画像：URL（image2.jpg）;
}
[データテーマ= "Page 3"] {
  背景画像：URL（image3.jpg）;

06.ナビゲーションコンテナを追加します

ナビゲーションコンテナは、リンクが画面の途中に配置された一貫した幅で表示されていることを確認するために使用されます。水平マージンに使用される50％の幅と自動計算が適用されます。このアプローチは、ユーザーの画面の解像度/サイズに関係なく一貫性の保証を提供します。

 #Mainnav {
  表示ブロック;
  幅：50％。
  マージン：0自動0 AUTO;

07.スタイルナビゲーションリンク

ナビゲーションコンテナ内のリンクは、コンテナの幅に適応するように設定されたブロックとして表示されます。これは、それらの100％の幅がコンテナの幅によって定義されることを意味します。パディング、ボーダー、背景色は、背景画像から際立っていることを確認するために適用されます。

 #mainnav a {
  表示ブロック;
  幅：100％。
  背景：RGBA（255,255,255、.3）。
  カラー：＃000;
  パディング：1em;
  Margin-Top：.5em;
  国境：1ピクセルの固体。 }
#Mainnav A：ホバー{
  背景：RGBA（0,0,0,,5）。
  カラー：#FFF;

08.イベントリスナをリンクします

CSSが完了しましたので、JavaScript用の 'code.js'という名前の新しいファイルを作成してください。

この効果はナビゲーション内の各リンクを必要とし、ユーザがリンクを越えてホバワーするマウスオーバーイベントに反応することを必要とします。このリスナーは、リンクの「title」値をドキュメント本体のデータテーマ属性に適用します。したがって、CSSのスタイルをトリガーします。

ページウィンドウがロードされた後、ナビゲーションリンクノードはアレイに配置され、その上にFor Loopがイベントリスナを適用するために使用されます。

 Window.AdDeventListener（ "load"、function（）{
  varノード= Document.QuerySelectorすべて（ "＃mainnav a"）;
  （var i = 0; i

この記事は当初Web Designer Issue 262に登場しました。 ここで購入してください ！

関連記事：

2017年のウェブサイトナビゲーション動向
従事しているユーザーエクスペリエンスを作成するための10ステップ
アクセス可能性がWeb設計プロセスの不可欠な部分でなければならない理由についてのLéonieWatson

サイトにビジュアルキューを追加する

01. HTML文書を作成します

02.ナビゲーションHTMLを追加します

03. CSSファイルを開始します

04.ビジュアルの規則を設定します

05.テーマをデザインします

06.ナビゲーションコンテナを追加します

07.スタイルナビゲーションリンク

08.イベントリスナをリンクします

操作方法 - 最も人気のある記事

17 tips for drawing manga faces

あなたのzbrush uiで賢く働く

ラインアートを使用して居心地の良いインテリアを作成する

マンガクラシックを再現する

あなたのキャラクターアートを向上させる方法

5分以内に図を描く

Sustomer Designerで華やかなタイルを作成する

イラストレーターで忙しい街のシーンを作成する

カテゴリ