親子におすすめの新型プラネタリウムとは?

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
background:url(../img/main_visual.jpg) no-repeat;
width:666px;
height:418px;
text-indent:-9999px;
}

#main_visual a{
  display:block;
width:338px;
height:43px;
  position:relative;
top:324px;
left:308px;
}

上のように、666 X 418の画像の中に、
上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、
firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。

どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか? 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか?^^;

このQ&Aに関連する最新のQ&A

A 回答 (4件)

ANo.2です。


お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。
ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
(省略)
<body>
<p>リンクより上のブロック</p>

<ul id="main_visual">
<li><a href="#">ここに文言が入ってます。</a></li>
</ul>

<p>リンクより下のブロック</p>
</body>
(省略)
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
ul#main_visual {←"ul"はなくてもいいです(以下同)
position: relative;
background: url(../img/main_visual.jpg) no-repeat;
width: 666px;
height: 418px;
list-style: none;
margin: 0;
padding: 0;
}
ul#main_visual li {
position: absolute;
top: 324px;
left: 308px;
width: 338px;
height: 43px;
}
ul#main_visual a {
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}
---------------------------------------------------------------------

ANo.2からの変更点は:

・#main_visualをulのマークアップに都合がよい様にディフォルトのリストスタイルや余白をリセット
・aをliの子要素とする為、位置決めや縦横サイズはliで指定
・aには親要素の幅と高さを継承させる

だけです。リンクエリアとしている背景画像の部分には当然リンク箇所である事がわかる様な文言が明示されているなり、クリックを誘導する様なボタン的デザインがされているものと想定しています。

この回答への補足

度々ご丁寧にご説明頂き、恐縮です><
ほんと、大変ためになりました!ありがとうございます!!
また、改めてCSSの奥深さというか、楽しさ?wに触れましたよー。
ありがとうございます!

補足日時:2009/02/22 14:28
    • good
    • 0

この場合、#main_visuaという、祖先ブロック内でabsolute;で位置指定をすべきです。


その場合、祖先要素はposition:static以外でなければなりません。
 また、アクセスビリティ・ユーザビリティの意味でポインターが乗ったときにリンクがあることを明示したほうがよいでしょう。

 なお、これは余計かもしれませんが、画面表示のためだけに、わざわざ#main_visualという要素を作られているようですが、HTML/CSSの考え方からは、おかしいです。これは、単なるリンクですから、<ul><li><a href=""></a></li></ul>等とマークアップして、@mediaをスクリーン用に指定しておくと、携帯やサーチエンジン、読み上げブラウザにも問題ありません。
 もちろん、スタイルシートを解除しても意味のあるソースになります。
★将来的(XHTML2.0)には、<nl>(Navigation List)という要素が加わるでしょう。
 とりあえず、それらを含めてソースを示しておきます。
 IEは、bodyやhtmlのmargin/paddingに対して解釈が異なるため、このブロック自体の位置は異なりますが、それは簡単にあわせることが出来ますので省きます。
<!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>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
@media screen{
ul#navigation_Link {
position:relative;
background:url(../img/navigation_Link.jpg) no-repeat;
width:666px;
height:418px;
padding:0px;
border: 1px solid red;
}
ul#navigation_Link li{
display:block;
width:338px;
height:43px;
position:absolute;
top:324px;
left:308px;
padding:0px;
border:1px solid green;
}
#navigation_Link li a{
position:relative;
top:-4px;
left:-4px;
display:block;
margin:0px;
border:4px solid transparent;
width:100%;
height:100%;
text-align:center;
text-decoration: none;
}
#navigation_Link li a:visited{
border-style:outset;
border-color:transparent;
}
#navigation_Link li a:hover {
border-style:outset;
border-color:gray;
}
#navigation_Link li a:active {
border-style:inset;
border-color:gray;
}

#navigation_Link li a span{
visibility:hidden;
}
}
-->
</style>
</head>
<body>
<h1>title</h1>
<h2>subTitle</h2>
<ul id="navigation_Link">
<li><a href="./index3.html"><span>トップページへ</span></a></li>
</ul>
</body>
</html>
    • good
    • 0
この回答へのお礼

ORUKAさん!教科書のようなご丁寧なアドバイス!!とってもためになりましたっ!!本当にありがとうございます!
>携帯やサーチエンジン、読み上げブラウザにも問題ありません。
なるほど。。そこまで考慮できて、一人前ですよね。。
今回は純粋にソース以外にもCSSに対して色々考えさせられました、ありがとうございました!

お礼日時:2009/02/22 14:32

> firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。



※ちなみに、質問者様が提供されたCSSのソースの"#main_visual a"のプロパティ指定の中に全角スペースが入ってます。もしオリジナルのCSSから”そのまま”コピペされたのだとしたら、Firefox等で挙動がおかしいのはそのせいである可能性が高いです。この位置での全角スペースの記述は認められていませんので、プロパティの解釈が無効になります。
以下はオリジナルには全角スペースが入ってない、単なるコピペの際のミス、という前提で話をしています。

質問者様のソースでそのまま再現しても、Firefox2/3、Safari3共に「(top:0 left:0)にリンクエリアがきてしまって」という状況にはなりませんが(DOCTYPE等が不明ですので、一応HTML4.01 StrictとXML宣言付XHTML1.1の両方のサンプルで試してみましたがいずれも同じでした)?

ただ、リンクエリアが#main_visualのボックスに対し、正確に"top: 324px; left: 308px; width: 338px; height: 43px;"となっているかというと、微妙にずれている様です。それは、ちょっと現在のCSSの指定におかしなところがあるからです。

もしも、#main_visualのボックス(この場合はdivでマークアップしてあると仮定します)の中に、リンクエリア以外の要素も含まれるのであれば、positionやtext-indentを指定するポイントが相応しくないと思います。以下は、その点を考慮し、且つリンクエリアが質問者様ご希望の各環境でも"top: 324px; left: 308px; width: 338px; height: 43px;"で表示される様に修正してみたサンプルです。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
(省略)
<body>
<div id="main_visual">
<p>リンクエリアより前に記述したブロック</p>

<a href="#">リンクエリア</a>

<p>リンクエリアより後ろに記述したブロック</p>
</div>
</body>
(省略)
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#main_visual {
position: relative;←追加
background: url(../img/main_visual.jpg) no-repeat;
width: 666px;
height: 418px;
}
#main_visual a {
display: block;
position: absolute;←修正
top: 324px;
left: 308px;
width: 338px;
height: 43px;
text-indent: -9999px;←#main_visualではなくこちらに指定
}
---------------------------------------------------------------------

以上のサンプルで、IE6/7、Firefox2/3、Safari3で問題なくご希望通りの挙動になりますが。
本件程度のものであれば、ハックを駆使せずとも実現できるものと思います。ハックはあくまで最終手段なので…
    • good
    • 0
この回答へのお礼

abrilさん、とってもご丁寧なお答えありがとうございました!!
abrilさんのおかげで解決致しました!!!

全角は、、ハイ、コピペミスです^^;

あと、htmlのほうは、
<div id="main_visual"><!--MAIN VISUAL-->
<a href="https://www.rink.com">
ここに文言が入ってます。
</a>
</div><!--MAIN VISUAL-->

これだけのシンプルなもんです。。
なので、
>リンクエリア以外の要素も含まれるのであれば
入ってない、ことになりますよね?

なるほど、、、
relativeを親ボックスにかけておいて、
子ボックスに、absoluteで指定する。。。

よくよく考えてみれば、確かにそうですよね。。
あー、、、リンクエリア以外の、ボックスレイアウトではたまにこうやってレイアウトしてましたが、そうですよね、、リンクエリアもこうやって作ればクロスブラウザーのためにpaddingやら、marginやらで悩む必要や、ハックを使用する必要はないんですよね。。これからそうしようー!!
(以前、ハックは最終的手段だから、と同じことを言われました^^;)
今回は、本当にためになりました!!!質問させて頂いてよかったです。
本当にありがとうございました!

お礼日時:2009/02/17 14:51

aは元々inline(block化してるけど)だから上位の text-indent:-9999px; の影響を受けてるだけじゃない?



一旦更にdivで囲ってみるか、文字を消したいなら visibility:hidden で対応してみるとか。
    • good
    • 0
この回答へのお礼

SAYKAさん、お答えありがとうございます。
visibility:hiddenだと、文言だけでなく、背景画像も消えてしまい。。。
text-indentってSEO的にも色々議論がわかれるところですけどね。。色々と研究してみたいと思いますー、ありがとうございます。

お礼日時:2009/02/17 14:43

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q背景画像をリンクにする?

タイトルの通りなのですが、よくブログなどにある、headerの部分を画像にしてtopへのリンクを張る方法が分かりません。
例えば森永卓郎さんのブログだと、タイトルの「つながるモリタクBLOG」の部分にリンクが張ってあり
ブログのトップページに移動するようになっていますが、このクリックできる範囲を広げて、
緑色の背景画像の部分をクリックしても同じく移動できるように指定することはできませんでしょうか?
単に画像にリンクを張るだけならできますが、背景にしてみたところ詰まってしまいました…。
よろしくお願いいたします。

Aベストアンサー

背景とタイトルを別に考えないで、背景も含めた大きな1枚の画像にしたらどうですか?
<a href=""><img src="" alt="タイトル" widht="500" height="50"></a>

もしくはスタイルシートで範囲を指定するか
a#header{
display: block;
margin: 0px;
padding:0px;
width: 500px;
height: 50px;
}

<a href="" id="header">タイトル</a>

Q外部CSSで画像にリンクを貼りたい

まだCSS初心者ですので宜しくお願いします。

外部CSSに位置指定した「画像」にリンクを貼りたいのですが
いろいろ調べてもその方法がわかりません。
以下のタグにどのようにリンクの指定をすればよいでしょうか?

div#index{
margin-top:5px;
background:url(../img/oribox.gif) no-repeat right bottom;
}

また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。

Aベストアンサー

・backgroundに表示したい画像ファイル(../img/oribox.gif)のリンクならお書きになった書き方で適正だと思います。ただしサーバでその場所にファイルが格納されていることが前提。

・アンカー<a></a>をつけたいと言われるなら、実体のあるテキストを置くか透明な画像でも置かない限りbackgroundにアンカーは無理。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q背景画像に全体または部分的にリンクをつけたいです

ヤフーなどで検索が少しでも上位にくるように
<h1>タグにはテキストを使用し、その背景に画像を入れます。
そして、その画像にリンクをつけたいです。
htmlで<img>にエリアを指定してリンクを任意の場所に設置する方法はありますが、
http://www.tagindex.com/html_tag/img/img_map.html
cssで指定した画像に使う方法はないのでしょうか。
<h1>内のテキストには特にリンクがあってもなくても構いません。

<html lang="ja">
<head>
<title></title>
<style>
#aaa{
height: 100px;
background-image: url(sample.png);
background-repeat: no-repeat;
}
#aaa h1{
font-size: 10px;
margin-left: 200px;
padding-top: 10px;
font-weight: 400;
line-height: 135%;
}
#aaa h1 span{
font-size: 17px;
font-weight: 900;
line-height: 225%;
}
</style>
</head>
<body>
<div id="aaa">
<h1><span>コメント</span><br />コメントコメントコメント</h1>
</div>
</body>
</html>

ヤフーなどで検索が少しでも上位にくるように
<h1>タグにはテキストを使用し、その背景に画像を入れます。
そして、その画像にリンクをつけたいです。
htmlで<img>にエリアを指定してリンクを任意の場所に設置する方法はありますが、
http://www.tagindex.com/html_tag/img/img_map.html
cssで指定した画像に使う方法はないのでしょうか。
<h1>内のテキストには特にリンクがあってもなくても構いません。

<html lang="ja">
<head>
<title></title>
<style>
#aaa{
height: 100px;
background-image: url(sample.pn...続きを読む

Aベストアンサー

どこで聞きかじった情報か知りませんが、検索結果の順位に小細工は意味ありません。
★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp )

検索エンジン最適化(SEO)とは、検索エンジンがきちんと情報を得られるようにマークアップすることで、
・<title></title>や<h1>見出し</h1>が内容に一致しているか?
・文書構造にしたがって正しくマークアップされているか。重要な語句は<strong>や<em>、段落は<br>じゃなく<p>で括られているか・・、レイアウトのためにtableを使わない・・文字を画像に置き換えていないか・・・などのことです。
[例 HTML4.01]
 <div class="header">
  <h1></h1>
  <div class="abstract">
  </div>
  <div class="nav">
   <ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
   </ol>
  </div>
 </div>
 <div class="section">
  ・・・・・
HTML5だと
 <header>
  <h1></h1>
  <div class="abstract">
  </div>
  <nav>
   <ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
   </ol>
  </nav>
 </header>
 <section>
  ・・・・・
  
というふうに、

もし見出しは文字で、見栄えは背景画像で表現するのはよいことですが、そこにリンクの有無は無関係です。
h1要素の画像にリンクを付けたかったら、上記の<nav>あるいは、<div class="nav">のリンクをボックスに変更して絶対配置で、その画像に重ねるのが良いですが、それでしたらナビゲーションブロック自体に背景を指定したほうが、SEO的には正しいです。

[例]上のHTML4.01の場合で、olの背景を画像にする場合
div.header div.nav{width:640px;height:480px;position:relative;background-image:url();}
div.header div.nav ol,div.header div.nav ol li{display:block;list-style:none;}
div.header div.nav ol li a{display:block;width:100%;height:100%;background-image:url();}
div.header div.nav ol li{width:100px;height:60px;position:absolute;left:10px top:10px;}
div.header div.nav ol li+li{left:110px top:10px;}
div.header div.nav ol li+li+li{left:220px top:10px;}

とか・・

★むやみやたらと#(id)を使ったら、SEOになりません。idやclass名は
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より
です。スタイルシートのためだけに、書くことはありません。上記のHTML,CSSのように、きちんと「文書に構造を付加するため」につかい、スタイルを適用するときは、カスケーディング機能(せっかくのカスケーディングスタイルシートですから)をつかいます。

どこで聞きかじった情報か知りませんが、検索結果の順位に小細工は意味ありません。
★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp )

検索エンジン最適化(SEO)とは、検索エンジンがきちんと情報を得られるようにマークアップすることで、
・<title></title>や<h1>見出し</h1>が内容に一致しているか?
・文書構造にしたがって正しくマークアップされているか。重要な語句は<strong>や<em>、段落は<br>じゃなく<p...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qリンク画像をCSSを使って背景画像にするメリット

リンク画像をCSSで設定するメリットは何ですか?

左上の「OKwave」のロゴマークもそうですが、なぜHTML言語のimgタグとaタグの組み合わせで、リンクを作っていないのでしょうか?
CSSで画像を背景画像として設定するメリットは何なのでしょうか?

すいません、ご教示願います。

Aベストアンサー

>imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか?
 一言で言うと「その画像は文書構造には無関係な背景だから」です。
 説明すれば長くなりますが、そもそもHTMLの最大の目的は、
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 ですね。ウェブページにアクセスするユーザーエージェントは、上記の例に加えて検索エンジンも含まれますが、画像が負担になる携帯電話などの帯域の狭いものもいます。画像の絵柄の意味を理解できるのは人だけです。人意外も訪問する・・

 それ以外にも随所に
「文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )」
「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のはまずい」
「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」

 たとえば、
<a href="htt://hge.com"><span>ほげ</span></a>
 と書かれていれば、スタイルシートで
a[href="htt://hge.com"]{background:url()****}
a[href="htt://hge.com"] span{display:none;}
 とすれば、携帯電話や検索エンジン、点字端末や読み上げソフトは率直にテキストとして理解します。また、さきでデザインを変えようとしたときにHTMLを書き換える必要もありませんね。

 リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。その場合でも、altにはきちんと代替文字を帰すべきですし、マークアップがナビゲーションリストのひとつでしたら、<div class="nav></div>(HTML4.01)、<nav></nav>(HTML5)で括るべきです。
 後者の場合も、
<div class="nav">
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>
としかマークアップしないことが圧倒的に多いです。私は・・
 だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。

>imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか?
 一言で言うと「その画像は文書構造には無関係な背景だから」です。
 説明すれば長くなりますが、そもそもHTMLの最大の目的は、
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境...続きを読む

Qスタイルシートの外部ファイルでリンク先を指定できますか

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウトをとっているのですが、
リンク先のひとつのレンタル掲示板が都合で何度も変わりました。
その都度、掲示板のリンク先を載せているページのソースを
書き換えました。

そこで、CLASSでの色などの指定ができるのなら、
リンク先も指定してしまえば、外部ファイルにして、
リンク先を変更しなければならなくなったときに、
外部ファイルだけにリンク先を変更するだけですむのでは?
と思いました。
しかし、参考書には色や背景などについてなら載っているのですが、
リンク先については書かれていませんでした。
無理でしょうか?

よろしくお願いします。
「最新スタイルシート辞典」(初版)を読んでいます。

外部ファイル読み込みによるスタイルシートを
作成する予定です。
(今まではエディタでHTMLタグを打って
ホームページを作成していました)

セレクタでCLASSを使って、
色などを指定することは分かりますが、
この要領で、リンク先を指定することはできますか?

よく、ホームページのページ構成で、
入り口から、いくつかのコンテンツに行く形のとき、
それぞれのコンテンツのページ上に他のコンテンツへのリンク先を
つけているレイアウトがよく見られますよね。

私もこのレイアウト...続きを読む

Aベストアンサー

こんにちは。

CLASSでの詳しい事は分かりませんが、
それでしたら、
一度ダミーファイルを作ってそこへリンクさせればどうですか?
そして、そのダミーファイルからセコンド0にて掲示板などへ転送させちゃうんですよ。

これでしたら、
ダミーファイルの転送先URLを書き換えるだけで済みますし。

都度、CLASSを書き換えるのと作業的には同じでしょう。

私はこういう方法で今までやってきました。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング