hyperlinks_html/css_WEB-ITnose のスタイルを試してみる

ハイパーリンクは目立ちませんが、World Wide Web (Web) の基礎であり、ユーザーは World Wide Web 内を移動できます。 リンクのデフォルトのスタイルは非常に控えめで、デザインが豊富な Web サイトでは、リンクのスタイルは通常上書きされます。 以下では、リンク ステータス セレクター、カスタム下線、外部リンク スタイルの設定、ボタンの実装など、一般的に使用されるリンク スタイルのテクニックをいくつか紹介します。

リンク ステータス セレクター

ハイパーリンク タグには、未訪問、訪問済み、ホバー、アクティブなどの多くの状態があります。これらは、CSS 疑似クラス セレクターを通じて識別できます。 ホバーとアクティブ化は、一般的な HTML 要素が持つ状態です。リンクの場合、:hover はマウスのホバー中に有効になり、:active はクリック後に有効になります。たとえば、未訪問のリンクを青、訪問済みのリンクを緑に設定します。

a:link {color: blue;}a:visited {color: green;}a:hover, a:active {color: red;}

疑似クラス セレクターの概要については、次を参照してください。 CSS セレクター

ハイパーリンクのデフォルトの下線は、デザインに過度の強調と乱雑さをもたらす場合があるため、通常は削除する傾向があります。 同時に、マウスホバリング時にユーザーに特定の操作フィードバックを提供したいと考えています。これを行うことができます:

a:link, a:visited {text-decoration: none;}a:hover, a:active {text-decoration: underline;}

上記の 2 行のコードの順序が重要であることに注意してください。逆にすると、:hover と :active は無効になります。

a:hover, a:active {text-decoration: underline;}a:link, a:visited {text-decoration: none;}

これは、:link、:visited と :hover、:active で選択された要素が重複しているためです。 このとき、これら 4 つのセレクターは同じ優先度を持ち、CSS ルールに従って最後のステートメントが有効になります。 CSS の優先順位については、「さまざまな CSS セレクターの優先順位」の記事で詳しく説明されています。 これら 4 つのセレクターを使用する場合は、次の順序 (一般から特殊の順) を使用することをお勧めします。

:link, :visited, :hover, :active

カスタム下線

ハイパーリンクの下線は次のように指定されます。 text-decoration 属性のスタイル自体はカスタマイズできません。 ただし、背景画像を使用することもできます。

a {    color: #666;    text-decoration: none;    background: url(underline.gif) repeat-x left bottom;}

背景画像を設定する構文については、CSS 背景画像のヒントの記事を参照してください。

背景画像にも欠点があり、最近のページではスタイルを補助するために多くの画像が使用されることはほとんどなく、スプライトさえも徐々にフォント ファイルに置き換えられています。下線をカスタマイズするもう 1 つの方法は、 border-bottom を設定することです。

a{    text-decoration: none;    border-bottom: 1px dotted #000;}

外部リンク スタイルを設定

スタイル内のすべての送信リンクを識別したい場合があります。たとえば、右上隅にアイコンを追加します:

CSS は非常に強力なセレクターを提供し、外部リンクは属性セレクターを通じて決定できます:

a {    background: url(images/externalLink.gif) no-repeat right top;    padding-right: 10px;}a[href^=/], a[href^=http://hartle.com], a[href^=http://blog.harttle.com]{    background-image: none;    padding-right: 0;}

まず右上隅に画像を設定してから、サイトを除外する別のルールを追加します。 ここで、 href^=/ は、/ で始まる属性値を持つすべてのタグに一致します。参考: CSS セレクターの概要 もちろん、 a[href$=".pdf"]{...} など、特定のファイル タイプ (サフィックス) へのリンクを個別に設定することもできます。

ボタンの作成

CSS を使用してボタンを作成するにはどうすればよいですか? Bootstrap がどのように行うかを見てみましょう:

.btn {    display: inline-block;    padding: 6px 12px;    margin-bottom: 0;    font-size: 14px;    font-weight: 400;    line-height: 1.42857143;    text-align: center;    white-space: nowrap;    vertical-align: middle;    cursor: pointer;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    background-image: none;    border: 1px solid transparent;    border-radius: 4px}

いくつかの重要な設定が含まれます:

• インラインブロック表示。パディング (正確には、パディングは現時点では行の高さにのみ影響します。CSS の表示プロパティとボックス モデルを参照してください)。
• カーソル:ポインターはカーソルを手の形に設定します。これはボタンです。
• border と border-radius は、角が丸い境界線を設定します。

さらに、Bootstrap には、トーンを設定するための .btn-primary や .btn-success などの 6 つのクラスが用意されています。 これらのクラスは、.btn クラスと一緒に使用されます。例:

<a class="btn btn-success">Click Me</a>

同時に、Bootstrap は、トーンを深めてユーザーにフィードバックを提供するために :hover および :active も使用します。 :

.btn-success {    color: #fff;    background-color: #5cb85c;    border-color: #4cae4c}.btn-success:hover,.btn-success:focus,.btn-success:active{    color: #fff;    background-color: #449d44;    border-color: #398439}