初心者のころは、かなり苦しめられました(涙)

<H1〜6>タグの通称”勝手に改行”を解除

やっぱり、見出しタグである、<H1>とかは、そのままじゃ、
つかいづらいよねっ。

文字のサイズもそうだけど、
なにより「勝手に改行する」?、っていう現象があるからねー。

例の、1行ぐらい間隔がひらいてしまう、という現象のこと。

これのせいで、きっちりレイアウトしたのに、
レイアウトがぐちゃぐちゃになったっていう人も、
多いんじゃないかな?

わたしは、けっこう苦労した経験がありますよー。^ー^

でも、これって、よく改行(<BR>?)するっていわれてるけど、
別に、<H1>としては、改行してるわけでは、ないんですよ?。。。。知ってました?

<H1>は、インライン要素(テキストとか)を、手軽にブロック要素に、
変更してしまうので、「改行しているっ」って思われがちなんだと思います。

たとえば、下のテキスト。(今回の説明では、<H4>を使用。)


私たち、<H1〜6>は、改行してるわけじゃないんですっ!!いやほんとにっ。

この「改行してるわけじゃないんですっ!!」を、
<H4>タグで、かこってあげると、

私たち、<H1〜6>は、

改行してるわけじゃないんですっ!!

いやほんとにっ。

こんなふうになるよね!

・・・・・たしかに、パッと見、改行してるようにみえるねぇ。

でもね、

ちょっと、疑問に感じるとこありませんか?

ほんとに改行してるんなら、「改行してるわけじゃないんですっ!!」と、
「いやほんとにっ。」の間が、
1行空いてるのは、納得できますけど、

なぜ、「私たち、<H1〜6>は、」との間も、1行空いてるのでしょーか?
改行って、下を空けるだけのものですよね?

じつは、この部分にヒントがありまして、
わたしも、この部分に疑問をもてたから、改行(通称)を解除する方法を、
発見することができたんですっ^^

たしか、<H1>って、ブロック要素だよね。
じゃあ、ブロック要素がこんなふうに、間を空けるときって、
どんな属性があるときだっけ・・・?

あれ?・・・・ひょっとして、、、、マージン?


・・・ストラーイクッ!!!!(笑)

そう、これって、改行してるわけじゃなくて、マージン属性で、
間隔がひらいてるだけだったんですよね!

だから、「margin: 0px」とすると、
この悩ましげな、間隔を取り除くことができちゃうんですよーっ♪   やったね^^

実は、、、

マージンで間隔をとっていた

だけなんですっ。

ねっ!

間隔があいてないでしょっ。

<H2 style="margin:0px">マージンで間隔をとっていた</H2>

こういうふうに、スタイルシートを定義してあげればOKです。
これは、インラインCSSで定義してますが、基本セレクタで定義したほうが、具合がいいかな?
そこらへんは、レイアウト講座で解説してますので、参考にしてくださいっ。




・・・でも、結局、行が代わってるんだから改行してるじゃんよ、
と突っ込んでくれるあなたっ!

・・・・・わたしは、CSS初級者と中級者の狭間でもがく者ですよ?(・・・・ベルセルクっぽい)
ほんとーに、見た目も改行したように見えなくする方法も、ちゃんと知ってますよー。

でも、ここでは、お話できませぬ。
理由は、、、、次回の更新ネタだからですっ。(笑)

サイト開設時に、すでに100ページぐらいあったので、けっこう命綱なのです。(涙)
どーか、平にご容赦くださいませー。
管理人ビクトリーのホームページ制作サービス!

企業サイトからネットショップ、店舗紹介サイトや個人サイトまで、幅広くホームページ作りのお手伝いをさせていただいてます。
ちょっぴり個性的なホームページやイラストで、お客様の活動をアピールしませんか?。 お問い合わせなどはお気軽にどうぞ。

WEBデザイン アイデアロゴデザイン アイデア写真加工のアイデアカラーテクニック講座WEBデザイン コラム
Webデザイン通信講座アフィリエイトでサイト運営WEBデザイン ブックスHP作成ソフトグラフィックソフト
WEBデザイン関連のリンクわたくし的なレンタルサーバーの選び方ホームページ制作ランキング