Google検索エンジン

トップページ » スタイルシート入門講座 » CSSでアンカー(リンク)のポイント・下線・色を設定する方法


CSSでアンカー(リンク)のポイント・下線・色を設定する方法

  • アンカー(リンク)に関するCSSセレクタ

    セレクタの種類 セレクタの書式 スタイルを適用する対象 CSSファイル記述例
    擬似クラス 要素名:link 未訪問のリンク a:link {color:red;}
    要素名:visited 訪問済のリンク a:visited {color:red;}
    要素名:hover カーソルが乗っている要素 a:hover {color:red;}
    要素名:active クリック中の要素 a:active {color:red;}
    要素名:focus フォーカスされている要素 input:focus {background:red;}
    要素名:lang 特定の言語を指定した要素 p:lang(en) {color:red;}
    要素名:first-child 要素内の最初の子要素 p:first-child {color:red;}

    アンカー(リンク)に関するCSSプロパティ

    CSSプロパティ 意味
    text-decorationtext-decoration テキストの下線・上線・打ち消し線・点滅を指定
    colorcolor テキストの文字色を指定
    cursorcursor ポイント(カーソル)の形状を指定

    テキストの下線・上線・打ち消し線・点滅を指定

    text-decorationプロパティは、テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用します。 同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述してください。

    アンカー(リンク)は、デフォルトでテキストの下線が表示されます。 「text-decoration:none;」を記述すると、アンカー(リンク)テキストの下線を消すことができます。

    テキストを点滅させる「blink」をサポートしていないWebブラウザも存在しますので「blink」は記述しない方が無難です。

    text-decorationプロパティの指定値
    none テキストに線は付かず、点滅もしません。これが初期値です。
    underline テキストに下線が付きます。
    overline テキストに上線が付きます。
    block 指定要素がブロックレベルで表示されます。
    line-through テキストに打ち消し線が付きます。
    blink テキストが点滅します。
    CSSファイル記述例
    a#test-text-decoration:link,
    a#test-text-decoration:visited{
    	text-decoration:none;
    }
    a#test-text-decoration:link:hover,
    a#test-text-decoration:visited:hover{
    	text-decoration:underline;
    }
    
    HTMLファイル記述例
    <a id="test-text-decoration" href="./anchor.html">アンカーテキストの下線を消す</a>
    Webページの表示
    アンカーテキストの下線を消す

    テキストの文字色を指定

    colorプロパティは、文字色を指定する際に使用します。

    アンカー(リンク)は、デフォルトでテキストの色が設定されています。 colorプロパティを使用すると、アンカー(リンク)テキストの色を変更することができます。

    colorプロパティの指定値
    RGB値で指定 #000000〜#ffffff
    カラーネームで指定 black、white、red、yellow、blue、greenなど
    CSSファイル記述例
    a#test-color:link,
    a#test-color:visited{
    	color:red;
    	text-decoration:none;
    }
    a#test-color:link:hover,
    a#test-color:visited:hover{
    	color:green;
    	text-decoration:underline;
    }
    
    HTMLファイル記述例
    <a id="test-color" href="./anchor.html">アンカーテキストの文字色を指定</a>
    Webページの表示
    アンカーテキストの文字色を指定

    ポイント(カーソル)の形状を指定

    cursorプロパティは、ポイント(カーソル)の形状を指定する際に使用します。 下の使用例にある値の中には、ブラウザにより対応していないものもあるので注意してください。

    アンカー(リンク)は、デフォルトでポイント(カーソル)の形状がリンクカーソル(pointer)に設定されています。 cursorプロパティを使用すると、ポイント(カーソル)の形状を変更することができます。

    cursorプロパティの指定値
    auto Webブラウザが自動的に選択したカーソル
    default 矢印型など利用環境の標準カーソル
    pointer リンクカーソル
    crosshair 十字カーソル
    move 移動カーソル
    text テキスト編集カーソル
    wait 待機・処理中カーソル
    help ヘルプカーソル
    n-resize 北方向のリサイズカーソル
    s-resize 南方向のリサイズカーソル
    w-resize 西方向のリサイズカーソル
    e-resize 東方向のリサイズカーソル
    ne-resize 北東方向のリサイズカーソル
    nw-resize 北西方向のリサイズカーソル
    se-resize 南東方向のリサイズカーソル
    sw-resize 南西方向のリサイズカーソル
    progress 進行中カーソル
    url(ファイルのパス) 独自カーソル
    CSSファイル記述例
    a#test-cursor:link,
    a#test-cursor:visited{
    	color:red;
    	text-decoration:none;
    }
    a#test-cursor:link:hover,
    a#test-cursor:visited:hover{
    	cursor:help;
    	color:green;
    	text-decoration:underline;
    }
    
    HTMLファイル記述例
    <a id="test-cursor" href="./anchor.html">ポイント(カーソル)の形状を指定</a>
    Webページの表示
    ポイント(カーソル)の形状を指定

スタイルシート入門講座
it-manual.comのウェブサイト
書籍の紹介
  • 全部無料でつくるはじめてのホームページ & HTML for Windows 7/Vista/XP
    全部無料でつくるはじめてのホームページ & HTML
    発売:2010/07/30
    定価:1,869円
    著者:浅岡 省一
    出版:翔泳社
    内容:ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。
  • フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
    フェイスブック 若き天才の野望
    発売:2011/01/13
    定価:1,890円
    著者:デビッド・カークパトリック
    出版:日経BP社
    内容:ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
  • Twitter×アメブロでビジネスを加速する方法
    Twitter×アメブロでビジネスを加速する方法
    発売:2010/12/09
    定価:1,554円
    著者:青山 華子
    出版:ソーテック社
    内容:ブランディングと人脈を構築する86の法則。twitterやFacebookなど、ソーシャルメディアの時間短縮と有効活用方法を徹底解説。
  • 起業のファイナンス ベンチャーにとって一番大切なこと
    起業のファイナンス ベンチャーにとって一番大切なこと
    発売:2010/09/30
    定価:2,310円
    著者:磯崎 哲也
    出版:日本実業出版社
    内容:人気ブログ「isologue」の磯崎哲也が教える、成功する会社の作り方。
  • できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
    できるホームページ HTML&CSS入門
    発売:2010/12/24
    定価:1,659円
    著者:佐藤 和人
    出版:インプレスジャパン
    内容:オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
  • ネットではじめる! 輸出ビジネス
    ネットではじめる!輸出ビジネス
    発売:2010/08/21
    定価:1,575円
    著者:陳 立浩
    出版:すばる舎
    内容:売れる商材の特徴、言葉の壁の乗り越え方、ネット輸出会社の作り方、効果抜群の広告宣伝のコツやクレームへの対処法まで、この1冊で新たなビジネスモデルが見えてきます。
  • Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    発売:2010/06/05
    定価:1,575円
    著者:服部 洋二
    出版:ソーテック社
    内容:初心者向けの書籍です。中小企業のWebサイトに携わる方向けの書籍ですので、個人のウェブサイトにも適用しやすい内容となっています。
  • Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
    Webデザインの基本ルール
    発売:2009/03/27
    定価:1,890円
    著者:デザインラボ編集部
    出版:ソフトバンククリエイティブ
    内容:色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
独自ドメイン取得サービス
  • 「ムームードメイン」は「ロリポップ!レンタルサーバー」を運営するpaperboy&co.の低価格ドメイン取得サービスです。2004年のサービス開始以来、初心者でも簡単にドメイン設定ができる機能と、580円/年〜の手軽な価格帯で、個人を中心に多くの人が利用してます。「ロリポップ!レンタルサーバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • ネットオウル株式会社のスタードメインなら、.comドメインが年額950円で取得できます。スタードメインを利用すると「ネットオウルポイント」が進呈されますので、ネットオウル株式会社のレンタルサーバー「ミニバード」「ファイアバード」「クローバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • 「お名前.com プレミアムドメイン」では、世界中で取引されるプレミアムドメインを提供してます。プレミアムドメインとは「英単語を含む」「短く覚えやすい」「ドメインの種類が.com」など、稀少なドメイン名を指してます。個人名や会社名など特定のドメイン名を取得したい方に、おすすめのサービスです。
おすすめレンタルサーバー
  • 「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • 50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • 月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
ネットショップ構築サービス
  • 会員管理、ポイント管理、プレゼントキャンペーン、メルマガなど、高機能なショッピングカートです。テンプレート選択でもネットショップが出来るから初心者でも簡単です。
  • e-shopsカート2は初心者の方から繁盛店まで多数の導入実績を誇ります。初めてのネットショップでも簡単にショッピングサイトを作成できます。プラグイン対応のホームページ・ビルダーでショッピングカートの設置も簡単です。