HTML5とCSS3をマスターするためのブログ

HTML5とCSS3をひたすら勉強していくブログです。ずぶの素人で中卒の僕が10年以上ぶりに勉強していきます。

画像の回り込み指定 float指定について

前回挿入した画像に対して、記事の回り込み指定をしました。

難しいというよりもややこしいなと感じた部分があったので紹介していきたいと思います。

float

今回記述した内容は以下のとおりです。

CSS

article {

 background-color: #ffffff;

 width: 900px;

 margin-left: auto;

 margin-right: auto;

 border: solid 1px #aaaaaa;

 padding: 30px;

 box-sizing: border-box;

 margin-bottom: 15px;

 box-shadow: 1px 1px 3px #aaaaaa;

 border-radius: 20px;

 overflow: hidden;

}

/*フッター*/

footer {

 width: 900px;

 margin-left: auto;

 margin-right: auto;

 clear: both;

}

/*画像を左に配置するレイアウト*/
figure.photo-left {
margin: 0;
margin-right: 20px;
float: left;
}

figure.photo-left img {
width: 550px;
}

/*画像を右に配置するレイアウト*/
figure.photo-right {
margin: 0;
margin-left: 20px;
float: right;
}

figure.photo-right img {
width: 550px;
}

赤字の部分が今回記述した内容です。

前回から登場したfigureというクラスに対しての指定ですね。figureとは画像を配置するときに使用するタグなので、簡単に言えば画像に対するレイアウトの指定です。

 

大きな変更点はfloat指定が入ったことです。これにより、画像を記事の左右に回り込めるように指定しました。

figure.photo-left right

figure.photo-left rightでは、marginで余白の指定とfloatで回り込みの指定をしています。marginを0に指定することで、文章と画像が左端または右端に揃った状態で表示できます。

overflow: hidden

overflow: hiddenはarticle部分の記述してある指定です。ただ画像を貼り付けただけでは、画像の幅が640pxなのではみ出してしまいます。その不具合を解消するため、overflow: hiddenを使ってarticle部分からはみ出した部分は自動的に表示させないで!という指定しています。

clear: both

clear: bothはfooter部分に記述した指定です。これを指定しないと、footer部分まで画像の左右まで回り込んでしまうため、clearプロパティをbothに指定します。clearプロパティは以下の4種類があります。

  1. both 左右どちらも(英語意味→どちらも)
  2. left 左のみ
  3. right 右のみ
  4. none 初期値

以上の指定は回り込み解除という意味があります。したがって、今回の指定はfooter部分の回り込みを左右方向に対して解除した、という指定になっています。

figure.photo-right left img {width: 550px;}

この指定は画像の幅を550pxにするという意味があります。元々640pxあった画像の横幅を小さくする理由はひとつ。回り込んだ文章を見やすくする意味があります。これを指定しないと、このサイトの場合きれいに文章を表示させることができません。

まとめ

今回から新たに登場したのは、overflow: hiddenとfloat: left rightとclear: bothです。いずれも画像を触るときによく使っていくことになりそうな指定ばかりです。float指定は文章にも使いますが、指定した部分が左右に移動することを覚えておく必要があります。

記述していて混乱したのが、画像が左右に来るのか、文章が左右に来るのかよくわからなくなりました。今回の記述で言えば、画像が指定どおりに左右に移動します。

 

今回のBefore Afterです。

Before

float-left

float-right

floatなし

色々記述しましたが、結局元通りって感じなので、進んだ感覚がまるでありません。画像のwidthが効いてないのかな?って感じもしますが、記述ミスはなさそうなので、このまま進めていこうと思います。