ホームページ作成初心者です。

ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。

CSSで横幅を設定した中に同じサイズの画像を配置しています。
詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。

html
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href#">あああ</a></li>
<li><a href#">あああ</a></li>
    <li><a href#">あああ</a></li>
    <li><a href#">あああ</a></li>
</ul>
<p><img src="image/message.jpg" width="200" height="65" border="0"></p>
<p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>
</div>

css
#contents #sidenavi2 {
padding: 0px;
float: right;
height: auto;
width: 200px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

情報が不足する点があるかもしれませんが、よろしくお願いいたします。

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

A 回答 (5件)

No.3です。

私の方は以下の点のみレスさせて頂きます。

> sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。
> 抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

それは、テキストメニューと画像のリンクボタンのそれぞれの格付けの様なものが同等なのか異なるのかによっても考え方は違ってきます。
また、テキストリンク部分と画像リンク部分にはそれぞれ異なるスタイルを与えたいのであれば、それぞれのマークアップで適切な要素ごとにclassなりidなりを設定してセレクタで区別すれば良いでしょう。

例えばですが、テキストリンク部分と画像リンク部分がそれぞれ「内容的に異なるグループのリスト」であるなら、下記の様にリスト自体を2つに分けるべきでしょう。スタイルは、それぞれul.fruitsとul.other_infoに対して指定します(ユニークだったらidでも)。

<ul class="fruits">
<li><a href="りんごの説明ページへリンク">りんご</a></li>
<li><a href="みかんの説明ページへリンク">みかん</a></li>
<li><a href="いちごの説明ページへリンク">いちご</a></li>
</ul>

<ul class="other_info">
<li><a href="代表者挨拶のページへリンク"><img ~></a></li>
<li><a href="資料請求のページへリンク"><img ~></a></li>
</ul>

一方、テキストリンク部分も画像リンク部分も「内容的に一連と見てよいグループのリスト」であるなら、下記の様に同一のリストのアイテムとし、スタイルはliごとにclassなりidなりを設定して区別すれば良いでしょう。
※下記ではそれぞれの「カテゴリ」はユニークなものであると考えidにしてあります。その上でCSS上で画像リンク部分であるli#messageとli#orderには違うスタイルを指定します。

<ul class="category">
<li id="company"><a href="会社概要ページへリンク">会社概要</a></li>
<li id="product"><a href="商品案内ページへリンク">商品案内</a></li>
<li id="casestudy"><a href="導入事例ページへリンク">導入事例</a></li>
<li id="message"><a href="代表者挨拶のページへリンク"><img ~></a></li>
<li id="order"><a href="資料請求のページへリンク"><img ~></a></li>
</ul>

まあ、HTML側で既にテキストと画像に分けているところを見ると(内容的に)後者ではないのかな、とは思えますが。

上記は、考え方の一例です。これが正解、というわけではありません。実際の内容や構成に応じてケースバイケースでより適切なマークアップがあるかもしれませんので、これはあくまでも現在与えられている情報から仮定させて頂いたものです。

あと、これは蛇足ですが、

<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>

上記が以下に続くリストの「見出し」を表す為の画像であるなら、他の子要素liと同等に扱うのではなく、ulの見出し(h(n)とか…)としてマークアップするのが適切かと。
    • good
    • 0
この回答へのお礼

abril様

毎回ご丁寧なメッセージ有難うございます。先日パソコンを変えた際にIDとパスワードが分からなくなり、お礼をさせて頂くのが遅くなり申し訳ございません。

本当に助かりました。さらに理解が深まり、楽しい日々を過ごさせて頂いております。

厚かましいですが、今後ともよろしくお願いいたします。

お礼日時:2009/07/12 21:49

#2です。



ええと。まず、問題点を切り分けて考えてみてください。

HTMLが開示されない状況では、質問者さんの状況を想像で補うしかなく、実際の状況とズレが生じる可能性があります。
今回のケースはまさにそれですよね?

ですので、初めは簡単なHTML+CSSでテストしてみましょう。
そこから段々とやりたいことを付け足していくのがコツです。
一つ一つパーツを付け足していけば、「どこで問題が生じるか」が確実にわかります。
その差分を見て「どこに原因があるのか」を分析するのです。私は困った時はいつもそうしています。

そこでどうしてもわからない箇所が有れば、「ここまでは上手くいきますが、こうすると期待通りに動作しません」と質問してみてください。
そこまで問題点が突き止められているのであれば、非常に回答しやすくなります。
難解な問題でなければ、まず回答が添えられると思います。

> そこでご相談ですが、テキストメニューの文字を中央に寄せつつ、画像にリンクを張るにはどうしたらいいでしょうか。
text-alignプロパティを使ってみてください。

<div style='text-align: center;'>
<a href='#'><img src='test.jpg' alt='test' /></a>
</div>

中央寄せしたい要素だけ括ればOKです。

text-align-スタイルシートリファレンス
http://www.htmq.com/style/text-align.shtml
    • good
    • 0

> 以下の部分の画像にリンクを張ると、その部分の上下の幅が広がりレイアウトが崩れてしまいます。


>
> <p><img src="image/message.jpg" width="200" height="65" border="0"></p>
> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>

この部分の事であれば、No.2様の推測が当たっている様に思われます。"a img {~}"というセレクタで何かスタイルが変わってしまう様な指定をしているのでなければ。例えば、

a img {
padding: 10px 0;
}

とか。

> あと私の勉強不足でよく分かってないのですが、画像を配置する場合は<p>タグでなくてもいいのですね。有難うございます。

画像を配置するのに相応しい要素(タグ)が決められているわけではありません。画像の内容が何であるかに依って、どの要素の子要素とするかを決めると言った方がいいでしょう。
実際の画像を見たわけではないですが、この構成と画像のファイル名からして、おそらくmessage.jpgは「メッセージ」ページへのリンクボタン、siryo_seikyu.jpgは「資料請求」ページへのリンクボタンの役目かと推測します。であればむしろこれはul(リスト)でマークアップする方が妥当かと思います。一種のナビゲーション/メニューの様なものと考えられますので。p(段落)では無論ないですし、かといってbrで並べる様なものでもないかと…勿論、どちらも単純に文法的には間違いではありませんが、マークアップに対する考え方一つで左右されます。
    • good
    • 0
この回答へのお礼

abril様

いつも丁寧で親切な回答本当にありがとうございます。

No.2さんのお礼に書いておりますが、私の早とちりで違うcssが作用してそれが原因でずれておりました。

sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。

抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

マークアップの考え方も非常に勉強になりました。いつもありがとうございます。

お礼日時:2009/06/01 06:45

img { border-style: none; } かな?


imgにaを付与するとボーダーが入るので、キャンセルしてみてください。

-------
<style type='text/css'>

#contents #sidenavi2 {
padding: 0px;
float: right;
height: auto;

width: 200px;

margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

#midashi2{
background-color:#fee;
}
img {
border-style: none;
}
</style>
</head>
<body>

<div id='contents'>
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href="#">あああ</a></li>
    <li><a href="#">あああ</a></li>
</ul>
<p><a href='#'><img src="image/message.jpg" width="200" height="65" border="0"></a></p>
<p><a href='#'><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></a></p>
</div>
</div>
-------

質問文のHTMLはそのままでは <div id='contents'> がなかったので、こちらで想像して付け足しました。あと <a href#"> も適宜修正。
できれば、最小限のHTMLでもテストしてから投稿してくださいね。そうするとお互いに助かります。
    • good
    • 0
この回答へのお礼

think49様

ご丁寧な回答ありがとうございます。本当に助かります。

大変申し訳ないのですが、昨日よく考えてみると質問の中に表示してないcssの設定がどうやら原因でした。

質問の内容とずれてきますが、2カラムの右側をメニューにしていて、そのメニューをテキストにしているのですが、文字が左に寄っていたのでインデントの設定で少し中央寄りになるようにしており、画像にリンクを張るとそれが影響してずれていたのだと思いました。

そこでご相談ですが、テキストメニューの文字を中央に寄せつつ、画像にリンクを張るにはどうしたらいいでしょうか。イメージではsidenavi2の下にdivをひとつ作ってそこに画像を配置すればいいのかな?なんて思いました。

よろしければご享受くださいませ。

問題のcssです
#contents #sidenavi2 ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#contents #sidenavi2 a {
font: 80%/50px "MS Pゴシック", Osaka;
display: block;
margin: 0px;
height: 50px;
width: 198px;
border-top: #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
padding: 0px;
text-indent: 15px;
}
#contents #sidenavi2 ul li a:hover,
#contents #sidenavi2 li a:focus {
background: #E6E6E6 11px 13px;
}
#contents #sidenavi2 #midashi {
height: 56px;
width: 200px;
margin: 0px;
padding: 0px;
}

お礼日時:2009/06/01 06:37

どうしたいのかよくわからないんですが、もう少し詳しく教えていただけませんか?


どの部分の表示がおかしくなるんですか?

それと<p><img src""></p>となってますが改行したいなら<p></p>を省いて<img src"">の後に<br>でもいいのではないでしょうか?

この回答への補足

ryupyon様

早速のお返事ありがとうございます。

以下の部分の画像にリンクを張ると、その部分の上下の幅が広がりレイアウトが崩れてしまいます。

<p><img src="image/message.jpg" width="200" height="65" border="0"></p>
<p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>

あと私の勉強不足でよく分かってないのですが、画像を配置する場合は<p>タグでなくてもいいのですね。有難うございます。

補足日時:2009/05/29 08:23
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q
  • カテゴリ名

  • でh2の文字を小さくしたい

    H2の文字を小さくしたいと考えていますが、
    スタイルシートでなかなか再現できません。
    下記のように設定していますが間違いがありますでしょうか?

    xxx.html
    <div id="box-cat">
    <ul>
    <li><h2>カテゴリ名<h2></li>
    <li><h2>カテゴリ名<h2></li>
    </ul>
    </div>

    xxx.css
    #box-cat {
    width:200px;
    }

    #box-cat h2 {
    font-size:11px;
    font-weight:normal;
    }


    お力をお貸し下さい。

    Aベストアンサー

    ★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
    ・どうして<H2>タグなの?→<LI>タグにいろいろと記述すればよいのでは?
     下に2つの解決策を載せます。どうぞ。

    解決策1:
    #box-cat H2{
     MARGIN:0em 0em 0em 2em; ←ここがポイント!
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』と『xxx.html』はそのままで良い。

    解決策2:
    #box-cat2 LI{
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』はそのままで良い。

    ●xxx.html
    <UL id="box-cat">
    <LI>カテゴリ名
    <LI>カテゴリ名
    </UL>

    ・以上です。これで一様、文字は小さくなりました。→私の環境での結果論!

    Q右クリで画像保存が出ない!

    画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
    どうしたらよいのでしょうか?

    Aベストアンサー

    最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

    方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

    プリントスクリーンはググってほしいであります。

    QTARGET=_blankと、

    リンクに触れただけで、別ウインドウを開くには、どうしたら良いんでしょうか?
    <a TARGET=_blank href=""onMouseOver="location.href='リンク先'"></a>
    上は、どこが間違っているのでしょうか?
            

    Aベストアンサー

    <a href="" onMouseOver="window.open('リンク先')">ccc</a>
    とかで良いのでは?

    window.openについての詳細は書籍ネット等々で調べてください。

    Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

     友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

    Aベストアンサー

    こちらに数点ありました。
    http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
    画像を使用される場合は自己責任でお願いします。

    Q既にIE仕様のページ内リンク(が複数ある

    既にIE仕様のページ内リンク(<a href="#あああ">が複数あるのですが、これでは、FIREFOX、safariでは動きません。そこでcssを使って、対応させたいのですが、どうすればよいのでしょうか?ご教授願います。

    Aベストアンサー

    ><a href="#あああ">が複数

    複数あるというのはどういうことでしょう?
    おなじ#あああが複数あるとどこに飛ばしていいかわからないですよね?

    ちなみに非推奨ですが<a name="あああ">あああ</a>的な処理でどうしょ?

    Q●「美人アプリ」の画像を保存したい!

    ●「美人アプリ」というアプリを使用しています。

    ●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

    ●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

    Aベストアンサー

    保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
    http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

    QCSSでの

    初めて質問させて頂きます。仮に作ったサイト名が次の通りです。
    http://yusukeinoue.web.fc2.com/271p/271p.html

    Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで
    }
    #wrapper #sidenavi ul {
    list-style-type: none;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    display: block;
    }
    #wrapper #sidenavi li a {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 200px;
    font-size: 12px;
    text-decoration: none;
    }
    #sidenavi li#1 {
    background-image: url(images/bButton1.gif);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 200px;
    }
    #sidenavi li#2 {
    background-image: url(images/bButton2.gif);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 200px;

    id=liはそのあとも続くのですが、<em></em>で非表示にしています
    }
    #sidenavi em {
    visibility: hidden;
    }

    使用環境はMacOX10.4.7、DreamweaverMXです。safariでは問題なく表示されます。

    参考書籍通りに<ul><li>をボックス化して、インラインにし背景画像を
    埋め込むと言う作業でした。
    それ以上は書いていないので分かりません。。。
    ご教授のほどお願いいたします

    初めて質問させて頂きます。仮に作ったサイト名が次の通りです。
    http://yusukeinoue.web.fc2.com/271p/271p.html

    Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで
    }
    #wrapper #sidenavi ul {
    list-style-type: none;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    display: block;
    }
    #wrapper #sidenavi li a {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 200px;
    font-size: 12px;
    text-dec...続きを読む

    Aベストアンサー

    I.Eでは、表示できていません。

     画像で無理な場合は、一度はずして、背景色を適当に指定して、表示されれば画像のデータがアップできていないか、画像までのパスが間違っていると思います。

     見本では、リストテキストが見えませんが、リストのブロック状態になっていますので、背景画像指定だけが問題だと理解します。

     それと、サーバーのデータに、この背景画像がアップされているかも確認する必要があります。

     ちなみに #xx #yy liというのは、
     ID xx の中にある ID yy の●● 
     というように指定方法は間違っていないと思います。
     No.1の方の言うように、数字の前に英字で名前をつける必要があります。
     

    Q右クリ禁止のサイトの画像を保存

    質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

    Aベストアンサー

    そのサイトを見ないとなんとも言えませんが、
    JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

    それで駄目ならば、プリントスクリーンを取って画像を修正してください。
    まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

    ちなみに動画を保存する場合は専用のソフトなどが必要。

    Q番号付きリスト(
    1. ・・・
    )の数字を全角に。

    番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角に。

    お世話になっております。
    番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角にしたいのですが、
    そのようなことはできるのでしょうか。

    ご教授ください。よろしくお願いします。

    Aベストアンサー

    HTML5は<li>にvalue属性が持たせれる
    http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
    解釈間違ってるか?
    そこで、ついでにSelectorAPIも使ってjavascriptで

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>test</title>
    <style type="text/css"></style>
    </head>
    <body>
    <ol class="Z_ol">
    <li value="1">aaaa<ol><li>xxx</li><li>yyyy</li></ol></li>
    <li value="2">bbbb</li>
    <li value="3">cccc</li>
    <li value="4">dddd</li>
    </ol>
    <script type="text/javascript">
    var Z=["0","1","2","3","4","5"];
    var Z_li=document.querySelectorAll(".Z_ol > li");
    for (var i=0;i<Z_li.length;i++){
    Z_li[i].style.listStyleType = "none";
    Z_li[i].insertBefore(document.createTextNode(Z[Z_li[i].value]+"."),Z_li[i].firstChild);
    Z_li[i].normalize();
    }
    </script>
    </body>
    </html>

    HTML5は<li>にvalue属性が持たせれる
    http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
    解釈間違ってるか?
    そこで、ついでにSelectorAPIも使ってjavascriptで

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>test</title>
    <style type="text/css"></style>
    </head>
    <body>
    <ol class="Z_ol">
    <li value="1">aaaa<ol><li>xxx</li><li>yyyy</li></ol></li>
    <li value="2">bbbb</li>
    <li value="3">cccc</...続きを読む


    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング