-はじめてのhtml ホームページの作り方- 初心者でも簡単なタグの使い方!慣れたらCSSも覚えてカッコイイホームページ作り

実際にCSSを使う上で注意すべきポイントや、今後の製作に役立つポイントを解説しています。

タグ辞典

  • html一覧
  • ブロックとインライン
  • ブラウザ独自タグ
  • 無料HPスペース比較
  • 機能比較表
  • コミュニティー

  • 掲示板
  • CSSの注意点

    CSSを用いた場合に多く使われるであろう、プロパティに以下のような物があります

    a:link {color: #FF0000;}(リンク色)
    a:visited {color: #FF9900;}(訪問済みリンク色)
    a:hover {color: #FF9900;}(カーソルを合わせた時のリンク色)
    a:active {color: #FF0000;}(選択中のリンク色)

    上記の物は既存のリンク色を変える為に使うプロパティです。
    特定のclassにのみ適応させると言う事も可能です。
    多くの人がこれを用いる事によって自由なリンク色と言うのを設定出来るようになります。
    が、それによる弊害もあります。本来規定のリンク色は青、紫と言う風に分類されています。
    認識のしやすさや、区別のしやすさと言う点に置いてもこのような分類は必要になります。
    例えば、リンクと訪問済みが同じ色の場合どこを訪問したのかわからなくなってしまうなど。
    そういった物を防ぐ為にもこの二つは必ず違う色にする事をお勧めします。
    また、この青と紫と言う分類は固定化された認識でもあるので、大きく異なる色にするなど、
    固定化された意識から逸れた色にすると閲覧者を迷わせてしまうと言う危険性もあります。
    同様に高明度、低明度と言う分類も同じことが言えます。
    この立場を逆転させてしまう事も迷わせる原因になりますので、気をつけてください。

    リンク色と似た物としてスクロールバーの色を変えると言うプロパティも存在します。 以下のようなプロパティがあります。

    scrollbar-3d-light-color;(3D部分の色)
    scrollbar-arrow-color;(▲の色)
    scrollbar-darkshadow-color;(深い影の色)
    scrollbar-face-color;(表面の色)
    scrollbar-highlight-color;(明るい部分の色)
    scrollbar-shadow-color;(影の色)
    scrollbar-track-color;(トラックの色)

    これもまた簡単に視覚的効果を得られる為に使用しているサイトを多く見かけます。
    ですが、このプロパティはIEのみでしか表示されません。
    使用する場合はその点を理解する必要があります。
    また、見栄えと言う風に称されていますが、必ずしもそうとは言えないと言う部分もあります。
    特に視認性を著しく落とすような配色をしている場合はそれは見栄えを悪くしているだけです。
    こういったシステムのインタフェース部分に手を加えるのは手法として好ましくはないという事を、
    理解した上で使用の有無を決める事が大切です。