外部ファイルでスタイルシートを読み込んで画像を固定していますが、
その画像の一部にリンクを貼りたいのです。
通常のイメージマップは作成できるのですが
スタイルシートではできません。
教えてください。
よろしくお願いします。

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

A 回答 (2件)

こんにちは。



スタイルシートはレイアウトやテキストの装飾などを制御するもので
リンクを実現させるような機能はありません。

リンクは今まで通りHTMLで書くしかないと思います。

イメージマップ以外でそのような機能を実現させるには、
テーブルなどでレイアウトし画像を分割し、その一部にリンクを貼る
などの方法を考えてみてはいかがでしょう?
    • good
    • 0
この回答へのお礼

なるほどそうでしたか。
早速steelgreenさんの言うとおりやってみたいと思います。
ありがとうございました。
ほんと助かりました。

お礼日時:2002/02/08 11:17

こんにちは。


steelgreenさんのご指摘の通り、スタイルシートではリンクを実現する事はできないと思います。

他には、レイヤーを作成して、その中に透過GIFなどを張り込んでそこにリンクを張る、などはいかがでしょうか?
    • good
    • 0
この回答へのお礼

そんな手もありますか?
がんばって挑戦してみますね。
ありがとうございます。

お礼日時:2002/02/10 00:48

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

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

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

Q外部スタイルシートが読み込めない

こんにちは。
外部スタイルシートが読み込めず
困っています。
HTMLは、

<html>
<head>
<link rel="stylesheet" href="controlbox2.css" type="text/css">
</head>
<body>
<div class="modal">syun</div>
</body>
</html>

controlbox2.cssは

.modal{
background-color:#fff;
padding:10px;
border:1px solid #333;
}

だけです。
もちろん同じディレクトリで
あり何度も確認しています。
ブラウザは、IE7です。

ヘッダー部分に
スタイルシートを書くと
当然効果があります。
<head>
<style type="text/css">
.modal{
background-color:#fff;
padding:10px;
border:1px solid #333;
}
</style>
</head>

文字コードは、ともに
SHIFT_JISで保存しています。
何が悪いのか、
全くわかりません。
何か分かる人がいましたら、
よろしくお願いします。

こんにちは。
外部スタイルシートが読み込めず
困っています。
HTMLは、

<html>
<head>
<link rel="stylesheet" href="controlbox2.css" type="text/css">
</head>
<body>
<div class="modal">syun</div>
</body>
</html>

controlbox2.cssは

.modal{
background-color:#fff;
padding:10px;
border:1px solid #333;
}

だけです。
もちろん同じディレクトリで
あり何度も確認しています。
ブラウザは、IE7です。

ヘッダー部分に
スタイルシートを書くと
当然効果があります。
<h...続きを読む

Aベストアンサー

たぶんなにか簡単なミスがつみかさっているのでしょうね。
とりあえずurl欄にcssを直打ちしてソースが表示されることを
確認してみてください。
キャッシュをクリアするためctrl+f5もしてみてください

Q外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか?


以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。


【例 : 外部スタイルシート】
.main {
color : red;
text-align : center;
}

.main.sub1 {       ←実際はこのような指定ではできない
text-align : left;
}

.main.sub2 {       ←実際はこのような指定ではできない
color : blue;
}


【例 : htmlファイル】
<div class="sub1">あいうえお</div>  ←左寄せ&赤字にしたい
<div class="sub2">あいうえお</div>  ←センタリング&青字にしたい

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか?


以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。


【例 : 外部スタイルシート】
.main {
color : red;
text-align : center;
}

.main.sub1 {       ←実際はこのような指定ではできない
text-align : left;
}

...続きを読む

Aベストアンサー

#2です。

> .main.sub1 {       ←実際はこのような指定ではできない
一応、その書き方も有りです。
例えば、以下のように。

--------
<style type="text/css"><!--
.main { color: orange; text-align : center; }
.main.sub1 { color: blue; }
--></style>
</head>
<body>
<div class="main sub1">あいうえお</div>
--------

Qスタイルシートでかけるものはスタイルシートを使った

非推奨タグでなくても、スタイルシートでかけるものはスタイルシートを使ったほうが良い?

htmlでサイトを作ってるのですが、スタイルシートを使うべきかhtmlで書くべきか、
どちらでもかける場合があります。

その際どちらを使ったほうがいいのでしょうか?

Aベストアンサー

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
 いにしえの昔の武士の侍が、馬から落ちて落馬して、・・・【中略】・・・腹を切って切腹した。

 ここで、「構造とプレゼンテーションの分離」が重要なのでしたら
<p>
 <strong>「構造とプレゼンテーションの分離」</strong>という概念を理解しておかなければなりません
</p>
でしょうし
<p>
 <b>いにしえ</b>の<b>昔</b>の<b>武士</b>の<b>侍が、<b>馬から落ちて</b><b>落馬</b>して、・・・【中略】・・・<b>腹を切って</b><b>切腹</b>した。
</p>
 でしょう。

 その上で、スタイルシートで
p strong{color:red;font-weight:normal;}
p b{color:green;font-weight:normal;text-decoration:underline;}
とか・・
 しかし、すくなくとも
<p>
 <span class="stong">「構造とプレゼンテーションの分離」</span>という概念を理解しておかなければなりません
</p>
とかいて
p span.strong{font-weight:bold;color:red;}
とするのは、望ましくはありません。

 もっと、良く指摘されるのが、配置をtableを使って行うことです。tableは、二次元以上のデータをマークアップするものですが、これを他の用途に使うのは誤りです。

 それぞれのタグの用途は仕様書に書かれています。
 ⇒要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )
 から要素名をクリックして説明を読んでください。

>その際どちらを使ったほうがいいのでしょうか?
 それは、その要素が何であるかがわからないので、一概には答えられません。--これもわかると思います。
 HTMLは、その文書を読み解き、その文書を構成する要素に分解して、それぞれの要素をタグでマークアップしていく言語です。文書を書く本人しか、その要素(部品)をどの要素とは判断できないのです。
 そのうえで、スタイルシートで自由にプレゼンテーションを変更できる。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
と考えたら答えは出ると思います。

(注)HTML4.01では、この文書構造を示すタグ--要素が足りませんでした。そのため、DIV,SAPNという要素が用意されて
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 とされていましたが、ご存知の通りこれが正しく理解されずに<div id="wrapper"><div id="contener"><div id="Left">のようなおかしなマークアップが氾濫してしまいました。本来は、<div class="article"><div class="section"><div class="nav">のようになるはずでした。
 その反省から、「HTML5 では、文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」header,section,footerなどの新しい要素が採用され、DIVやSPANは原則使わない--他に適当な要素がないときの最後の手段となりました。

>その際どちらを使ったほうがいいのでしょうか?
 これで悩むことがありませんよう、役立てば良いです。
 1度仕様書を通しで読んでみましょう。答えはそこにあります。

判断は、「どちらでもかける場合があります」ではありませんよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という根本を理解していないと、この質問になります。
 HTMLは、あくまで文書構造をマークアップするものです。例えば、太字で表示したい語句があったとします。
[例文]
 「構造とプレゼンテーションの分離」という概念を理解しておかなければなりません。
...続きを読む

Qスタイルシート(CSS)の中にテーブルのようなスタイルシートをつくりたいです。

Dreamweaver8にてHPを作成しております。

今回CSSをやってみようと思い試行錯誤しながらがんばっているのですが、
現在スタイルシートのfloatタグなどを使って、
ヘッダー、メニュー、コンテンツ、フッターというよくある構成で作っております。
そしてコンテンツ部分以外はテンプレート機能を使い共有できるようにしています。

そして新しいページを作る際、コンテンツ部分だけを編集していくのですが、真ん中で2つにわかれた2段組の文章をつくりたくて、テーブルを使用したところ、テーブルが縦に長くなるとCSSで指定した範囲を超えてしまいレイアウトが崩れてしまいます。

これがテーブルでなく文章でなら縦に長くなっても自動的にCSSの高さが長くなってくれます。

ですので、題名のようにCSSでテーブルのような機能のあるものを教えていただきたいのですが、素人でなにぶん申し訳ないですがよろしくお願い致しますm(_ _)m

Aベストアンサー

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定しているので(#cccccc)
そこを別の色に変えると出てきませんか?

> その幅ではできずテキストを入力するにつれて枠線の幅も自動的的に伸びていくという感じです。
下記のCSSの記入方法で何度か試してみたのですが、テキストは延々と伸びていかず
きちんと自動的に折れ曲がってくれるのですが…。spanではなくdivで書かれてみてはどうでしょうか。

CSSファイル例

.table{
float: left;
width: 200px ;/*テーブルの幅*/
background-color: #ffffff;/*テーブルの色*/
background-image : url(sample.gif);/*テーブルの中に入れる画像(画像ファイル名は任意) */
margin: 10px;/*テーブルとテーブルの余白*/
border: solid 1px #000000;/*テーブルの枠の色(今回は黒)*/
padding: 0.5em;/*文字周りの余白*/

html記入例

<body>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
<div class="table">文字など文字など文字など文字など文字など文字など文字など文字など</div>
</body>

横に2つ並べるのでしたら「float: left;」を入れると横に並びます。
ただ、テーブル幅を狭く設定して<div class="table">~</div>をずらっと
並べてしまうと、その分だけ横にテーブルが並んだようになってしまうので
その場合はひとつひとつ指定しなくてはならなくなります。

> 画像を挿入するとなぜか枠線が消えてしまうのですが、どうしてでしょうか。
これはテーブルの背景に画像を挿入されているということでしょうか?
それともbodyの中にということでしょうか?
枠線の色をかなり薄いグレーに設定...続きを読む

Qスタイルシートで位置固定すると、スタイルシートでの改ページ指定ができなくなる

スタイルシートのpositionを使用して位置固定すると、page-break-beforでの
改ページができなくなります。
位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか?
ブラウザはIE5.5以降を考えてます。

======================================================================
<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:absolute; top:150px; page-break-before:always;">
テスト2(この文字の直前で改ページさせたい)
</div>
<div style="position:absolute; top:200px;">
テスト3
</div>
</body>
</html>
======================================================================

宜しくお願いします。

スタイルシートのpositionを使用して位置固定すると、page-break-beforでの
改ページができなくなります。
位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか?
ブラウザはIE5.5以降を考えてます。

======================================================================
<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:absolute; top:150px; page-break-before:always;">
テスト2(この文字の直前で改ページさせたい)
<...続きを読む

Aベストアンサー

色々試したところ,以下のソースで成功しました(IE6)。

<html>
<body>
<div style="position:absolute; top:100px;">
テスト1
</div>
<div style="position:relative;page-break-before:always;">
<div style="position:absolute; top:150px;">
テスト2(この文字の直前で改ページさせたい)
</div>
<div style="position:absolute; top:200px;">
テスト3
</div>
</div>
</body>
</html>


人気Q&Aランキング

おすすめ情報