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

周囲の余白や文字も含めてリンクをデザイン(7ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

STEP.6 ソースのまとめ

今回のサンプルを実現するすべてのソースをまとめて掲載しておきます。コピー&ペーストして使ってみる際にご活用下さい。

既存のページに書き加えても他のデザインを崩さないよう、「boxlinks」クラスを加えたp要素(<p class="boxlinks">~</p>)内にリンクを記述しています。 スタイルシートも、このp要素内に含まれるリンク(a要素)のみを対象に装飾するよう記述しています。

■HTML:

<p class="boxlinks">
   <a href="★リンク先URL★">
      <span class="siteguide">◆ガイド文◆</span><br>
      <span class="sitename">●サイト名●</span><br>
      <span class="siteurl">★リンク先URL★</span><br>
   </a>
</p>

■スタイルシート:

/* リンク全体の装飾 */
p.boxlinks a {
   display: block;
   padding: 0.5em;
   border: 1px solid #ccccff;
   text-align: center;
   text-decoration: none;
   line-height: 1.5;
   width: 400px; /* 横幅を指定する場合のみ記述 */
}
/* ガイド文の装飾 */
p.boxlinks a span.siteguide {
   font-size: 70%;
}
/* サイト名の装飾 */
p.boxlinks a span.sitename {
   text-decoration: underline;
}
/* URLの装飾 */
p.boxlinks a span.siteurl {
   font-size: 75%;
   font-family: Verdana,Arial,sans-serif;
}

/* 全体(マウスが載ったとき)の色 */
p.boxlinks a:hover {
   background-color: #ccffff;
   border-color: #0000ff;
}
/* ガイド文部分の表示色 */
p.boxlinks a:link    span.siteguide { color: black; }
p.boxlinks a:visited span.siteguide { color: black; }
p.boxlinks a:hover   span.siteguide { color: blue; }
/* サイト名部分の表示色 */
p.boxlinks a:link    span.sitename { color: blue; }
p.boxlinks a:visited span.sitename { color: #800080; }
p.boxlinks a:hover   span.sitename { color: blue; }
/* URL部分の表示色 */
p.boxlinks a:link    span.siteurl { color: green; }
p.boxlinks a:visited span.siteurl { color: green; }
p.boxlinks a:hover   span.siteurl { color: #cc00ff; }

表示すると、以下のように見えます。

サイト名やURLなどの文字を加えてみると、以下のような感じになります。

リストを使って作る場合

上記では、リンクをp要素で囲んでいます。複数のリンクをたくさん並べる場合は、p要素よりはul要素とli要素を使って「リスト」の形式にした方がいいかも知れません。 (冒頭のサンプルもリストを使って記述しています。) その場合のソースは、以下のページで別途ご紹介しています。

(Appendix) リストを使った場合のソースへ >>

おわりに

今回は、ちょっと変わったリンクの装飾方法をご紹介いたしました。 特に役に立つわけではありませんが、様々な装飾を試してみる参考にご活用下さい。

【関連記事】

  • 前のページへ
  • 1
  • 6
  • 7
  • 8
  • 9
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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