- ベストアンサー
CSSで見出し（タイトル）行の右端に日付を表示させる正しい方法は？
みなさま初めまして。OKWebコミュニティに初めて登録したMxanaduと申します。 CSSを用いて、見出し（タイトル）行の右端に日付を表示させようと思い、以下のような設定をしています。 [スタイルシートの定義] <STYLE TYPE="TEXT/CSS"> <!-- H4 { PADDING: 5PX; WIDTH: 99%; COLOR: #FFFFFF; BACKGROUND-COLOR: #008080 } SPAN.DATE { FLOAT: RIGHT } --> </STYLE> [HTMLドキュメントへの適用例] <H4>タイトル<SPAN CLASS=DATE> Mon, Aug 8, 2005</SPAN></H4> この方法で、Safari 1.3 (v312)（Mac OS X(10.3.9)付属）とiCab 3.0 Beta 337では意図した通り表示できます。 しかし、IE 5.2.3 (5815.1)（Mac OS X版）では見出しタイトルと日付の行がつぶれてしまいます。（<SPAN></SPAN>を外すとつぶれなくなりますが、日付を右端に表示できません） また、Mozilla系のNetscape 7.1、Mozilla 1.7.11、FireFox 1.0.6J、Camino 0.7JおよびCamino 0.8.4（全てMac OS X版）では見出しタイトル行で日付が改行され、paddingの中に埋もれてしまいます。 Windowsのブラウザでどうなるかは、Windowsマシンを持っていないので分かりません。 意図した表示ができるブラウザが限られてしまうのは、私のCSSの使い方に間違いがあるのでしょうか？ それとも、意図した表示ができないブラウザのCSS実装に問題があるのでしょうか？ 私のCSSの使い方に間違いがある場合は、正しい方法を教えて戴ければと思います。 以上よろしくお願い致します。<(_ _)>
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
CSSのfloatは正しく指定してもブラウザ毎に様々なバグがあり、なかなか統一がとり難いです。 一説には正しくfloatを表示するブラウザは未だ存在しないとさえ言われています。 但し今回の場合は、「floatは本来ボックスに対して適用するものなので、幅の定まっていないblock要素やspan要素に適用すると各ブラウザ独自の解釈で表示される」という事が原因かと思います。 なので、CSSの使い方に間違いがある、、と言えるのかな。 また、幅広いブラウザへ対応させる事を考えると、spanのclass属性値等も漏れなくダブルクォーテイションで囲ったほうが良しです。 そこで代替案ですが、改行された日付をマイナスのマージン指定で一行上に表示させる方法があります。 但しこのままだとタイトルが長くなると日付と重なっちゃったりしますので要注意。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="TEXT/CSS; CHARSET=SHIFT_JIS"> <TITLE>日付表示のテスト</TITLE> <STYLE TYPE="TEXT/CSS"> <!-- H4 { WIDTH:99%; PADDING:5PX; LINE-HEIGHT:100%; } SPAN.DATE { DISPLAY:BLOCK; TEXT-ALIGN:RIGHT; MARGIN-TOP:-1EM; } --> </STYLE> </HEAD> <BODY> <H4>タイトル<SPAN CLASS="DATE">MON, AUG 8, 2005</SPAN></H4> </BODY> </HTML> floatを使う場合は下記の様な具合ではどうでしょうか。 h4やdivのwidthは状況に合わせて指定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="TEXT/CSS; CHARSET=SHIFT_JIS"> <TITLE>日付表示のテスト</TITLE> <STYLE TYPE="TEXT/CSS"> <!-- H4 { WIDTH:300PX; FLOAT:LEFT; MARGIN:0PX; PADDING:0PX; LINE-HEIGHT:100%; } DIV.HEADLINE { PADDING:5PX; LINE-HEIGHT:100%; } --> </STYLE> </HEAD> <BODY> <DIV CLASS="HEADLINE"><H4>タイトル</H4>MON, AUG 8, 2005</DIV> </BODY> </HTML>
その他の回答 (3)
- Questa
- ベストアンサー率48% (13/27)
ご質問の趣旨から外れますが、position を指定する方法もあります。 h4 { position: relative; width: 99%; background: #008080; padding: 5px; color: #fff; } span.date { position: absolute; top: 5px; right: 5px; } 参考になれば幸いです。
お礼
Questaさま、はじめまして。 ですが、残念ながら戴いたアドバイスを試しましたところ、IE 5.2.3 (5815.1)（Mac OS X版）で見出しタイトルと日付の行がつぶれてしまいました。Safari 1.3, iCab 3.0 Beta337, FireFox 1.0.6J（すべてMac OS X版）では良好な結果を得る事ができました。 IEがつぶれなければシンプルなCSSの使い方なので利用させて戴きたいところですが、ここに来て欲が出て、できるだけ多くのブラウザで表示ができるようにしたいと思うようになりました。 ご回答ありがとうございました。
- pingu98
- ベストアンサー率62% (17/27)
補足、拝見しました。 大事な事を忘れていました^-^; こちらでのテスト環境は、Windows2000です。 で、上部paddingのスペースが異なる件、確認しました。 おそらくpaddingではなくh4のmarginかなぁと思うのですがいかがでしょうか。h1～6やbody要素等々には各ブラウザによってデフォルトのstyleがありまして、例えばフォントとかマージン、パッディング、ラインハイト等が各々決まっています。なので指定しないものについてはデフォルトの値が適用されるんですね。 で、前回の例のfloatを使った方ではh4のmarginを0に指定しているのに対し、前者はh4のmarginを指定していないのでデフォルトの値が適用されてるのかなぁと。IEの場合は両者とも同様のマージンになるかと思いますが、、これは…何ででしょう(笑)。そういう仕様なのかもです(汗)。 そんな訳で検証しやすいソースを作ったのでお試し下さい。 一応、windows2000／Firefox1.0.6 , IE6.0 , Opera8.0 , Netscape7.1でほぼ同一に表示確認とれました。 追加したスタイルは小文字で書きました。 ■ 一行マイナスマージン <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="TEXT/CSS; CHARSET=SHIFT_JIS"> <TITLE>日付表示テスト／一行マイナスマージン</TITLE> <STYLE TYPE="TEXT/CSS"> <!-- H4 { WIDTH:99%; PADDING:5PX; LINE-HEIGHT:100%; margin:0; } SPAN.DATE { DISPLAY:BLOCK; TEXT-ALIGN:RIGHT; MARGIN-TOP:-1EM; } BODY { background-color:gray; margin:0; padding:0; } H4 { background-color:orange; } SPAN.DATE { border:1px solid red; } --> </STYLE> </HEAD> <BODY> <H4>タイトル<SPAN CLASS="DATE">MON, AUG 8, 2005</SPAN></H4> </BODY> </HTML> ■ float <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="TEXT/CSS; CHARSET=SHIFT_JIS"> <TITLE>日付表示テスト／FloatLeft</TITLE> <STYLE TYPE="TEXT/CSS"> <!-- H4 { WIDTH:300PX; FLOAT:LEFT; MARGIN:0PX; PADDING:0PX; LINE-HEIGHT:100%; } DIV.HEADLINE { PADDING:5PX; LINE-HEIGHT:100%; } BODY { background-color:gray; margin:0; padding:0; } H4 { background-color:orange; } DIV.HEADLINE { background-color:red; } --> </STYLE> </HEAD> <BODY> <DIV CLASS="HEADLINE"><H4>タイトル</H4>MON, AUG 8, 2005</DIV> </BODY> </HTML> それと、やり方としてはもちろんao_さんのやり方もあって、ただそれぞれ特徴が違ってくるので、実際の使い方に合わせて選べると良いです。色々バグとかあって大変ですけど、とにかく経験と慣れですのでがんばって下さい☆
お礼
pingu98さま、こんにちは。 質問の趣旨から外れるような事に対して対応して戴きありがとうございます。また、たくさんのブラウザで確認して戴いた事にも感謝致します。 > おそらくpaddingではなくh4のmarginかなぁと思うのですがいかがでしょうか。 私も初めmargin設定での対処を試みました。h4では、あまり目立たないのですが、私は他にh2もページのタイトルとして使っており、これにpingu98さまのANo.2のアドバイスを同様に適用したところ、FireFoxでpadding上部から要素（文字）が飛び出しそうな状況となりました。 > h1～6やbody要素等々には各ブラウザによってデフォルトのstyleがあり…指定しないものにつ > いてはデフォルトの値が適用されるんですね。 ご指摘の通りのようですね。そこで、CSSの先頭に * { MARGIN: 0%; PADDING: 0%; FONT-STYLE: NORMAL; FONT-WEIGHT: NORMAL; } という表記（pingu98さまのアドバイスの応用であり、Lucky bag::blogに書かれていたものです）を加えてみたところ、FireFoxは要素がpaddingの上側に大きくずれる傾向があり、逆にSafariでは若干下側にずれる傾向があることが分かりました。 結果として、上記全要素クリアと各要素でのmarginおよびpaddingの微調整（デフォルトのスタイルが極端でないブラウザでも目立たない程度）で対処することにしました。 > そんな訳で検証しやすいソースを作ったのでお試し下さい。 早速試してみました。その結果、どちらのソースでもOS X版のFireFoxは、要素がpaddingの上側に大きくずれ、意外にもSafariとIEで要素の位置がpaddingの中央に、またiCabでは一行マイナスのケースで若干タイトルと日付の位置にズレが生じる事が分かりました。 > やり方としてはもちろんao_さんのやり方もあって… ご指摘の通りです。私の場合は、どうやらpingu98さまのANo.2の一行マイナスのアドバイスが一番ぴったりな感じがしたということで、ao_さまの方法を否定したつもりはありません。 > 色々バグとかあって大変ですけど、とにかく経験と慣れですのでがんばって下さい☆ ありがとうございます。今回の一件で、CSSと種々のブラウザでの実装の違いについて、かなり勉強することができました。感謝致します。 それでは失礼致します。
- ao_
- ベストアンサー率33% (15/45)
h4の中にspanが入っているのでfloatはいらないと思います。 spanに左のpaddingを設定して右端までずらせばいいのではないでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- h4 { width: 500px; background-color:#008080;} span { padding-left: 390px; font-weight:normal; font-size:0.7em;} --> </style> </head> <body> <h4>見出し<span>050811</span></h4> </body> </html>
お礼
ao_さま、はじめまして。 ao_さまのアドバイスを試しましたところ、IEでも、FireFoxでも正常に表示できました。 ただ私の場合、日付文字数が変動するので、spanのpadding-leftの設定が微妙になるようです…。 アドバイスどうもありがとうございました。<(_ _)>
お礼
pingu98さま、こんばんは。 アドバイスに勝手に補足をくっつけて失礼致しました。<(_ _)> アドバイスを戴いた２つのうち、１番目の方を使わせて戴く事にしました。タイトルの長さやフォントサイズを変えてブラウズされた時のタイトルと日付の重なりは、各ブラウザでの表示確認ページに記載する事にします。（フォントサイズはソース側では固定しないつもりです） ２つめのアドバイスにあったH4のマージンとパディングのクリアも応用させて戴きました。 Lucky bag::blogというブログで、各ブラウザ毎に異なるデフォルトスタイルを消してしまう方法があり、pingu98さまの２番目のアドバイスにあったH4の設定は、これに近いもので、１番目と２番目のアドバイスがFireFoxで表示が異なったのは、これが原因と思います。 今回の質問に戻って「floatは本来ボックスに対して適用するもの」というご指摘については「とほほのWWW入門」でも、それらしい説明があったのですが、WDG（ウェブデザイングループ）の説明では全ての要素に適用できるとなっていました。WDGの説明を鵜呑みにしてハマったというのが、今回の顛末かと思います。 今回、pingu98さまのアドバイスを元に、ほとんど無知状態だったCSSの勉強ができました。ありがとうございました。
補足
pingu98さま、はじめまして。戴いたアドバイスへのお返事遅れて申し訳ありません。 色々教えて戴きありがとうございます。pingu98さまのアドバイスのどちらでも、日付は私の意図した通りの表示ができました。ありがとうございます。 現在、教えて戴いた２つのアドバイスがFireFoxで異なる表示を見せる事と格闘しております。 （日付の問題ではなく、上部のPADDINGスペースが２つのアドバイスの間で異なっています） 初心者ゆえ解決できるか疑問ですが、お礼のお返事は上記の表示の差の原因が分かってから差し上げようと思っております。 以上、勝手ですが、何もコメントしないのは失礼かと思い、補足にて状況報告させて戴きました。 それでは失礼致します。