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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Appendix. リストを使った場合のソース

複数のリンクをたくさん並べる場合は、ul要素とli要素を使って「リスト」の形式にした方がいいかも知れません。 リストの形式にした場合のソースをまとめて掲載しておきます。

■HTML:

<ul class="boxlinks">
<li>
   <!-- 1つ目のリンク -->
   <a href="★リンク先URL★">
      <span class="siteguide">◆ガイド文◆</span><br>
      <span class="sitename">●サイト名●</span><br>
      <span class="siteurl">★リンク先URL★</span><br>
   </a>
</li>
<li>
   <!-- 2つ目のリンク -->
   <a href="★リンク先URL★">
      <span class="siteguide">◆ガイド文◆</span><br>
      <span class="sitename">●サイト名●</span><br>
      <span class="siteurl">★リンク先URL★</span><br>
   </a>
</li>
<li>
   <!-- 3つ目のリンク -->
   <a href="★リンク先URL★">
      <span class="siteguide">◆ガイド文◆</span><br>
      <span class="sitename">●サイト名●</span><br>
      <span class="siteurl">★リンク先URL★</span><br>
   </a>
</li>
</ul>

リンクをp要素ではなくli要素で囲んでいる以外は、先ほどのソースと同一です。

上記のソースを、スタイルシートを使わずにそのまま表示すると、以下のように見えます。 (※サイト名やURLは、この記事の冒頭に掲載したサンプルを使っています。)
※All About共通のスタイルシートが一部に適用されているので、必ずしもデフォルトの(スタイルシートをまったく使わない)見え方ではありません。

これにスタイルシートを加えます。

Appendix2. スタイルシートのソースへ >>

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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