カテゴリー別アーカイブ: 河合 亜沙美

よく現場で使う見出しのコードabsolute編

見出しの場合は、前回のfloatを使うコードより、こちらのほうが圧倒的に多いです。
floatの場合は、floatさせたものは必ずブロック要素になってしまうため、
幅をしっかり持ってしまうんですね。
なので、左右の要素の間にpaddingなどを指定したらその分背景がはみ出てしまいますし、
文字が増えてもはみ出してしまいます。
なので、absoluteという絶対値を使って、文字の端が置かれる場所を指定します。
pにはrightから10pxという右端からの指定をしています。

html

<div class="s_title002bg">
<div class="s_title002bgp>
<h4>ブログのタイトルなど…<p>右端に来る投稿時間など</p>
</div>
</div>

css

/************************
小見出しタイトル 
************************/
div.s_title002bg{
width:700px;
height:35px;
margin-bottom:20px;
background-image:url(../../../../images/new/news_stitle002.gif);
background-position:top left;
background-repeat:no-repeat;
}

div.s_title002bgp{
position:relative;
}

div.s_title002bg h4{
position:absolute;
top:10px;
left:10px;
font-size:15px;
font-weight:bolder;
color:#000000;
}

div.s_title002bg p{
position:absolute;
top:10px;
right:10px;
font-size:12px;
color:#83AD28;
}

現場でよく使う見出しのコード

以前の記事にて、というのをやりました。

widthやpadding、borderなどを一緒に書くと実際の幅の考え方がブラウザによって違うため、
意図したように表示できないため、分けて書くと良いですというものでした。

それに加えて、floatを使う場面もよくありますので、その二つを組み合わせたコードを載せておきます。

html

<div class="midasi1">
<div class="midasi1p clearfix">
<h3>ここは見出しです</h3><p>見出し文字の右にある英語です</p>
</div>
</div>

css

/*****************************************
見出し .midasi1
*****************************************/

div.midasi1{
 background-image:url(../images/hhh3.gif);
 width:600px;
 height:40px;
 margin-top:20px;
 margin-bottom:10px;
}

div.midasi1p{
 padding-top:8px;
 padding-left:20px;
}
 
div.midasi1 h3{
 font-size:15px;
 font-weight:normal;
 width:500px;
 float:left;
}

div.midasi1 p{
 font-size="8px"
 font-coler="red"
}

/*****************************************
クリアフィックス .clearfix
*****************************************/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

これで表示できるのは見出しの背景と、
その見出しの文字(500px)、
そしてその横にある英語です。
でも見出しのすぐ右横に英語がくる場合は良いのですが、
英語は右寄せにしたい、といった場合は
position:absolute;を使わないとうまく表示できません。

floatプロパティ-実際にディスプレイでclearfixを見てみよう-

clearfixをしていない場合
clearfixをしていないとこうなります

html

<div class="sd3">
<img src="images/kawaihayakawa.jpg" />
<p>梅雨も困りますね。でももうすこし経てばカラと晴れた天気になるのでがんばりましょう。</p>
</div>

css

div.sd3{
width:600px;
border:solid 1px #000000;
background-color:#FF9900;
}

div.sd3 img{
float:left;
width:200px;
}

div.sd3 p{
font-size:12px;
}

clearfixを追加した場合

clearfixするとこうなります.

このように背景がきちんとimgの下まで来ます。
見えない.が文章の下に配置され、それにclearがかかっているため、
親要素からは見える解除されたブロック要素となり、背景がそこまで伸びるようになりました。

html

<div class="sd3 clearfix">
<img src="images/kawaihayakawa.jpg" />
<p>梅雨も困りますね。でももうすこし経てばカラと晴れた天気になるのでがんばりましょう。</p>
</div>
div.sd3{
width:600px;
border:solid 1px #000000;
background-color:#FF9900;
}

div.sd3 img{
float:left;
width:200px;
}

div.sd3 p{
font-size:12px;
}

/*****************************************
クリアフィックス .clearfix
*****************************************/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

floatプロパティ-clearfixを使ってfloatを解除しよう-

前回書いたように、フロートを解除する要素が、親要素の中にない場合というときがあります。
そのまま書くと、背景の不足が起こってしまいますね。
よくあるのが、imgと文章を組み合わせた文で、
imgの長さまでは必ず背景がほしいのに、imgをfloatさせているため、
文章が短いと背景がそこまで伸びてくれないというものです。
floatプロパティ-フロートを解除する要素がない場合-

このようなときにclearfixを使います。
clearfixとは通称そう呼ばれているだけで、プロパティではありません。手法の呼び名です。
cleafixと名づけられた要素のafterに”.”を入れてclear:bothをかけています。
※擬似要素:afterについては調べてみてください。

さらにclearを指定するのは、次の要素ではなく親の要素となります。
このように指定することで、親の要素の背景がフロートされた子を内包して、背景が見えるようになります。
全部を覚える必要はありませんので、一つcssにコピーしておき、必要な親要素にclassを書き足しましょう。
クラスはスペースを空けることで複数指定が可能ですので、元のcssが使えなくなるということはありません。

html

<div class="h3bgbox clearfix">
</div>

clearfixは以下の通りです。

css

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
ポイント
content "."親要素の一番下に要素を作っています。
clearはブロックレベル要素にあてることになっているので,display: block;とします。
clear:bothでフロートを解除しています。
height: 0;とvisibility: hidden; で高さ0、表示なしにしています。
min-height: 1px;は擬似要素afterが効かないIE7用です。
html clearfixはie6とmacie5用です。
IE6,7は「要素の幅と高さが内容物に合わせて押し広げられる」というバグがあるので、1pxあれば親要素が子要素を内包します。
/*¥*//*/と/**/に挟まれたところはMac IE5.xのため。

floatプロパティ-フロートを解除する要素がない場合-

前回floatプロパティ-次の要素にclearを指定してfloatの解除をやりました。
その要素の中に、運よくフロートの解除を指定できるブロック要素があった場合は、
前述の背景の不足も起こらず、フロートを解除した要素まで背景が現れます。
floatプロパティ-フロートした要素の背景画像-

フロートした要素の下にフロートを解除した要素を置く
が実践できているわけですね。

ではフロートを解除する要素がない場合はどうなるでしょう。
例えばimgを2つ横にならべて、
それをfloatで指定していた場合。
(※imgはそのまま書けばブロックインライン要素なので横に並びますが、
視覚的にわかりやすくするためにわざとそのようにしています。)

解除するものがない場合

このようなときは、clearfixという手法を使います。

floatプロパティ-次の要素にclearを指定してfloatの解除-

h2で見出しタイトルが書いてありますが、「明日の天気」を写真の下に持ってきてください。

見出しにclearを指定する

html

<div class="kaijo">
<p><img src="kawaihayakawa.jpg" /></p>
<h2>今日の天気</h2>
<p>今日は晴れでした。...</p>
<h2>明日の天気</h2>
<p>明日はとてもよく晴れるでしょう...</p>
</div>

css

div.kaijo p img{
    width: 200px;
    float: left;
}

この場合は、
「明日の天気」と書いてあるh2にclear:left;をかけることで、以下のように綺麗に配置することができます。

floatの解除

html

<div class="kaijo">
<p><img src="kawaihayakawa.jpg" /></p>
<h2>今日の天気</h2>
<p>今日は晴れでした。...</p>
<h2 class="clear">明日の天気</h2>
<p>明日はとてもよく晴れるでしょう...</p>
</div>

css

div.kaijo p img{
    width: 200px;
    float: left;
}

div.kaijo h2.clear{
    clear: left;
}

floatプロパティ-floatの解除-

floatしたボックスは、解除しなければ、後続の要素にずっとフロートが掛かり続けてしまいます。
ずっと浮いたままになってしまうということですね。
なので、floatの次に続く要素でフロートを解除する必要があります。
これはclearというプロパティで行うことができます。

clear:left (左の回りこみを解除)
clear:right(右の回りこみを解除)
clear:both(左右の回り込みを解除)

ポイント
clearはブロック要素にしかかけることができません。
css1の頃はインライン要素にもかけることができたため、幅や高さをもたない
BRに対してclassをつけて、clearを掛けていましたが、今はあまり使いません。
もしBRにつける場合は、cssにてdisplay:blockでブロック要素にして使います。

floatプロパティ-フロートした要素の背景画像をimgに合わせるには-

前回、フローとした要素は通常のフローから外れるため、浮いているような状態となり、
親要素は通常フロー内の要素しか見れなくなるため、意図するように表示できないというお話をしました。

floatプロパティ-フロートした要素の背景画像

ではimgに高さを合わせるにはどうすればいいでしょう。

方法は5つです。

  • 背景となる親要素にheightを指定する(しかし文章が増えた場合に困ります)
  • 背景となる親要素にmin-heightを指定する(最低の高さのみ指定できますがIE6未対応)
  • 親要素にoverflow:autoを親要素に指定する(対応していないブラウザあり)
  • フロートした要素の下にフロートを解除した要素を置く
  • フロートしたの次のブロック要素がない場合はcleare:fixを行う

この中で、どのブラウザにも対応しているのは、
フロートした要素の下にフロートを解除した要素を置く
ですね。

またはClearfixをする方法ですが、これはフロートを解除した要素を置くという方法の、
応用編となりますので、フロートの解除の後に説明したいと思います。

floatプロパティ-フロートした要素の背景画像-

pがフロートされたimgよりも縦幅が短くなる場合はどうなるでしょう。
このように表示したい
float文章が短い場合
しかし、残念ながら↑このようには表示がされません。

フロートしたブロックを囲む親要素は、高さを持たなくなります。

ですので、実際の表示は、
floatした要素は親から見てもらえなくなる
このようになってしまいます。
これはfloatした要素が通常のフローから外れるため、浮いているような状態となり、
親要素は通常フロー内の要素しか見なくなるからです。
親要素の中にフロートをしていない要素があれば、その要素の高さを算出するので、
この場合はpの高さに合わせて、親要素の高さが変わっているというわけですね。

floatプロパティ-pの横幅を縮めてみるとどうなる?

前回、フロートしているimgより前に文章を置いたらどうなるか見てみました。

floatプロパティ-文章をimgより上にマークアップしたら?

このように表示されていましたね。
float文章をimgより前にした場合

ではこのpのwidthを縮めた場合はどうなるでしょう。

<p>
<img src="kawaihayakawa.jpg" />
今日は晴れでした。...
</p>
p{
width:300px;
}

img{
    width: 200px; 
    float: left;
}

floatpを縮めた場合

F)短縮された行ボックスが内容を収めることができなければ、その内容は下に行きます。
のルールにより、このように下側に流し込まれます。