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

締切済

質問者：chanpekato
質問日時：2014/05/03 23:04
回答数：4件

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2014/05/04 16:35

簡単なサンプルです。

★タブは＿に置換してあるので戻す。
★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>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/05/04 09:16

　通常の段落内のリンクでしたら、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;}

時間が取れたら分かりやすいサンプル書いてみます

この回答への補足

回答ありがとうございます。

そのまま貼り付けただけですが、ちゃんと大きさを指定することができました。

>時間が取れたら分かりやすいサンプル書いてみます
ありがとうございます。とても助かります。でも本当にORUKA1951さんの気が向いた時でかまいません。

あと、重ねて質問するようで申し訳ないのですが、背景色を小さくする方法はありますでしょうか？
つまり、背景色の幅を何も指定していない状態で、それより幅を小さくするということです。
ちなみに<div style="line-height:28px;">で行間を指定しています。

縦幅が広くて、どうしても気になってしまいます…。

補足日時：2014/05/04 12:52

通報する

- 0
- 件

通報する

No.2

回答者： DrFell
回答日時：2014/05/04 06:40

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の方がいい場合もあります。

解説サイトや仕様書でブロックレベル要素、行内要素の性質、挙動を把握することをお勧めします。両者の違いによって、有効になるプロパティが違います。ｃｓｓ初学者が、まず覚えるべきことかと思います。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

一番上のものを貼り付けたらできました。

ブロックレベル要素インライン要素、どちらも知りませんでした。
恥ずかしい限りです…。
今度は背景色の縦幅を狭くできるように、解説サイト等を見て、自分でも解決策を考えてみます。

ご丁寧な説明ありがとうございました。

通報する

お礼日時：2014/05/04 13:00

No.1

回答者： AsarKingChang
回答日時：2014/05/03 23:32

縦横幅を持った、場所にアンカーを置くほうがいいのではないかと

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