「見出し画像(文字と同じ大きさ程度)+小見出しのtext」をいくつか縦に並べたいのですが、その間隔をCSSで設定したいと思います。
■画像A+小見出しtext
(この間隔を制御したい)
□画像B+小見出しtext
(この間隔を制御したい)
★画像C+小見出しtext....以下同じ
「画像+小見出し」をdivでまとめて、それに対して「下方向margin」を与えて間隔を制御したのですが、このやり方は間違った方法なのでしょうか?正しいCSSを学びたいのですが、どなたか教えていただけますか?
No.2ベストアンサー
- 回答日時:
主題に対する回答を忘れてました。
別に下marginでも上marginでも両方ででもmarginで制御する事は間違いではありません。
ただし両方のmarginが指定されている場合、上下marginは相殺されますので注意が必要です。(参考URL)
以下3つは最初の見出しの前と、最後の見出しの後ろのmarginを除けばお互いのmarinは同じ2emになります。
・見出し {margin-top:2em;margin-bottom:2em;}/*2em+2emで間が4em・・・にはならない。*/
・見出し {margin-top:0;margin-bottom:2em;}
・見出し {margin-top:2em;margin-bottom:0;}
実際には見出しと見出しの間には内容が存在すると思われるので、その内容との兼ね合いと最初と最後の見出しの前後に確保したいmarginを考慮して好きなような割合で上下marginを指定すればよいかと思います。
参考URL:http://www.y-adagio.com/public/standards/tr_css2 …
この回答への補足
ありがとうございます。<ul>と<li>、もしくは<dl>と<dt><dd>でやることも考えたのですが、その場合行間の制御がなんだかうまく行かなかったので<div>にしてみました。ちなみに、もしsteel_grayさんなら何を使いますか?参考までに教えていただけると嬉しいのですが。とりあえずWinのIEとNN、MacのIEとNNで動作確認ができるので試してみます。
補足日時:2005/10/30 20:10No.3
- 回答日時:
「見出し」というからには<Hn>なのかな?と、感じていました。
どうマークアップするのが適切かは具体的にどんな書類なのかわからないと判断つかないですね。
No.1
- 回答日時:
1.面倒でも正式な仕様書(参考URLは邦訳だけど)を読む。
2.あくまで正しいHTMLがあってのCSS。CSSの為にHTMLを捻じ曲げない。(divやspanを追加するのはやむなし。)
3.IEで確認しない。最終的にはIEでも確認するにしても、Firefox/Netscape/Mozillaのどれかで基本的に作る。(動作が異なる場合、IEの方が妙に都合よく誤った動作をする場合がおおいので)
これらに気をつければ概ね正しいCSSを書けていると思います。(絶対ではありませんが。)
(4.うまくデザインできない時はCSSもまだまだ過渡期と割り切って時にはすっぱり諦める事も大事かも。)
参考URL:http://www.y-adagio.com/public/standards/tr_css2 …
この回答への補足
早速の回答ありがとうございます。一応、WinのFirefox/NN/IE、MacのNN/IEで動作確認をして問題なかったのですが、とんでもなく間違ったことをしているのかと心配で質問させてもらいました。URL参考にします。
補足日時:2005/10/30 20:11お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- 子育て・教育 小学生でスマホをお子様に与えている方に質問です 9歳までなら大丈夫だと思いますが、10歳になれば異性 1 2023/01/21 11:15
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- その他(住宅・住まい) 古いコンクリート擁壁について 3 2023/04/11 12:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- ビデオカメラ ビデオカメラの撮り方ですが 3 2022/07/10 18:48
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
name="description"が効きません
-
1時間30分を簡単に表したいで...
-
複数のボタンを等間隔に、かつ...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
HTML属性での「""」 「''」違い
-
ヘッダーを左右に二分割する方...
-
htmlのolやulなどlistにtitleや...
-
cssで見出しが複数行になると先...
-
開閉式の隠し要素が一瞬表示さ...
-
IE・NNの独自タグについて
-
floatで5個のdivをうまく配置し...
-
DWでhtml5で記述するとCSSが反...
-
中央寄せ
-
極々シンプルなHP作成したいの...
-
html divボックスの入れ子で中...
-
overflow-x : hiddenが効かない;
-
ホームページ作成会社を探して...
-
style属性と外部CSSの非整合性...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
おすすめ情報