【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

仕事で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なんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

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

A 回答 (3件)

まず、line-height:20pxのように、line-heightをpxで指定してみてください。


ブラウザの違いによる縦の誤差はなくなるはずです。

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

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

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

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

ixkaitoさん、回答ありがとうございます。
line-heightを相対的な指定にするとブラウザ間での差が生じるんですね。
確かにline-heightに絶対値を指定するとぴったりとなります。

reset.cssはよく使うのですが、
ブラウザのデフォルト環境をリセットした状態で、
font-sizeに%で相対的な指定を行ったり、pxで絶対的な指定を行っても、
line-heightに相対的な指定を行うとなぜずれるのかが不思議でした。

今回のfont-familyの指定だと、
win環境(ヒラギノが入ってないもの)だとMS Pゴシックで、
Mac Safariだとヒラギノ角ゴシックになるようにしてありますが、
書体の違うSafariがIE6/7、Chrome、Firefoxとピッタリなのに、
IE8と9だけが上下のmarginがズレてしまうんですよね。
(文字と文字の間のズレはどのブラウザでもやはり生じてしまいますね…)

ただ、pxでfont-sizeを指定してもline-heightに相対的な指定を行った場合は
必ず誤差が生じるということがお聞きできたので、当然のものと捉えられて安心しました。

ブラウザの仕様って奥が深いですね。。

お礼日時:2012/12/14 02:33

 DTP (

http://ja.wikipedia.org/wiki/DTP )やワープロとHTMLは、まったく異なります。
前者は、どのように配置し印刷するかを指定するもので、機械や第三者には内容自体を理解することはできません。HTMLは、どこが見出しで、どこからどこまでがひとつの段落で、どこが引用なのか--という文書構造を示すものです。それをどのように表示するかはスタイルシートで指定しますが、それはずれて当たり前、ずれても良いという前提です。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 ブラウザ、OSを含め、どの利用形態であっても文書構造が正しく伝わること--それが最も重要なコーディング--デザインなのです。
「テキストをぴったりを合わせる技術ってないのでしょうか? 」
 のような些細なことにこだわってはダメなのです。

 その上で、説明すると
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
 必ず、総称ファミリ名を最後に書きます。羅列されたフォントが無いときに利用されます。
font-size: 14px;
line-height: 1;
 字の大きな日本語の場合、ブラウザが持つデフォルトのスタイルシートによるline-heightは小さすぎます。通常は1.4em~1.6em程度が読みやすいでしょう。代わりに段落が変わると一文字、字下げして段落が変わったことを示します。
margin: 0;
padding: 0;

 よって
p{line-height:1.6em;margin:0;text-indent:1em;}
 と指定すると良いでしょう。

「ul,ol,li,dl,dt,dd」についても、ブラウザによってmarginやpaddingの指定が微妙に異なりますから、必要なら
ul,ol,dl{margin:0.5em 1em;padding:0;}
li{list-style-position:outside;}
li,dd{text-indent:1em;margin:0 0 0 2em;line-height:1.4em;}
などと指定することがあります。
 ★ただし、あまり使用せず、ブラウザのデフォルトのスタイルに任せてブラウザ間の誤差は気にしないほうが良いです。視覚障害者はフォントを大きくして利用したりしますのでね。

 ウェブページのデザインは、DTPやワープロとまったく異なるものである。多少ずれようが無視できる度量が必要なのですよ。
    • good
    • 0
この回答へのお礼

ORUKA1951さん、回答ありがとうございます。
確かにテキストの誤差を気にしてはいけないですよね。

私もやはり、ユーザビリティの観点から、

・font-sizeは相対的であるべき、
・文字の読み上げを意識した正しい文書構造でコーディングを行うべき、

と思います。

ただ、(私自身、趣味からコーディングをはじめたレベルですが)
会社で制作をお願いされることがありまして、
「サイズは固定してくれ」と言われることが多いのです。

会社の人たちは、そういった本質の部分を説明しても、
やはりブラウザ間でのレイアウトの誤差を気にされるんですよね。

これからは、納得してもらえるように
もう少し頑張ってみたいと思います。

回答ありがとうございました!

お礼日時:2012/12/14 02:14

CSS誤記・・・


差異云々の話はまだ早いのでは?

line-height: 1; は各行の高さが1フォント分って事ですよ。
基本:文章にheightは使わない。

因みに、複雑なデザインによりますが“全て”を100%完璧に揃えるのは無理です。
「文字の位置、上下のマージンがずれる」の回答画像1
    • good
    • 0
この回答へのお礼

naokitaさん、回答ありがとうございます。

今回、ブラウザごとのテキスト1行あたりの差を厳密に確認するために
line-heightを1にしていました。

font-sizeを14pxに固定し、line-heightを1と指定しても、
やはりブラウザ間での誤差が生じることが見てとれました。

たった2行のテキストでこれですから、
おっしゃるように複雑なデザインによりますが、
全てを100%完璧に揃えるのは無理でしょうね。

各ボックスモデルの解釈がどうなっているか、
個人的に理解できていなかったので、
精通されている方、仕事をされている方の対処方法や解釈が知りたかったのです。
これを機に、より一層、勉強をしたいと思います。

迅速な回答ありがとうございましたm(_ _)m

お礼日時:2012/12/14 01:56

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

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

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

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

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

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

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を書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

Q横並びdivで一部の初期高さがずれる理由について

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100px; height:33px;}
#test3{ width:100px; height:33px;}
#test4{ width:100px; height:33px;}
#test5{ width:250px; height:33px;}
#Form input{
margin:auto 0px;
font-size: 70%;
width: 150px;
}
#Form button{ font-size: 70%; width: 50px; }

[html]
<div id="hoge">
<div id = "head">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5">
<form id = "Form">
<input name="list"/>
<button>テスト</button>
</form>
</div>
</div>
</div>

この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。
また、divとdivの間に余計な隙間が作られてしまいます。
ここで分からないことは、
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?

等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100...続きを読む

Aベストアンサー

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lint

 lintの良いところは、理由と対策も示してくれる。それを読まなきゃダメです。芋づる式に色々な知識が見につきます。
 欠点は、文法上の誤りは指摘してくれるが、根本的なマークアップ自体はチェックしてくれない。例えば、
 <div><a href="/">トップ</a></div>
 <div><a href="/product">製品</a></div> 
 <div><a href="/manual">マニュアル</a></div>
はエラーにならない。「これはナビゲーションですし、並列な情報が並んでいるので順不同リストでマークアップするほうがよい」・・・なんては言ってくれないです。

>その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、をあらかじめ分かるようになっておきたい
 もっとも早いのは、仕様書を徹底的に読んでおくこと。すくなくとも全体の流れとどこを調べればよいか位は・・・。急がば回れ、変な「付け焼刃」で積み上げていくより、根本を理解してからのほうが圧倒的に上達は早いです。

>DIVで並べる想定の箇所がOL/LIに変わっておりますが、inline-block化してDIVを並べることそのものに問題があるということでしょうか?

★HTMLでこれが最も大事な--最重要なポイントなのです。
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 2)『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 DIVは、「文書の構造を補完するため」であって、「デザインのため」じゃありません。
 ところが、あなたが参考にされた多くのサイトのように実際には「デザインのため」に使用されている例がとても多い。理解されてこなかった!!。そのために
 3)『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
  そして、「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」(--著者は他により適切な要素がないときの最後の最後の手段としてDIV要素を使用することを強く推奨する。)
  となります。

 よって
>DIVで並べる想定の箇所が
 はHTMLを作成する上で最も犯してはならない誤りなのです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 どのようにプレゼンテーションするかはスタイルシートに任せて、ここはナビゲーションリストだから、そのようにマークアップするべき。
 誤解されないように!!断じてきれいに横に並べるというデザインのために「<div>ではなく<li>を使っている」わけではありません。・・・結果はそうであっても・・・DIVでも可能です。

 デザインを考えずにとにかく徹底的に文書構造を示すようHTMLを記述するというのは、HTMLをワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のひとつだと思って歩んでこられた方には、とてつもなく大きな壁だと思います。登山するのに道を誤って沢に下りてしまった---、元の道に戻るのは苦労します。
 しかし、私も含めて皆ここを乗り越えてきました。

 面白い例を紹介しておきましょう。Chrome以外のブラウザで!!(Chromeは代替スタイル扱えない)
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 このページを表示させてブラウザの[表示]→[スタイル(シート)]へ進み、色々なスタイルを選択してみてください。HTMLにプレゼンテーション的な要素はまったくないために、自在にデザインできるのです。印刷プレビューやウィンドウ幅を伸縮させたり、フォントサイズをCtrl + +/-で変更しても良いでしょう。

★まず仕様書を通しで読んでみましょう。
 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
 CSS 2.1仕様(日本語訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )


(解説)
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
 本来あるべきブロックがないために匿名ブロックが作られる。(HTMLの文法誤り)

2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
 ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
 改行やタブは空白文字ですから、ここに空白文字がひとつあるように整形される。
 よって、
 div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
  このフォントサイズを2pxにすれば2px空く

3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?
  上記が回答

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lin...続きを読む

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qinputのtextとsubmitの高さがズレる

<form>
<input type="text">
<input type="submit">
</form>

上のHTMLで両方のinputの高さを同じに設定しても、高さが揃わないのですが、
何が原因でしょうか?

Aベストアンサー

input[type="text"] {height:30px;}
input[type="submit"] {height:30px;}

そりゃダメでしょう。行内ブロックとして扱われる物と行内要素として扱われる物。
どうしてもなら、
input[type="text"],input[type="submit"]{line-height:40px;}
同じ設定をするのなら統一部分は一つのグループに書くほうがメンテナンス楽になりますよ。
念のため
input[type="text"],input[type="submit"]{line-height:40px;display:inline-block;}
かな。

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!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>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!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" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!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" lang="ja" ...続きを読む

QIEのみ表示場所がずれる。

FC2ブログでテンプレートを編集しています。
3カラム(3段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、
スクロールにあわせて追尾するようにしたいと思っています。

chromeやFirefoxでは指定の場所に問題なく配置されるのですが、
,IEのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう)

他のブラウザで問題ないので、IEだけずれる要因がさっぱり思いつきません。
どなたかわかる方いらっしゃいませんでしょうか。


*ブログのテンプレート自体は1200pxで固定




HTML部分

**********************************************
<div id="wrap">
<ul id="social_box"><br>
<a href="■"><img src="●" border="0"></a>
<br><br>
<a href="■"><img src="●" border="0"></a></ul>
<div id="main"></div>
<div id="side"></div>
</div>
**********************************************





CSS部分

**********************************************

#wrap{
width:960px;
margin:0px auto;
}

#social_box{
background:#fff;
width:60px;
padding:0px;
margin-left:-110px;
text-align:center;
position:fixed;
bottom:95px;
list-style-type:none;
}

#main{
width:660px;
float:left;
}

#side{
width:300px;
float:left;
}

***********************************************

FC2ブログでテンプレートを編集しています。
3カラム(3段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、
スクロールにあわせて追尾するようにしたいと思っています。

chromeやFirefoxでは指定の場所に問題なく配置されるのですが、
,IEのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう)

他のブラウザで問題ないので、IEだけずれる要因がさっぱり思いつきません。
どなたかわかる方いらっしゃいませんでしょうか。


*ブログのテンプレート自体は1200pxで固...続きを読む

Aベストアンサー

 FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。
 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。
 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。
[HTML4.01strict]でしたら、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と書くことで、Mac用IEも含めて標準モードで動作します。
 ⇒doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=doctype%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&hl=ja )
(現状ではHTML4.01strictがもっとも良いでしょう。transitinalではありません。)

 また、当然ですが、
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』
 もとても重要です。正しく書かれていないHTMLの場合、ブラウザは何とか表示しようと適当に補完して表示を試みます。その方法はブラウザごとに異なるため、差が出てしまいます。
 スタイルシートを書き始める前に
 ⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
でチェックしておく癖をつけましょう。
・<ul>内に<br>や<a>は入ることは出来ません。
 <ul>内に存在しうるのは<li>のみです。
⇒<!ELEMENT UL - - (LI)+
 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )
と書かれているのは、--(前後のタグを省略できない、(LI)がひとつ以上
 と書かれています。
 また<br>は通常のHTML文書には登場しません。「ひとつの段落でありながら改行する」という強制改行です。間隔を広げるために使用するものではありませんし、段落を示すものではありません。

※先日書いたサンプルが、こちら( http://oshiete.goo.ne.jp/qa/8246537.html )の回答No.2にあります。
 DOCTYPEを上記に変更して、HTML4.01strictに変更し
 そこで示した示したスタイルシートを次に書き換えてみてください。
 ()
div.header,div.section,div.footer{
width:90%;min-width:620px;max-width:1000px;
margin:0 auto;
padding:5px;
}
div.section{position:relative;min-height:400px;}
div.section div.nav,div.section div.aside{/* 子孫セレクタ */
position:absolute;top:0;
width:200px;height:100%;
}
/*div.section div.nav{left:0;}*/
div.section div.nav{height:200px;bottom:10px;position:fixed;top:auto;}
div.section div.aside{right:0;}
div.section h2,div.section div.section{
margin:0 210px;
}
div.section div.section{
width:auto;min-width:0;min-height:200px;
margin:0 210px;
}
/* たったこれだけ!---おまけに分かりやすく色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:silver;}
div.section div.section{background-color:white}
div.section div.nav{background-color:yellow;}
div.section div.aside{background-color:lime;}
div.footer{background-color:fuchsia;}



 

 FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。
 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。
 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。
[HTML4.01strict]でしたら、
<!DOCTYPE HTML PU...続きを読む

QIEとfirefox、行間の表示が異なってしまう

ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。
firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。

解消方法を教えていただけないでしょうか?

Aベストアンサー

line-heightの数値はpx指定ですか?%指定ですか?
IEはpxやptなどでフォントサイズを固定できますが、Firefoxではフォントサイズの固定ができません。
行間をpxなど固定サイズで指定していたとき、文字サイズが変われば行間も見た目が変わってしまいます。

「行間を指定する」
http://www.tagindex.com/stylesheet/text_font/line_height.html

「スタイルシートで使用する長さの単位」
http://www.tagindex.com/stylesheet/basic/length.html

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


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

人気Q&Aランキング