アプリ版：「スタンプのみでお礼する」機能のリリースについて

テキストが画像の下に回りこまないようなリンクを作成する方法について

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：4件

リンクボタンを作成していたのですが、下記の条件を満たすリンクボタンの作成で分からない所がありましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。

【やりたい事】
http://www.itmedia.co.jp/の画面左下の「アクセスランキング」のようなリンクを作りたいと思います。
ただし、「アクセスランキング」の動作とは完全には一致しておらず、下記の動作を実現させたいです。

1. ITmediaの「アクセスランキング」のボックスすべてでリンクが効く様にしたい(左端の画像の上や、テキストがない部分でもリンクが効く様にしたいです)(これは下記のソースでできています)。
2. ロールオーバー時には、「画像」「文字色」「背景色」を変更したい(これは下記のソースでできています)。
3. すべての文字の下に点線を入れたい(これは下記のソースでは、Firefox3ではできていて、IE6ではできていません)。
4. ITmediaの「アクセスランキング」同様、テキストリンクが複数行にまたがる場合は、画像の下にテキストが回りこまないようにしたい(これは下記のソースではできていません)。


現在下記のソースを作成しましたが、下記の問題点があり、修正する方法が分かりませんでした(下記を直した所、これまでうまくいっていた所が動かなくなってしまいました)。
1. 「2行にまたがる場合2行にまたがる場合」のように複数行のテキストリンクの場合、画像の下にテキストが回りこんでしまう(これをITmediaの「アクセスランキング」のように画像の下にはテキストがこないようにしたいです)。
2. 【やりたい事3】の「すべての文字の下に点線を入れたい。」ですが、Firefox3でみると希望の動作をしているのですが、IE6で見ると、中途半端な位置に点線が出る為、これをFirefox3と同じ動作にしたいです。

【ソースコード】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>テキストが複数行になっても画像の下にテキストが回りこまないようにしたい</title>
<style type="text/css">
<!--
img {
border:0;
}
#navi_link {
width: 170px;
}
ul {
list-style:none;
margin:0;
padding:0;
}
#navi_link li {
line-height:200%;
background-image: url(bg.gif);
}
#navi_link a {
display: block;
height:100%;
text-decoration:none;
color:#333333;
}
#navi_link a:hover {
color:#CC99CC;
background-color:#33FFFF;
}
#navi_link .arrow_normal,
#navi_link .arrow_over {
margin-left:6px;
margin-right:4px;
}
#navi_link .arrow_over {
display:none;
}
#navi_link a:hover .arrow_normal {
display:none;
}
#navi_link a:hover .arrow_over {
display:inline;
}
-->
</style>
</head>
<body>
<ul id="navi_link">
<li><a href="index.html"><img src="arrow_normal.gif" alt="" width="10" height="10" class="arrow_normal" /><img class="arrow_over" src="arrow_over.gif" alt="" width="10" height="10" />1行で収まる場合</a></li>
<li><a href="index.html"><img src="arrow_normal.gif" alt="" width="10" height="10" class="arrow_normal" /><img class="arrow_over" src="arrow_over.gif" alt="" width="10" height="10" />2行にまたがる場合2行にまたがる場合</a></li>
<li><a href="index.html"><img src="arrow_normal.gif" alt="" width="10" height="10" class="arrow_normal" /><img class="arrow_over" src="arrow_over.gif" alt="" width="10" height="10" />1行で収まる場合</a></li>
</ul>
</body>
</html>

【使用ファイル】
index.html(上記ソース)
bg.gif(2x32で一番左下の1ピクセルのみに任意の色がついている画像(これでFirefox3では文字の下に点線が表示されるようになります))
arrow_normal.gif(10x10の任意の画像)
arrow_over.gif(10x10の任意の画像)

どこか一箇所でもご教示いただけるようでしたら、ご教示いただければと思います。
どうかよろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

ANo.2-3です。



> というわけで、消去法で(5)を採用する方向で検討したいと思います。

そうですか。その場合、参考にしたサイトで追記されていた「現状でSafari 3.xとGoogle Chrome 1.xの問題を回避するには「-webkit-text-size-adjust: none」の設定を追加し、文字サイズを固定してずれを防ぐ」だけはおやめになった方が良いかと思います。クライアント側で文字サイズのみの拡大を行った場合には崩れても（文字と点線が重なっても）しょうがない、という割り切りが必要でしょう。

で、上記を採用した上だと、

> マウスオーバー時にマウスオーバーしたリンク部分の下側の点線が消えてしまうのは確認いたしました。

点線はborderではなくliに対して設定された背景画像という事になりますので、その上に重なる（子要素の）a:hoverの時にbackgroundで#3ffの背景色が設定されている為、塗りつぶされて見えない状態になります。

> 出来れば回避したいと思いますが、これについても諦めないといけない事になってしまうのかも知れません。

回避できる方法がないわけでもありません。質問者様の現状では点線用背景画像のbg.gifをliに指定していますが、これだと上記の様にa:hover時にそちらの背景色に打ち消されてしまいます。そこで、bg.gifをliではなく、aの子要素であるspanの方へ設定します。そうするとこちらの方が重なり方が上位であり、しかも透過部分を持った画像ですので、透過した箇所には親要素aの:hover時の背景色が透けて見える事になります。その際、aとspanの描画開始位置が重なりつつテキストとリストマーク画像が重ならない様に更に調整を加えます。

以下が、前回の(5)の方法を採用した場合の最終的なヴァージョンです。
----------------------------------------------------------------------
【サンプルver.2】※は前回のANo.2のサンプルからの変更部分
----------------------------------------------------------------------
（省略）
<style type="text/css">
<!--
body {※←質問者様の指定を追加。
font:13px "ＭＳ Ｐゴシック"; /* Firefox用 */
*font-size:small; /* IE7用 */
*font:x-small; /* IE6用 */
}
#navi_link {
width: 170px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#navi_link li {
line-height: 26px;※←背景画像に合わせて固定値に。
※←margin-bottomは削除。
}
#navi_link a {
display: block;
height: 100%;
text-decoration: none;
color: #333333;
background: url(arrow_normal.gif) 4px 7px no-repeat;※←line-heightの変更に合わせて描画開始位置を微調整。
padding-left: 18px;
}
#navi_link a:hover {
color: #c9c;
background: url(arrow_over.gif) 4px 7px no-repeat #3ff;※←同上。
}
#navi_link a span {
display: block;※←背景画像をliの領域一杯に描画する為にブロック要素化。
margin-left: -18px;※←マイナス・マージンで描画開始位置をliの左端まで引き戻す。
padding-left: 18px;※←aの背景画像（リストマーク部分）と重なる部分に再度余白を取ってテキストを描画。
background: url(bg.gif) repeat;※←点線の背景はこの要素へ指定。
※←border-bottomは削除。
}
-->
</style>
</head>
<body>
（以下省略、マークアップはANo.2のサンプルから変更なし。）
----------------------------------------------------------------------
いかがでしょうか。

それから、相変わらずなのですが：

> ANo.2でのサンプルのmargin-bottom: 0.3em;を削除していただいた上で、フォントの指定していただけるとご確認いただけるかと思います。

こうした上で、今回の修正版でも、

> IE7でロールオーバー時、ロールオーバーした箇所の上側の点線と、ロールオーバーにより変更された背景画像の間にわずかですが隙間が出来ているのがご確認いただけるかと思います。

という現象を確認する事はできませんでしたが…
少なくとも私の環境からでは今回の修正版サンプルの挙動は、IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chrome 1、で同じ様に見えました。

この回答への補足

実際に構築しているサイトに組み込んでみました。
質問さしていただいた内容は全て満たしているようでした。

どうもありがとうございました。

補足日時：2009/04/02 23:57
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

> そうですか。その場合、参考にしたサイトで追記されていた「現状でSafari 3.xとGoogle Chrome 1.xの問題を回避するには「-webkit-text-size-adjust: none」の設定を追加し、文字サイズを固定してずれを防ぐ」だけはおやめになった方が良いかと思います。クライアント側で文字サイズのみの拡大を行った場合には崩れても（文字と点線が重なっても）しょうがない、という割り切りが必要でしょう。
上記の件、了解いたしました。
その点については割り切ろうと思います。

また、下側の点線が消えてしまう理由をご教示いただきありがとうございます。
それと最終的なヴァージョンを試させていただきました。
今までbg.gifは透過gifではなかったのですが、透過gifに差し替えた所、思い通りの動作をしているように見受けられました。
また、今回のサンプルでは私が気にしていた隙間が発生しない事を確認いたしました(IE6/7、Firefox2/3)。
私の組み方に何か問題があったのだと思います。
お手数をおかけし申し訳ございませんでした。

この状態をベースに、実際に構築しているサイトに組み込んでみようと思います。
今週末～来週頭位までに動作確認のうえ、良回答を付けさせていただき、質問を閉じさせていただく形にもっていければと思います。

以上、宜しくお願いします。

通報する
お礼日時：2009/04/01 19:58

No.3

  • 回答者： abril
  • 回答日時：

> 画像の下、テキスト表示が終わった右端部分でも点線を表示したいです



…つまり、liのテキスト（含むリストマーク画像）の背景として点線状のノート罫線の様なものを引きたいという事ですね。
結論から言うと、”ズーム機能を持たないブラウザ（Firefox2等）／もしくはズームではなく文字サイズ拡大を使用したクライアント側での変更”に対して”1行でも複数行でもテキストと画像が罫線と重なる事無く常にノートに一行一行書き込んだかの様に表示される”というのは、CSSでは無理だと思います。

理由ですが、borderプロパティでラインを引こうとした場合：

・行数が可変状態のテキストに沿って常にラインが引かれるにはその要素がインライン要素の性質（display: inline;）を持っていなければならないが、テキスト量に関係なく170pxと定められたliの横幅一杯までラインを引く為には、その要素がブロック要素（display: block;）の性質でなければならない。

まずここで条件が対立してしまいます。

次に、質問者様が試みられている様に、ライン用の背景画像を用意してbackgroundプロパティでラインを引こうとした場合：

・画像のサイズは固定値、それに対してテキスト部分はボリュームも流動的（何行になるかわからない）且つ文字サイズも可変である。という事は、縦方向のリピートの間隔を可変状態にする事はできない（縦26pxの画像であれば、必ず26px毎の間隔でレンダリングされる）のに、その上に表示されるのは可変状態のテキストである（line-heightを26pxと固定しても、テキスト部分は文字サイズの変更に対して相対的に変わる為、常に26px毎の間隔を保つというのは不可能）。

ここでも条件が対立します。これが、質問者様が現在抱えておられる：

> Firefox2で崩れる事を確認しました。
> ご指摘いただいた文字サイズの変更には対応できなくなりました。

…という不具合の理由です。現在のところ、この手法での万全の解決策というのは出ていないと思います。この件（ノート風の罫線にテキストをレイアウトする）について参考になる記事がありました。

【参考】http://builder.japan.zdnet.com/comment/story/0,3 …

ここでも、このtipsを公開した側も自ら「拡大縮小しても罫線とずれないブラウザは「フルページズーム」を行うブラウザとIEとなります」と結論づけています。また追記としてそれらの回避策なるものも掲載してるのですが、「（「文字が小さいから拡大して見たい」という操作が行えなくなる為）追記した対策がかなり乱暴な方法である」という批判的コメントも受けています。個人的には私もそのコメントに同意するところです。

という事で、何かを諦めないと…無理じゃないかと思われます。

(1)テキスト部分を全部画像にする
(2)罫線を引かない
(3)テキスト部分にのみborderプロパティで罫線を引く（ANo.2のサンプルの状態　※少々変更を施せばリストマーク的画像部分の下も罫線を含める事も可能）
(4)親ボックス（li）毎の区切り線（border/backgroundプロパティ何れでも可）としてのみ引き、テキストが複数行になってもラインは常に最後に一つ
(5)フルページズーム機能の付いたブラウザでフルページズームを行った場合のみ不具合が出なければ良く、それ以外のケースは考慮しない（上記の参考記事の手法を流用）

メンテナンス、アクセシビリティの面から言って(1)は論外でしょうね。(2)は見た目の印象が変わりますね。(3)は見ての通り、"text-decoration: underline;"の形状違いという感じでしょう。(4)はボーダーがアイテム毎の区切りという役目に変わります。(5)はほぼ希望の仕様がかなうが、一部の環境での不具合を切り捨てる事になります。

ちなみに、ANo.2で補足された質問者様のソースだと、マウスオーバー時に背景画像の点線は非表示になってしまいますが、それは構わないのでしょうか？
あと、

> IE6, IE7でロールオーバー時、Firefox2, 3と異なり1pxほど下の位置から背景が変わってしまいました(上記のソースで再現します)。
> 原因はbodyのfontという事は分かったのですが、bodyのfontの指定を残しつつ、回避する良い方法をご教示いただけるようでしたら宜しくお願いします。

これはちょっと意味がわからなかったのですが、IE6/IE7上では「ロールオーバー時」のリストマーク的画像の位置が、ロールオーバーしていない状態の時と変わってしまう（動いてしまう）という事ですか？質問者様のソースをコピペして検証してみましたが、その様な現象は確認できなかったものですから。
※ANo.2でのサンプルにフォントの指定部分のみ追加していましたが、やはり特に不具合はありませんでしたし…

こちらの解釈違い等ありましたら、具体的に補足して下さい。

この回答への補足

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

> …つまり、liのテキスト（含むリストマーク画像）の背景として点線状のノート罫線の様なものを引きたいという事ですね。
はい、そうです。

ご教示いただいた内容より、CSSでやりたい事を完全に満たすのは無理との件、了解いたしました。
ちなみにお教えいただいたリンク先には「IEは大丈夫」と記載されておりますが、私のソースを試してみた所、IE6とFirefox2では駄目で、IE7とFirefox3では良いように見受けられました。

また、何かを諦めないといけない件、了解いたしました。
どれを諦めるか検討させていただいた所、今の所下記のように考えております。
(1)については私がメンテナンスを行わない関係上、採用する事は出来ない状況となっております。
(2)についてはデザインが変わってしまうため、採用する事は難しい状況です。
(3)についてはデザインが変になってしまう為、採用する事は難しい状況です(この点線はhttp://www.itmedia.co.jp/の画面左下の「アクセスランキング」の各順位間の間仕切りもかねているためです)。
(4)についてはデザイン的な意図がノート風の罫線のようで、これを変更するのは難しい状況です。
というわけで、消去法で(5)を採用する方向で検討したいと思います。

> ちなみに、ANo.2で補足された質問者様のソースだと、マウスオーバー時に背景画像の点線は非表示になってしまいますが、それは構わないのでしょうか？
マウスオーバー時にマウスオーバーしたリンク部分の下側の点線が消えてしまうのは確認いたしました。
ご指摘ありがとうございます。
出来れば回避したいと思いますが、これについても諦めないといけない事になってしまうのかも知れません。

それと下記の件ですが、
> これはちょっと意味がわからなかったのですが、IE6/IE7上では「ロールオーバー時」のリストマーク的画像の位置が、ロールオーバーしていない状態の時と変わってしまう（動いてしまう）という事ですか？質問者様のソースをコピペして検証してみましたが、その様な現象は確認できなかったものですから。
> ※ANo.2でのサンプルにフォントの指定部分のみ追加していましたが、やはり特に不具合はありませんでしたし…
ANo.2でのサンプルにフォントの指定部分のみ追加してみた所、この状態では違いが分からないことを確認しました。
ANo.2でのサンプルのmargin-bottom: 0.3em;を削除していただいた上で、フォントの指定していただけるとご確認いただけるかと思います。
IE7でロールオーバー時、ロールオーバーした箇所の上側の点線と、ロールオーバーにより変更された背景画像の間にわずかですが隙間が出来ているのがご確認いただけるかと思います。
私のサンプルでは1行の高さが大きい為か、よりはっきりとご確認いただけるかと思います。

以上、宜しくお願いします。

補足日時：2009/03/31 17:53
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： abril
  • 回答日時：

arrow_normal.gifとarrow_over.gif背景画像にしてはいけない理由がありますか？見る限り、その画像自体はリストマーク的なもので特に意味があるわけではない様ですし、何より今のソースだと、CSSを外した時に、マウスアウト時マウスオーバー時の画像両方が常に表示されてしまい、ちょっとおかしな構造になります。

あと、点線部分を画像にしていますが、多分今の方法だとFirefox等で閲覧者側が文字サイズを変更する事によって崩れたりするのではないかと思います（検証してませんので、推測です）。
背景画像にして良いのなら、aの中でspanを入れ子にする（その変わりimgでのマークアップがなくなりますので、コードも今よりすっきりします）事で実現できると思いますが。
----------------------------------------------------------------------
【サンプル】※点線の色は仮に黒としてあります。
----------------------------------------------------------------------
（省略）
<style type="text/css">
<!--
img {
border: 0;
}
#navi_link {
width: 170px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#navi_link li {
line-height: 140%;
margin-bottom: 0.3em;
}
#navi_link a {
display: block;
height: 100%;
text-decoration: none;
color: #333333;
background: url(arrow_normal.gif) 4px 5px no-repeat;
padding-left: 18px;
}
#navi_link a:hover {
color: #c9c;
background: url(arrow_over.gif) 4px 5px no-repeat #3ff;
}
#navi_link a span {
border-bottom: dashed 2px #000;
}
-->
</style>
</head>
<body>
<ul id="navi_link">
<li><a href="index.html"><span>1行で収まる場合</span></a></li>
<li><a href="index.html"><span>2行にまたがる場合2行にまたがる場合</span></a></li>
<li><a href="index.html"><span>1行で収まる場合</span></a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------
いかがでしょうか？これでIEでもFirefoxでもほぼ同じ結果が得られますが。
不具合ある様でしたら補足して下さい。

この回答への補足

ありがとうございます。

最初にご指摘の件ですが、下記となります。
> arrow_normal.gifとarrow_over.gif背景画像にしてはいけない理由がありますか？
ありません。

> 見る限り、その画像自体はリストマーク的なもので特に意味があるわけではない様ですし、何より今のソースだと、CSSを外した時に、マウスアウト時マウスオーバー時の画像両方が常に表示されてしまい、ちょっとおかしな構造になります。
この画像はリストマーク的なものでデザインとしての意味はありますが、それ以上の意味はありません。
また、CSSを外した際は両方表示されてしまいました。
ご指摘ありがとうございます。

> あと、点線部分を画像にしていますが、多分今の方法だとFirefox等で閲覧者側が文字サイズを変更する事によって崩れたりするのではないかと思います（検証してませんので、推測です）。
Firefox2で崩れる事を確認しました。
ご指摘ありがとうございます。

ご教示いただいたソースを試してみた所、質問時のソースでは実現できていて、ご教示いただいたソースで実現できていない事が一箇所ありました(最初の質問時の【やりたい事】には下記の件は明記してありませんでした。申し訳ございません)。

1. 文字の下にしか点線が表示されなくなりました(画像の下、テキスト表示が終わった右端部分でも点線を表示したいです)。


一応下記のソースのように点線を画像化すると意図した動作にはなりますが、ご指摘いただいた文字サイズの変更には対応できなくなりました。

（省略）
<style type="text/css">
<!--
body {
font:13px "ＭＳ Ｐゴシック";/* Firefox用 */
*font-size:small;/* IE7用 */
*font:x-small;/* IE6用 */
}
img {
border: 0;
}
#navi_link {
width: 170px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#navi_link li {
line-height: 200%;
background-image: url(bg.gif);
}
#navi_link a {
display: block;
height: 100%;
text-decoration: none;
color: #333333;
padding-left: 18px;
background-image: url(arrow_normal.gif);
background-repeat: no-repeat;
background-position: 4px 11px;
}
#navi_link a:hover {
color: #c9c;
background-color: #3ff;
background-image: url(arrow_over.gif);
background-repeat: no-repeat;
background-position: 4px 11px;
}
#navi_link a span {
/*border-bottom: dashed 2px #000;*/
}
-->
</style>
</head>
<body>
<ul id="navi_link">
<li><a href="index.html"><span>1行で収まる場合</span></a></li>
<li><a href="index.html"><span>2行にまたがる場合2行にまたがる場合</span></a></li>
<li><a href="index.html"><span>1行で収まる場合</span></a></li>
<li><a href="index.html"><span>2行にまたがる場合2行にまたがる場合</span></a></li>
<li><a href="index.html"><span>1行で収まる場合</span></a></li>
</ul>
</body>
</html>

【使用ファイル】
index.html(上記ソース)
bg.gif(2x26で一番左下の1ピクセルのみに任意の色がついている画像)
arrow_normal.gif(10x10の任意の画像)
arrow_over.gif(10x10の任意の画像)

それとこれは当初の質問には記載しておらず、作成しているウェブサイトに移植した所で始めて気がついたことですが、IE6, IE7でロールオーバー時、Firefox2, 3と異なり1pxほど下の位置から背景が変わってしまいました(上記のソースで再現します)。
原因はbodyのfontという事は分かったのですが、bodyのfontの指定を残しつつ、回避する良い方法をご教示いただけるようでしたら宜しくお願いします。

なおbodyにfontを適用している理由は下記となります。
http://www.weblab.co.jp/blog/2009/01/post_65.html

以上、宜しくお願いします。

補足日時：2009/03/30 16:54
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： reverie013
  • 回答日時：

思いついた解決方法



・文字まで全部一繋がりの画像にしてしまう。
・画像は画像、文字は文字で別のブロックにして横並びにする。
・...とここまで書いて思ったが、リストのマークを画像にする方法がなかったっけ？
　というわけで↓
　http://www.tagindex.com/stylesheet/list/list_sty …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

No.2のabrilさんのソースで9割がた意図した動作となりました。
そのため、abrilさんのソースをベースに作成させていただきたいと思います。

以上、宜しくお願いします。

通報する
お礼日時：2009/03/30 17:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報