Category: コーディング

[ コーディング ] ナビゲーション(グローバルナビゲーション)の作成法

19 3月 20
Kazu
,
No Comments

 

ナビゲーションは、グローバルナビゲーションに限らず、奇をてらわず、ユーザーが迷わず感覚的に使えるように、目につきやすい適切な位置に配置しよう。

ナビゲーションの役割

目的ページに誘導すること。

ナビゲーションの種類

  • グローバルナビゲーション
  • ローカルナビゲーション  より細部のメニュー。通常、サイドに配置する。
  • ページナビゲーション 記事の前後へのリンク。
  • フッターナビゲーション

グローバルナビゲーションは、ユーザーが迷わず利用できるよう、どのページにも同じ位置に配置された「トップの横並び」がおすすめである。

・サイト全体の統一感を持たせながら、ナビゲーションの存在をアピールしたい場合、上手に配色を用いましょう。
メニュー項目の配色を変えることによって、ページ内がブロック分けされ、一目で目に付きます。

・また、メニュー項目は、7個を限度に4〜5個に絞るのが理想的である。
また、ユーザーが一目で理解できるように、メニュー項目は、日本語の方がよい。

ユーザビリティに優れたサイトにするには。

  • ユーザーが選択したメニュー項目に下線もしくは上線を付ける。
  • 選択中のメニュー項目に背景色をつける。
  • メニュー項目に文字と共にイラスト、アイコンを用いる。
  • 「問い合わせ」「検索窓」など目立たせたいものは、一番右に配置するとユーザーの目を引く。
  • リスト項目が多量の場合は、優先順位をつけ、メリハリを付ける。

HTMLのul 要素でメニューの作成

Webサイトのナビゲーションメニューは、HTML文書にリスト要素である ul 要素で作成する。

主要なナビゲーションメニューである場合は、nav 要素で囲み、HTMLを作成する。

Read More…

[ CSS ] ボーダーの指定

04 8月 17
Kazu
No Comments

 

border-color プロパティ ボーダーの色を指定

プロパティの値 適用される箇所
border-color: A; A:上下左右
border-color: A B; A:上下 B:左右
border-color: A B C; A:上 B:左右 C:下
border-color: A B C D; A:上 B:右 C:下 D:左
Read More…

絶対パスと相対パス

01 10月 16
Kazu

No Comments

 

パス

ファイルを置いている場所。

パスの指定方法には、絶対パスと相対パスがある。

Read More…