<table width="800" height="100" border="0" cellpadding="0" cellspacing="0" style="background-image:url(images/XXXXXX.jpg);" >
上記のURLにて、テーブルに画像のリンクを張っています。
この画像リンクに、下記のようなリンクタグを使いたいのですが、いろいろと試したのですが、
うまく出来ません。どなたか、ご教授いていただけないでしょうか?
<a href="http://www.XXXX.co.jp/">通常のリンクテキスト </a>
宜しくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
質問文を整理願います。
htmlタグ
「<a href="http://www.XXXX.co.jp/">通常のリンクテキスト </a>」
これでは
「通常のテキストリンク 」にしかなりません
「background-imageにリンク」であれば
<a href="http://www.XXXX.co.jp/"></a>になり
CSSに display:block;を使うことで可能になります。
No.1
- 回答日時:
ひょっとして、tableを使ってデザインしている?
もしそうなら、早々に変更しましょう。HTML4.01の勧告(1999)以来、強く否定し続けられている手法です。
ウェブ標準だと
<div class="nav"><!-- HTML5だと<nav> -->
<h2>サイトマップ</h2>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
とかになります。
その上で、
div.nav{width:800px;height:100px;margin:0 auto;position:relative;background-image:url()}
div.nav ul,div.nav ul li{display:block;list-style-type:none;margin:0;padding:0;}
div.nav ul li{width:180px;float:left;line-height:100px;position:relative;text-align:center;}
div.nav ul li a{display:block;width:100%;height:100%;border:1px gray solid;}
とかにデザインします。
★文書構造とデザインと分けること
それによって、まったく自由自在にデザインできることになります。縦だろうが横だろうが、リンクにポイントすれば浮き上がったり、サブメニューを表示したり・・・、HTML羽手を加えずデザインをまったく異なる--希望のものにデザインできます。
もちろんHTMLもシンプルでわかりやすいです。
HTMLの該当部分がどのような文書構造なのかを示してください。(デザインは一切考えない)
次にどのようにデザインしたいか、簡単なスケッチでも
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS「table-cell」で横並びにし...
-
liタグの中に<p>タグやら<dl>を...
-
CSS質問:大手サイトを見ると何...
-
リセットCSSについて
-
円形の配置にするコーディング...
-
【至急】ul li 行間調整ができ...
-
HPを作成していますが、適切な...
-
ol、liをスタイルシートで中央寄せ
-
ol li の回り込みの避け方について
-
divタグ内のコンテンツが重なっ...
-
親ページ側からインラインフレ...
-
jQueryの導入方法について
-
CSSで、親要素にだけ中央揃えを...
-
画像にリンクを張ると画像がず...
-
「・」(黒い点)を非表示にした...
-
表の文字サイズ変更ボタンにつ...
-
HTMLで組織図を作成する方法
-
文字をテーブルで囲ったような...
-
リストマーカーをボックス内に...
-
リストの左余白の削除方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
<ul><li></li></ul>にするメリ...
-
html/cssの、navを2段にする...
-
divタグ内のコンテンツが重なっ...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
リストを2つに分割して、それぞ...
-
ページを開いているときのリン...
おすすめ情報