人に聞けない痔の悩み、これでスッキリ >>

初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。

ちなみに画像の作成は、フォトショップCS6で次のように作成しました。

(1)カンバスサイズを、幅800px、縦60pxで作成

(2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。
※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。

(3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える

(4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる
※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。

(5)手動にて連結した画像をカンバスサイズの位置に合わせる

(6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる

(7)上5つにある会社概要などの文字を一括コピーする。

(8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる
※大変でしたが、グリッド機能を使って、調整しました。

以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。

フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。
いろいろな方からご教示を頂きたいです。本当にお願い致します!!

<!-- /以下HTML -->

<ul id="globalnavi">
<li id="menu1"><a href="#"></a></li>
<li id="menu2"><a href="#"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="#"></a></li>
<li id="menu5"><a href="#"></a></li>
</ul>

<!-- /以下CSS -->

#globalnavi {
margin: 0;
padding: 0;

}

#globalnavi li {
width: 160px;
height: 30px;
float:left;
text-align: center;
line-height: 3.5;
margin:0;
padding-left:0;
}

#globalnavi a {
float:left;
display: block;
text-decoration: none;
width: 160px;
height: 30px;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}

#menu1 a { background-position: 0px 0px; }
#menu2 a { background-position: -160px 0px; }
#menu3 a { background-position: -320px 0px; }
#menu4 a { background-position: -480px 0px; }
#menu5 a { background-position: -640px 0px; }

#globalnavi a:hover {
text-decoration: none;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}

#menu1 a:hover { background-position: 0px -30px; }
#menu2 a:hover { background-position: -160px -30px; }
#menu3 a:hover { background-position: -320px -30px; }
#menu4 a:hover{ background-position: -480px -30px; }
#menu5 a:hover{ background-position: -640px -30px; }

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

A 回答 (2件)

この様な作業は、画像までで後はテキストエディタを使うほうが楽ですね。

(5)移行の手順はテキストエディタで行いましょう。
手順を追って説明しておきます。

たぶんtext-decorationのためでしょう。

[HTML]は  以下タブは_に置換してあるので戻してください。
<ul id="globalnavi">
_<li><a href="/index.html">TOP</a></li>
_<li><a href="/product"></a></li>
_<li><a href="/books"></a></li>
_<li><a href="/information"></a></li>
_<li><a href="/contact"></a></li>
</ul>
だけでよいです。


#globalnavi,#globalnavi li{
_display:block;list-style:none;/* ブロック要素に一旦変更 */
_margin: 0;padding: 0;/* 一旦消す */
_text-align:center;line-height:30px;/* 幅・高さの中心に来るように */
}
#globalnavi li{
_width: 160px;height: 30px;
_display:inline-block; /* よほど古いブラウザでない限りfloat:left;でないほうが良い */
}
#globalnavi a {
_display: block;
_text-decoration: none;
_width:100%;height:100%;
_background: url(./img/menu-all.gif) no-repeat 0 0 ;
_text-decoration: none;
}
#globalnavi a[href="/index.html"] { background-position: 0px 0px; }
#globalnavi a[href="/product"]{ background-position: -160px 0px; }
#globalnavi a[href="/books"]{ background-position: -320px 0px; }
#globalnavi a[href="/information"]{ background-position: -480px 0px; }
#globalnavi a[href="/contact"]{ background-position: -640px 0px; }

#globalnavi a[href="/index.html"]:hover,
#globalnavi a[href="/index.html"]:focus { background-position: 0px -30px; }
#globalnavi a[href="/product"]:hover,
#globalnavi a[href="/product"]:focus{ background-position: -160px -30px; }
#globalnavi a[href="/books"]:hover,
#globalnavi a[href="/books"]:focus{ background-position: -320px +30px; }
#globalnavi a[href="/information"]:hover,
#globalnavi a[href="/information"]:focus{ background-position: -480px -30px; }
#globalnavi a[href="/contact"]:hover,
#globalnavi a[href="/contact"]:focus{ background-position: -640px -30px; }

★ブラウザごとにpaddingやmarginの差があるので一旦消してください。
★a要素はblockにしたのち、whidth,heightを100%にするほうが良いです、
 これは先でリキッドデザインにしたときなどに書き換えなくてすむとか色々利点があります。
★アクセスビリティ・ユーザビリティを考えるとli間にmarginをとるほうが良いです。
 #globalnavi li{margin-left:4px;}/* #globalnaviに同系の背景色を指定すること。
★idをつけるより要素セレクタのほうが絶対に楽です。今回は一枚の画像でしたがそれぞれに画像を用意した場合に次のように書けますから、後々のメンテナンスが楽です。
 #globalnavi a[href="/index.html"] { background-image:url(./images/goTop.gif); }
 とかね。そうするとリストの順番を変えても良いでしょう。
★マウス以外のアクセスを考えると:hoverと一緒に:focusも指定しておきましょう。
★ついでに:activeと:visitedも記載順は
:link
:visited 以上二つは排他的なので順不同
:hover :focus
:active;
★スタイルシートを書くポイント
1) 同じ師弟を何度も書かないように出来るだけグループ化する。
2) 継承するプロパティは繰り返し書かない。
3) 同じ系統の指定はまとめて一行にする。
 width:100%;height:100%
それだけで、一覧性が良くなってメンテナンスが楽になります。
    • good
    • 0
この回答へのお礼

ありがとうございます!!

お礼日時:2012/10/23 15:59

わすれもの


#globalnavi li{}に、position:relative;を追加しておくほうが良いです。
    • good
    • 0
この回答へのお礼

ありがとうございます。
追記しておきます!!

お礼日時:2012/10/23 15:59

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

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

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

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

Qなぜ?マウスオーバーで1pt位置がずれる

こんにちは。
CSSでマウスオーバーの指定をしたのですが、WindowsのIE6だけがマウスオーバー時に1ptだけ上に上がってしまします。
(Mac.Winのfirefox,safariは問題ありませんでした。)

マウスオーバーの指定は
/* サイドナビ---------------- */
#contents #sidenavi li#title {
background: url(images/btm_c_home.gif) no-repeat right;
padding: 0px;
}
/* サイドナビ---------------- */
に対して
/*サイドナビボタンロールオーバー*/
#contents #sidenavi li#chome a:hover{
background: url(images/btm_c_home_ov.gif) no-repeat right;
}
/*サイドナビボタンロールオーバー*/
というようにa:hoverで指定しています。
透過gifでメニューボタンを作っているので、バックにマウスオーバー時には通常のボタン画像が見えてしまってかっこわるいです。
オーバー時に動かないようにしたいのですがどうしたら良いでしょうか?

こんにちは。
CSSでマウスオーバーの指定をしたのですが、WindowsのIE6だけがマウスオーバー時に1ptだけ上に上がってしまします。
(Mac.Winのfirefox,safariは問題ありませんでした。)

マウスオーバーの指定は
/* サイドナビ---------------- */
#contents #sidenavi li#title {
background: url(images/btm_c_home.gif) no-repeat right;
padding: 0px;
}
/* サイドナビ---------------- */
に対して
/*サイドナビボタンロールオーバー*/
#contents #sidenavi li#chome a:hover{
background: ur...続きを読む

Aベストアンサー

※ANo.3への補足を元に回答しますが、長くなりますので投稿を分けて行きます。

【回答1】

> 問題の箇所をアップしますので見て頂けるでしょうか?
> http://www.dtwash.com/test/001.html

ここから、HTMLファイル、CSSファイル、必要な画像のみ取り出して、こちらの環境で再構成してみました。
その状態だと、確かに当方のIE6上でも質問者様と同じ現象が起こります。
前回はこちらで画像も作成し更に最小限の条件のみを抜き出して実験したので、結果として条件が完全に同じになってはいなかったのですね。
従って、

> 「私のIEの設定が何かおかしい?」と思ってしまいます。
> 私のIEだけおかしい可能性ってあるのでしょうか?

そうではない様ですのでひとまずご安心下さい。

実験条件を以下とした上で改めて検証してみました。色々突っ込みどころはありましたが、それはまた後ほど。

【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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>東西新風堂施工カタログサイト【新着カタログ】</title>
<link href="mine.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<!-- wrapper begin -->
<div id="wrapper">
<!-- contents begin -->
<div id="contents">
<!-- sidenavi begin -->
<div id="sidenavi">
<ul>
<li id="shop"><a href="catalog_shop.html"><em>Shop Catalog</em></a></li>
<li id="chome"><a href="catalog_home.html"><em>home Catalog</em></a></li>
<li id="office"><a href="catalog_office.html"><em>office Catalog</em></a></li>
<li id="home"><a href="top.html"><em>HOME</em></a></li>
<li id="show"><a href="showroom.html"><em>ショールーム</em></a></li>
<li id="koubou"><a href="atrie.html"><em>工房紹介</em></a></li>
<li id="nagare"><a href="nagare.html"><em>ご依頼から施工まで</em></a></li>
<li id="rec"><a href="rec.html"><em>リクルート</em></a></li>
</ul>
</div>
<!-- sidenavi end -->

<!-- main begin -->
<div id="main">
<p>###メイン###</p>
<p>###メイン###</p>
<p>###メイン###</p>
<p>###メイン###</p>
</div>
<!-- main end -->
<hr class="xxx" />
</div>
<!-- contents end -->
</div>
<!-- wrapper end -->

</body>
</html>
----------------------------------------------------------------------

【CSS】
----------------------------------------------------------------------
body {(略)}
#wrapper {(略)}
a:link {(略)}
a:visited {(略)}
a:hover {(略)}
a:active {(略)}
#contents {(略)}
#contents #main {(略)}
#contents #sidenavi {(略)}
#contents #sidenavi ul {(略)}
#contents #sidenavi ul li {(略)}
#contents #sidenavi li a {(略)}

/* サイドナビ---------------- */
(略)

/*サイドナビボタンロールオーバー*/
(略)
#contents #sidenavi em {(略)}
----------------------------------------------------------------------

【画像】
#sidenaviのロールオーバーで使用しているオリジナルのon/off画像全て

→【回答2】へ続く

※ANo.3への補足を元に回答しますが、長くなりますので投稿を分けて行きます。

【回答1】

> 問題の箇所をアップしますので見て頂けるでしょうか?
> http://www.dtwash.com/test/001.html

ここから、HTMLファイル、CSSファイル、必要な画像のみ取り出して、こちらの環境で再構成してみました。
その状態だと、確かに当方のIE6上でも質問者様と同じ現象が起こります。
前回はこちらで画像も作成し更に最小限の条件のみを抜き出して実験したので、結果として条件が完全に同じになってはいなかったのです...続きを読む

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画像のロールオーバーがずれてしまいます。(CSS)

テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。

しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像
(背景として設定しているもの)が微妙に1pxほど斜め下にずれて表示されてしまいます。
このような事を防ぐためにはどんな事に気を付ければ良いでしょうか?

ちなみに、ロールオーバー前の画像とロールオーバー後の画像2枚を
全く同じサイズにしています。
参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。

-------------------------------------------------CSS

td.1{
   background:url(image01.jpg) no-repeat;
   }

td.1 a{
display:block;
}

td.1 a:hover{
background-color:transparent;
}

td.1 a:hover img{
visibility:hidden;
}

-------------------------------------------------HTML
<table>
<tr>
<td class="1"> ←このtd内の画像
<a href="top.html"><img src="image01.jpg"></a>
</td>
<td>
<a href="top02.html"><img src="image02.jpg"></a>
</td>
<td>
<a href="top03.html"><img src="image03.jpg"></a>
</td>
</tr>
</table>

テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。

しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像
(背景として設定しているもの)が微妙に1pxほど斜め下にずれて表示されてしまいます。
このような事を防ぐためにはどんな事に気を付ければ良いでしょうか?

ちなみに、ロールオーバー前の画像とロールオーバー後の画像2枚を
...続きを読む

Aベストアンサー

大抵のブラウザはデフォルトでセルにpaddingが設定されているので、
それを0にしないとpaddingの影響を受けない背景とはずれるのかな。

QChrome だと、画像が少し下にずれてしまう

こんにちは!

CSS初心者で、今回初めてCSSを利用してホームページを作っています。
制作中に、行き詰ってしまい質問をさせていただきました。

メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。

IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

元凶を、探してみたんですが、なかなか見つけられません。
わかる方がいらっしゃったら、教えていただけないでしょうか。

お粗末なCSSコードですが(多分、無駄なコードがいっぱいありそう・・・)
のせさせていたたきました。

よろしくお願いします。





CSS
--------------------------------------------------------------


@import url(base.css);
body{
text-align:center;
margin-right : auto;margin-left : auto;
background-image : url(images/bg_brown.png);
background-repeat: repeat;
font-size : 90%;
padding-top : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-bottom : 0px;
height : 100%;
}
#wrap{
text-align : center;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : auto;
width : 100%;
padding-top : 0px;
}
#com_back{
background-image : url(images/bg_green.png);
background-repeat : repeat-x;
}
#g_navi_back{
width : 100%;
height : 80px;
text-align : center;
background-repeat : repeat;
background-image : url(images/bg_g_navi.png);
}
#g_navi{
overflow : hidden;
width : 900px;
margin 0 auto;
margin-left : auto;
margin-right : auto;
background-repeat : no-repeat;
background-image : url(images/navi_base.png);
height : 80px;
}
#g_navi ul{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}
#g_navi li{
text-align : center;
width : 180px;
float : left;
border-collapse : collapse;
background-position : left center;
top : 50%;
bottom : 50%;
letter-spacing : 1px;
line-height : 18px;
}
#g_navi li a{
display : block;
padding-top : 20px;
}
#g_navi ul li a:link{
text-decoration : none;
color : black;
}
#g_navi ul li a:hover{
background-image : url(images/navi_hover_g.png);
background-repeat : no-repeat;
background-position : center center;
height : 80px;
}
.inner{
text-align : left;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
width : 900px;
background-repeat : repeat;
height : auto;
background-image : url(images/bg_white.png);
}

html
------------------------------------------------------------------------------
<!--外枠-->
<div id="wrap">
<!--ロゴ-->
<div id="com_back"><div id="com" ></div></div>

<!--ナビ-->
<div id="g_navi_back">
<div id="g_navi">
<UL style="list-style-type : none">
<LI><a href="index.html">ホーム</a></li>
<LI><a href="**********">ご案内</a></li>
<LI><a href="**********">ご利用方法</a></li>
<LI><a href="**********">イベント詳細</a></li>
<LI><a href="**********">アクセス</a></li>
</UL></div>
</div><!--ナビ_end-->
<div class="clear"><hr /></div><!--ナビfloatクリア-->

<div class="inner"><!--インナー-->

こんにちは!

CSS初心者で、今回初めてCSSを利用してホームページを作っています。
制作中に、行き詰ってしまい質問をさせていただきました。

メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。

IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。

元凶を、探してみたんですが...続きを読む

Aベストアンサー

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。
IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている--
HTMLを標準モードで起動するように書き換えてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
・・・
詳しくは、
DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1480.11553.1.12817.18.15.2.0.0.0.682.3732.0j10j1j1j1j2.15.0...0.0.TUp2L8opvrs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d0414a132c82753&biw=1024&bih=619 )
 など

 HTML5を目前とした今は、transitinalは過去の技術です。1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」といわれ続けてきたことですから。

 HTMLを
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
 などでチェックしながら、ウェブ標準にまず直してください。

 それでスタイルシートを記述すれば、どのブラウザでも標準モードで起動し、ブラウザによる差は消えるでしょう。

 なお、スタイルシートはHTMLが文書構造だけ記述してあれば、もっとシンプルに簡単になるし、わかりやすくなります。

 昨日回答した
(CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7464353.html )
 なんて、HTMLは極めて簡単で、スタイルシートもわかりやすいかと。

 たぶん、あなたの期待されていることをHTMLさえ正しければ・・・HTMLは半分、スタイルシートは1/10で済むと思います。
★継承されるプロパティは、一度しか書かない
★同じ設定をする要素はグループ化する。
★デザインのためにidやclassは書かない
 これだけで、随分とスリムになりメンテナンスも容易になります。
「例」
 (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7464353.html )

 具体的には、HTMLは
<div class="nav">
 <ol>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ol>
</div>
 だけでよいのです。

そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。
IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている--
HTMLを標準モードで起動するように書き換えてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
・・・
詳しくは、
DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82...続きを読む

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を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

Qchromeのcss位置ズレについて

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

-----------------------

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}

-----------------------

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

-----------------------

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);...続きを読む

Aベストアンサー

趣味でWEBサイトを作成している者です。
あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。


人気Q&Aランキング