ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

周囲の余白や文字も含めてリンクをデザイン

ちょっと変わったリンクのデザイン方法をご紹介。項目の少ないメニューや、目立たせたいリンクに良いかも。周辺の余白も含めて上下の文字列全体がリンクになっているため、クリック可能範囲の広いリンクです。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

リンクをデザインする

以下の3つのリンクにマウスを載せてみて下さい。 一見、サイト名部分だけがリンクのように見えますが、実際には周辺の余白も含めて、上下の文字列全体がリンクになっています。

上記のリンクでは、画像やスクリプトは一切使っていません。それぞれ、HTMLのa要素を使ってリンクを作り、スタイルシートを使って装飾することで実現しています。

このようなデザインが何の役に立つのかと問われても困るのですが、 リンクを目立たせることや、リンク範囲を広くしてクリックしやすくすることには役立つかもしれません。 実用的だからというわけではなく、スタイルシートを使えばこのような装飾も可能だという点をご紹介するための解説です。 スタイルシートを使って、いろいろデザインを工夫する際の参考にしてみて下さい。

今回は、このリンクの作り方(スタイルシートの書き方)を、順を追ってご紹介致します。

【この記事の目次】

[STEP.1] HTMLを書く
[STEP.2] ベースの装飾を作る
[STEP.3] 各部分の装飾を作る
[STEP.4] 状況に応じて色を変化させる装飾を作る
[STEP.5] 横幅を制限する場合の記述
[STEP.6] ソースのまとめ
[Appendix] ※リストを使った場合のソース

  • 1
  • 2
  • 3
  • 9
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます