h1とh4の行間をせばめたい

質問

h1とh4の行間をせばめたい

web初心者です。教えていただけますと助かります。

今htmlで

<h1>ENGLISH<br />
日本語</h1>
<h4>日本語の文章<br />
English texts are here</h4>

cssで
h1 {
font-size: 8.5pt;
line-height: 120%;
margin-top: 0px;
color: #333;
}

h4 {
font-size:7pt;
line-height: 115%;
color: #333;
}

と設定しているのですが、
日本語</h1>
<h4>日本語の文章
の間の行間がとても大きいのでせまくしたいと思っています。
どうしたらよいでしょうか。

また</h1>と<h4>に</br>がなくても
改行されるのはなぜなのでしょうか・・・

今はh1の一行分くらい空いているように見えるのですが
半分くらいにしたいと思っています。

よろしくお願いします。

回答No.3

LOHA · ベストアンサー

＞margin-top: 0px;をmargin: 0px;にしてみましたが変わらないようです。。。

変わりませんでしたか（汗。
おそらくh4の方にもmarginがあるからかと思われます。
h4の方にもmargin:0を書いてみるとどうでしょう。
＃ちなみにmarginは相殺し合います。
＃http://blog.webcreativepark.net/2008/07/09-001153.html

＞それから初歩的ですが、<h1>と<h4>の間に何もなくても
（<p>や</br>など）margin等の設定で変わるものなのでしょうか？

変わります（というより「変えられます」かな）。

やはりブロック要素、インライン要素、インラインブロック要素の概念を理解するのが、早道かと思います。タグとしては、それぞれ代表的なdiv, span, imgだけでよいので、色々サイトを参考にしながらスタイルを色々適用してみると良いかと思います。
それとbackground-colorを入れるとブロックの様子が見やすいです。

ちなみにbrは文章の改行のタグでインライン要素です。これを使って上下のスペースを調整することは出来ることはできますが、文字の高さ(line-height)ごとの調整しかできないですし、見た目も悪いです。
＃実を言うと携帯サイトでは使ったりします

それとこれまで適当にごまかしてきましたが、ブラウザ(IE, Firefox, GoogleChrome, Safari, Opera, ...)によって見栄えが変わることも考慮する必要があります。
＃いずれ分かるかと思いますが、cssで厄介なのはIE6です。
ブロック要素であるh1～h6, p, divなどのタグの余白(margin)のデフォルト値はブラウザによって変わります。フォントの大きさなども変わります。
なので、最初に余白やフォントの大きさを統一したりします。私は大抵
* { margin: 0; padding: 0 }
body {
フォントの設定、line-height（大抵1.5)、背景色、etc...
}
という感じで共通の設定を行っています。

＃余力があればFirefoxでFirebugというアドオンを入れると勉強になるかと思います。
＃ちなみにFirebugはWeb開発するときの必要アイテムです

以上、書き出すとキリがないのですが、このぐらいにさせていただきます。

お礼

できました！！ありがとうございます！
marginをいろいろとさわってみたらできました。

要素の概念について、しっかり理解したいと思います。
見栄え優先で手当たり次第にやるのはあまりに危険そうですね・・・

とてもわかりやすく本当に助かりました。
また何かありましたらぜひ教えてくださいね。

ありがとうございました！

回答No.2

LOHA

>font-size: 8.5pt;

あまりptは使わない方が良いかと思います。
ユーザビリティに配慮するなら%などの相対指定が、デザイン重視であったとしてもpxが一般的です。

>line-height: 120%;

line-heightも120%ではなく、1.2のように単位なしで書くほうが良いとされています。http://www.google.co.jp/search?q=line-height+%E5%8D%98%E4%BD%8D&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a

さて、本題の
>h1とh4の行間をせばめたい
ですが、ブロック要素(詳細は下記)同士の余白の調整は基本的にmarginとpaddingで行ないます。
例えばh1の
margin-top: 0px;
を
margin: 0px;
としてみると間隔が狭まるかと思います
＃ブラウザ次第なので狭まらなかったらスミマセン。

また、heightやline-heightの調整でも変えられます。
以上、margin, padding, height, line-heightあたりを色々といじってみると良いかと思います。
http://www.htmq.com/style/index.shtml

>また</h1>と<h4>に</br>がなくても
>改行されるのはなぜなのでしょうか・・・

タグ（要素）にはブロック要素、インライン要素、インラインブロック要素の３種類があります。
大雑把に言えば、CSSにおけるdisplayプロパティが、デフォルトで上記３要素についてそれぞれblock、inline、inline-blockに相当しています（例外もあります）。
それによってブラウザデフォルトの設定で改行があったりなかったり、といった表示になります。
これ以上は、説明が長くなるので以下のURLを参考にしてください。
http://www.mozilla.gr.jp/standards/webtips0015.html
http://www.marguerite.jp/Nihongo/WWW/RefCSS/display.html

お礼

ありがとうございます。
さっそくフォントをpxに、line-heightも単位なしにしてみました。
こういう所はソフトに頼りきらずに経験者さんに伺うべきですね。勉強になります。

さて、
margin-top: 0px;
を
margin: 0px;
にしてみましたが変わらないようです。。。

それから初歩的ですが、<h1>と<h4>の間に何もなくても
（<p>や</br>など）margin等の設定で変わるものなのでしょうか？

いろいろmarginやheight等いじっていますが<p>等を入れるとさらに大きくなってしまうようです・・・

ブロック要素やインライン要素等については後ほどゆっくり勉強させて
いただきたいと思います。

もう少しがんばってみます。
何か他に思いつく事があれば教えていただけますと助かります。

よろしくお願いします。

回答No.1

noname#119957

改行がされるのは、HTMLの仕様です。
改行しない指定は、<nobr />です。
あなたも、ノーブラと覚えればすぐに覚えられます。

ごく普通に、
h1 {
margin-bottom:1em;
}

の追加で、h1タグの下にマージンとして１行分開きます。

たとえば、行間・行高は、
line-height
margin
padding

などで気に入るように調整してください。
単位はpxやemで

emなら文字サイズに比例して拡大されます。

お礼

ありがとうございます。

ノーブラ、覚えやすいですね＾＾

いろいろ試してみましたがまだうまく行かないようです。
もう少し書いていただいたことを参考にがんばってみます。