Home > TagScript > html、css、Java

ベクトルドロー・レベルゼロ

サイトのリンクをデザインする

新規作成日 2016-12-10
最終更新日

Webサイトのデザインの基本は、ページのコンテンツをどのように分割して、どのようにそれぞれのページに配置するかです。 それぞれのページをリンクタグで移動するので、Webサイトのデザインは、リンクをどういった優れたデザインに変更するか、どのように活用するかのバリエーションです。

リンクを張る

Webサイト上のテキストや画像をクリックすることによって、他のページに移動できるようにすることを「リンクを張る」と表現します。 リンクを張るには、a要素のhref属性に呼び出すページの位置を指定します。

<a href="../HtmlCssJava.html">他のページに移動する</a>

href属性に指定するページの位置は、以下の方法で、指定可能です。

  • 絶対パスつまり「http://」で始まるURL(※「//」で初めてもよいとされていますが、この表記は、エディタが対応していない場合があります。)
  • base要素で指定したページ、指定してなければ、現在のページを基準にした相対パス
  • ページ内の位置を示すid属性。絶対パスや相対パスと組み合わせて使用することもできます。

疑似クラスを使用してマウス操作でスタイルを変化させる

疑似クラスを使用すると、マウス操作でスタイルを変化させることができます。

マウス操作に関連する疑似クラスでは、4つの状態のスタイルをそれぞれ指定できます。

  • 未訪問

    :link擬似クラス

  • 訪問済み

    :visited擬似クラス

  • カーソルが重なった時

    :hover擬似クラス

  • アクティブになった時

    :active擬似クラス

これらのスタイルをうまく使い、メニューやボタンに応用していきます。 白系、黒系の背景向けのデザインを、予め、それぞれ作成しておくと便利です。

活用例:

css3を使用して、リンクテキストのデザインを変更する

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2015 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」