スタイルシートの二つ以上のクラスを同時に適用する方法

スタイルシートの二つ以上のクラスを同時に適用するには、次のような感じに記述する。

<div class="one two">

ようは、半角スペースを入れて続けてクラス名を入れれば良い。

3つならこんな感じ。 

 <div class="one two three">

margin-topが効かない件

margin-topが効かなかった。

どうも「マージンの相殺」が起こっているらしい。

マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。

floatを解除しないとmarginが有効にならないようだ。

解決方法として「clearfix」なるものがあるらしい。

ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。

有効にならないmargin-topの<div>の前に

<div>テキスト</div>

を記述。

スタイルシートには、

 .clear {
 clear: both;
}

と記述。

ようは普通にfloatを解除しただけ。

いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。

野本のおぼえ書きを立ち上げた

WEB作成過程で学んだことを忘れないようにメモしておこう。

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

30 / 30« 先頭...1020...2627282930