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

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

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と関連する良く見られている質問

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文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QIEで

_________________________
|...............................|←<div>
|...............................|
|...............................|
|...............................|
 ̄ ̄ ̄ ̄ ̄ ̄ ̄
________________________
|/////////////|←<img>
 ̄ ̄ ̄ ̄ ̄ ̄ ̄
<div>で囲んだ,上のテーブルの背景に画像を並べて,
下の方の画像だけを変えたいので<img>で画像をくっつけて
2つとも左に寄せて揃えました。
上の絵だと離れてますが<div>と<img>のスキマは無いです。

firefoxではきちんと揃っていて1枚の画像に見えるのですが,
IEで見ると何故か<img>の画像が2pxほど右にずれてしまいます。
色々こねくり回してみたけど原因がなんなのか全くわかりません。
どうしてなんでしょうか。

_________________________
|...............................|←<div>
|...............................|
|...............................|
|...............................|
 ̄ ̄ ̄ ̄ ̄ ̄ ̄
________________________
|/////////////|←<img>
 ̄ ̄ ̄ ̄ ̄ ̄ ̄
<div>で囲んだ,上のテーブルの背景に画像を並べて,
下の方の画像だけを変えたいので<img>で画像をくっつけて
2つとも左に寄せて揃えました。
上の絵だと離れてますが<div>と<img>のスキマは無いです。

firefoxでは...続きを読む

Aベストアンサー

元々一続きの:
■■■■■
□□□□□
というイメージを、■■■■■と□□□□□に分けた上で、上下に隙間無く並べて一枚のイメージに見える様に再構成したい、という事でしょうか?で、現在は■■■■■がtableの背景として(「画像を並べて」という言葉からして)リピートさせてレンダリング、□□□□□はimgタグで配置…という構成ですか?以後はその仮定でお話させて頂きます。

現状「IEで見ると何故か<img>の画像が2pxほど右にずれて」という状態になっている原因は、HTMLとCSSのソースがわからないと限定しかねます。既にご回答の方々が仰っている通り、ケースバイケースで様々な原因が想定され得るからです。ただ、■■■■■の方が単なるtableの背景扱いにされているという事は、オリジナルの一続きのイメージは「重要な意味を持たない装飾的画像」と判断します。であれば、いっそ「どちらも背景画像として配置する」構成に変えられた方が宜しいかと思います。現状だとCSSを外せば■■■■■は表示されず□□□□□のみ表示されるという珍妙な状態になりますので。以下は考え方のごく大雑把なサンプルです。

【HTML】
<div class="xxx">
<table>
<tbody>
<tr>
<td>データ</td>
</tr>
</tbody>
</table>
</div>

【CSS】
div.xxxのスタイルとして、□□□□□のイメージの高さと同じ値をpadding-bottomで確保した上で、backgroundに□□□□□のイメージをno-repeat、bottom、leftで配置すればマークアップ的にも無駄なく、お望みの結果が得られると思います。
※<table>の罫線や下マージンは全て値0に初期化済み、<table>の幅とイメージ□□□□□の幅は同一、という前提です。

元々一続きの:
■■■■■
□□□□□
というイメージを、■■■■■と□□□□□に分けた上で、上下に隙間無く並べて一枚のイメージに見える様に再構成したい、という事でしょうか?で、現在は■■■■■がtableの背景として(「画像を並べて」という言葉からして)リピートさせてレンダリング、□□□□□はimgタグで配置…という構成ですか?以後はその仮定でお話させて頂きます。

現状「IEで見ると何故か<img>の画像が2pxほど右にずれて」という状態になっている原因は、HTMLとCSSのソースがわからないと限定しかねます。既にご回答の...続きを読む

Qテーブル内の画像がずれてしまいます(IE8)

テーブル内の画像がずれてしまいます(IE8)

画像(写真を含めたHP1ページ分の画像)を分割して写真の部分にリンク(lightbox)
を貼ってあります。
一度リンクにとんで(写真を大きく表示して)closeした後は正しく表示されるのですが、
更新するとまた複数の(リンクを貼ってある)写真の部分が下に落ちて、
全体が大きく崩れて表示されてしまいます。

ソースを見ると、分割した画像はテーブルの細かく区切られたセルのcolspanとrowspanで
配置されているようです。

画像がずれて表示される原因と回避方法を教えていただけないでしょうか。

Aベストアンサー

ソースを見ないとはっきりとした事は分かりませんが、
よくある原因を挙げておきます。

1.colspan,rowspanを多用する事で、セルサイズが正しく表示されない
  解決法:個々のセルのwidth、heightをすべて指定する
2.画像の下に余白が空く
  解決法:CSSでimg{vertical-align:bottom;}を指定
3.タグの改行によって半角スペースが生じるバグ(IE)
  解決法:タグの改行を消す、もしくは<!---->を使う

<td>
<img src="~">
<img src="~">
</td>

<td><img src="~"><img src="~"></td>
または
<td>
<img src="~"><!--
--><img src="~"><!--
--></td>

リンクマップを使用した方が簡単かも知れません。

Qリンクの範囲がおかしい?

<a href="">キーワード</a>
通常はクリックする時、
[キーワード]この範囲内しかクリックできないはずなのですが、
[ キーワード ]
このような広範囲でクリックできるようになってしまいます。
これを[キーワード]の部分のみクリックできる、というようにするにはどうすればよろしいのでしょうか?

Aベストアンサー

知らぬあいだにcssでpaddingを指定しているとか?

<a href="" style="padding:0px;">キーワード</a>
としてみてはどうでしょう?

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q画像を縦に4つ並べたい場合

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

Aベストアンサー

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="...続きを読む

Qページ内リンクがずれてしまう

お世話になっております。
制作しているWEBで、ページ内リンクを使用しているのですが、いざリンクへ飛ばすとずれが起こり固定ヘッダーの部分と画像が被って困っています。

http://depthcode.com/2011/02/header-fixed.html
上記のサイトを参考にアンカーの位置を調整したところヘッダーに被らず画像もぴったり収まったのですが、こちらの要望としてはリンクで飛んだあとも添付画像のように画像とヘッダーの間を常に空けた状態にしておきたいのです。
どのように設定すれば良いかご教授お願い申し上げます。

Aベストアンサー

補足いただきましてありがとうございます。

いただいたCSSを元にHTMLを作成してみたのですが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
<!--
#top {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: red;
}
#work {
width: 840px;
margin-top: -70px;
margin-right: auto;
margin-left: auto;
padding-top: 70px;
background: green;
}
#contact {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 70px;
background: blue;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
</head>
<body>

<div id="top">top</div>

<div id="work">work</div>

<div id="contact">contact</div>

<div style="background: pink; height: 2000px;" ><a href="#top">to top</a><br /><a href="#work">to work</a><br /></div>

<div style="background: yellow;" ><a href="#top">to top</a><br /><a href="#work">to work</a></div>

</body>
</html>

このHTMLだと私の環境では、きっちりと各タグの先頭にページ内リンクできました。
(FireFox 最新版、GoogleChrome最新版、IE7~10)

この動作がshiopple様がお考えの挙動と相違無いとすると、
ヘッダーを固定するスクリプトと何か干渉している可能性がありますでしょうか・・・??(・・;)

可能であれば、現状のHTML、Javascript、CSSなどをもう少し仔細にお伝えいただければ、
解決の糸口を示すことができるかもしれません。

ご確認の程、何卒よろしくお願いいたします。

補足いただきましてありがとうございます。

いただいたCSSを元にHTMLを作成してみたのですが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 name="keywords" content="" />
<meta name="description" content="" />
<title><...続きを読む

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;


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

人気Q&Aランキング

おすすめ情報