締切済み

html　リンク文字の背景色について

2014/05/03 23:04

chanpekato
お礼率50% (2/4)

HTML
回答数4
ありがとう数12

みんなの回答 （4）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/04 16:35 回答No.4

簡単なサンプルです。 ★タブは＿に置換してあるので戻す。 ★http:はhttp：(全角：)に置換してあるので戻す <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/Top">トップ</a></li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿＿<li><a href="/Contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p> ＿＿＿HTML4.01(XHTML1.0,XHTML1.1)では、DIV要素のclass名は、文書構造を保管する目的で付けることになっていました。＿＿</p> ＿＿<blockquote cite="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4"> ＿＿＿<p> ＿＿＿＿DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。＿＿＿</p> ＿＿＿<address> ＿＿＿＿<a href="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4">The global structure of an HTML document (ja)</a> ＿＿＿</address> ＿＿</blockquote> ＿＿<p> ＿＿＿ところが、これが理解されてきたとは言いがたく、<a href="http：//www.w3.org/TR/html5-diff/#new-elements">HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。</a> ＿＿</p> ＿＿<ul> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-section-element"><code>section</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-article-element"><code>article</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/grouping-content.html#the-main-element">main</a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-aside-element">aside</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-hgroup-element"><code>hgroup</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-header-element"><code>header</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-footer-element"><code>footer</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/sections.html#the-nav-element"><code>nav</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/grouping-content.html#the-figure-element"><code>figure</code></a></li> ＿＿＿<li><a href="http：//www.w3.org/TR/html5/grouping-content.html#the-figcaption-element"><code>figcaption</code></a></li> ＿＿</ul> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/Top">トップ</a></li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿＿<li><a href="/Contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/04 09:16 回答No.3

　通常の段落内のリンクでしたら、a:link{background-color:yellow;padding:5px 10px;} です。　ところがナビゲーションリストなどをブロックとしてデザインしていたりする場合、あるいは、背景色部分も含めてリンクとして機能させる場合は、それぞれ、そのようにデザインします。　div.section p a:link{display:inline-block;background-color:yellow;padding:5px 10px;} div.nav ol li{display:block;width:10em;text-align:center;line-height:2em;position:relative;} div.nav ol li a{display:block;width:100%;height:100%;background-color:yellow;text-decoration:none;} 時間が取れたら分かりやすいサンプル書いてみます

質問者

補足 2014/05/04 12:52

回答ありがとうございます。そのまま貼り付けただけですが、ちゃんと大きさを指定することができました。 >時間が取れたら分かりやすいサンプル書いてみますありがとうございます。とても助かります。でも本当にORUKA1951さんの気が向いた時でかまいません。あと、重ねて質問するようで申し訳ないのですが、背景色を小さくする方法はありますでしょうか？つまり、背景色の幅を何も指定していない状態で、それより幅を小さくするということです。ちなみに<div style="line-height:28px;">で行間を指定しています。縦幅が広くて、どうしても気になってしまいます…。

DrFell
ベストアンサー率55% (305/551)

2014/05/04 06:40 回答No.2

a:link{/*直球回答はこっち*/ display:inline-block;/*※参照*/ background-color :#000000; width:7em;/*幅*/ height:7em;/*高さ*/ } a:link{/*場合によっては、こっちも使えるかも？*/ background-color :#000000; padding:2em 1em; } ※ cssの基本的なことですが、要素にはブロックレベル要素と、インライン要素があります。初期値では、ブロックレベル要素は、高さ幅を持てますが、インライン要素は持てません。インライン要素（aやstrong等、行内要素ともいう）の仲間にインラインブロック要素（画像など）があります。インラインブロック要素は外向きには行内に、内向き（自分自身には）ブロック要素として表示されます。つまり、文中に入るが、高さや幅を持てるようになります。質問の場合、使いどころによっては、display:blockの方がいい場合もあります。解説サイトや仕様書でブロックレベル要素、行内要素の性質、挙動を把握することをお勧めします。両者の違いによって、有効になるプロパティが違います。ｃｓｓ初学者が、まず覚えるべきことかと思います。

質問者

お礼 2014/05/04 13:00

回答ありがとうございます。一番上のものを貼り付けたらできました。ブロックレベル要素インライン要素、どちらも知りませんでした。恥ずかしい限りです…。今度は背景色の縦幅を狭くできるように、解説サイト等を見て、自分でも解決策を考えてみます。ご丁寧な説明ありがとうございました。

AsarKingChang
ベストアンサー率46% (3467/7472)

2014/05/03 23:32 回答No.1

縦横幅を持った、場所にアンカーを置くほうがいいのではないかと感じましたが。 <a href=#>あいうえお</a> この場合、"あいうえお"の表示サイズ以上にも以下にもリンクは貼られないので、縦横幅は、あくまでこれのサイズに依存してしまうともいます。。もし、大きなリンクボタンを作りたいということなら、透明な画像を１ピクセル用意して、拡大時に、希望のサイズを与えてその上に、文字を置くなどもありだと思いますよ。画像側がリンクなので、サイズフリーとなりますから。

質問者

お礼 2014/05/04 13:03

回答ありがとうございます。なるほど、そういう手段もあるんですね。解説サイトなども活用してがんばって挑戦してみようと思います。わざわざありがとうございました。

関連するQ&A

HPの背景や、リンクの文字色を変えたりしたら・・・
HPの背景やリンクの文字色を変えてFFFTPでアップしたのに、ブラウザでは変わっていません。テキストエディタの確認では変わるのですが・・・。キャッシュのクリアもしましたが、なにも変わりません。タグの問題ですか？ <html> <head> <title>profile</title> <STYLE type="text/css">  </style> </head> と、タグはこんな感じですが・・・。
- ベストアンサー
- HTML
リンクをかけた文字がマウスをあてると動いてしまう
文字にリンクをかけると、その文字にマウスをあてたら、その文字や隣の文字が改行されたように動いてしまいます。今まで経験のない現象なので、何が原因か分からなくって。アドバイスよろしくお願いします。ページのスタイルシートへのリンクは、 <link rel="stylesheet" type="text/css" href="CSS/css1.css"> CSSというフォルダにcss1.cssを入れて読み出しています。外部css1.cssのリンク設定は下記のような記述をしているのですが…。 a:link {color :#0000cc; text-decoration : none; } a:active {color :#000099; } a:hover { color: #ff0000; background-repeat : no-repeat; display: block; }
- ベストアンサー
- ホームページ作成ソフト
リンクの色を2色で使い分けたい
はじめまして。良かったらどなたか教えて下さい。今、一枚のページを作っているのですが、背景色を"#ffffff"（白）とし、そのリンクを以下の様に指定しました。 <style type="text/css">  </style> 「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」でリンクの文字が見えなくなってしまいます。 hoverの効果（オンマウス時はオレンジ）の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか？（クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです）。お忙しい所申し訳ございませんが、宜しくお願い致します。
- ベストアンサー
- HTML
CSSの文字指定
<style type="text/css"> </style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。たとえば、MSゴシック,平成角ゴシックなど。どう加えればよいですか？ <style type="text/css"> font:16px "ＭＳＰゴシック",平成角ゴシック,</style>とやってもダメでしたと
- ベストアンサー
- HTML
背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。画像のように色をつけたいのですが、うまくいきません。上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
FC2WEBのテキスト広告の文字色を変更したいのですが…
「新」FC2WEBの「Powered by FC2.com」というテキスト広告の文字色を変更したいのですが…リンク部分の「FC2.com」の色は変えられるのですが、通常テキスト？の「Powered by」の部分の変更がどうしてもできないでいます。希望は背景とスクロールバーが黒。文字は白。リンクは今は適当な色で指定しています。 ↓現在のファイルの一部です。スタイルシートで<fead>と</head>の間に記述して文字色を指定すれば…とどこかのサイトにあったので挑戦しました。 <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-jp"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-2022-jp"> <META HTTP-EQUIV="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="(ラインの色指定CSS).css" type="text/css"> <link rel="stylesheet" href="(フォントの文字・色指定CSS).css" type="text/css"> <STYLE type="text/css">     </STYLE> <title>★</title> </head> <body> (以下略) ↑これでサイト内の文章は文字色を白に指定できるのですが、広告だけが変わりません… サイト内をずっと検索していましたが、FC2「ブログ」文字色の変更の仕方しか載っておらず、(解説らしい回答ページを1つ発見しましたが、やり方の参照HPのURLの先がなくなっていましたorz)FC2に問い合わせてみましたが、自分で講座などを調べて…とのお返事でした。
- ベストアンサー
- レンタルサーバ・ASP
親フレームのリンクからアイフレーム内の背景画像を位置指定して変更する
アイフレーム内の最初に表示してあるページ内に <style type="text/css">  </style> を書いて、親フレームのリンクにオンマウスオーバーとjavascriptをつかって、背景画像を左上固定で繰り返さない指定はできたのですが、指定する背景画像の位置をその都度変えたい場合に、親フレーム内のリンクから指定する方法をご存知の方はどうか教えていただけないでしょうか？検索など、いろいろやってみたのですがどうもみつからないんです…
- ベストアンサー
- JavaScript
背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css">  </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～という感じでページを作っているのですが、背景の画像が透けてテーブルの中の文字が見え難く困っています。テーブルの中は「white」で白に指定しているつもりなのですが、白になりません。。このタグでテーブルの中を背景が反映されず真っ白にする方法ってあるのでしょうか？調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
リンク文字変化のタグについて
リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]～[/head]の間に注入するタグのようなのですが <STYLE type="text/css">  </STYLE> このように[head]～[/head]の間に挿入するタイプのものではなく個別で指定するにはどのように記述すればいいでしょうか？ ↓例えばコレは[head]～[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
背景の2重指定　タグ
はじめまして。背景のタグについて悩んでいまして、一つは左上に、右下が隙間があるので、もう一つは右下に固定したいのですが、そのような事はできるでしょうか？今は左上だけできるのですが、右下に固定のやり方がどうしてもわかりません；；このような感じです↓ <style type="text/css">  </style> <STYLE type="text/css"> ここからできるでしょうか？わかりにくい質問で申し訳ないのですが、教えてくださったら嬉しいです。
- 締切済み
- HTML

html　リンク文字の背景色について