ホームページ作成/携帯・スマートフォンサイト作成入門

携帯サイトの作り方 第2回 番号キーで移動(3ページ目)

携帯電話で閲覧できる「ケータイサイト」作成方法の第2弾です。携帯端末では画面スクロールやリンクの選択が少々面倒です。携帯電話の「番号キー」を使って、ページ内の移動やリンクの選択を手軽にしてみましょう!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リンクの表示色を指定する方法

ここでは、リンクの文字色を指定する方法をご紹介いたします。
リンク文字の表示色は、「未訪問」(=まだアクセスしたことがないページ)か「既訪問」(=既にアクセスしたことがあるページ)かで色を分けることができます。

リンクの色を装飾
 

これらの表示色は、PCサイトと同じようにスタイルシートで装飾できます。 しかし、様々な携帯端末に対応させるには、以下の記述方法で記述する必要があります。

XHTMLのhead要素内に、
style要素を使って記述する。

必ずこの方法を使って記述します。 PCサイトでは、他に「外部のCSSファイルに記述する」という方法もありますが、docomoの携帯端末では(2009年5月に発売された最新機種を除いて)すべての端末で上記の記述方法でしか装飾できません。

具体的には、以下のように記述します。

<style type="text/css">
   a:link { color: blue; }
   a:visited { color: #0080cc; }
</style>

「 a:link 」が未訪問リンク、「 a:visited 」が既訪問リンクです。

サイト内のすべてのページで同じ装飾を使いたい場合は、上記の記述をすべてのページ(XHTML)に記述する必要があります。
※auやSoftbankの端末、docomoの最新機種では、外部のCSSファイルに記述する方法も使えます。

なお、上記のstyle要素内に「リンク文字色以外の装飾」を記述しても、docomoの(最新機種を除く)端末では有効になりませんので注意して下さい。 (詳しくは、第1回の記事「携帯サイトの作り方 第1回 作成方法の基礎」の4ページ目にある「使える装飾方法と使えない装飾方法」をご参照下さい。)
※特定の範囲内(div要素の内側など)に限定したリンク文字色の装飾も無効です。
例えば、「 div.linklist a:link { color: red; } 」のような記述は「div.linklist」の部分が無効になるため、使えません。

おわりに

今回は、リンクをキーでクリックできる「アクセスキー」の設定方法と、リンク文字色の装飾方法をご紹介いたしました。 携帯サイトはスクロールに手間がかかるので、アクセスキーを活用してスムーズに移動できるように工夫してみて下さい。

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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