*

テキストの回り込みを設定するfloatプロパティ

公開日: : CSS ,

通販サイトやニュースサイトを眺めていると
様々なコンテンツが横に並べて配置され、
それが複数あります。

今までこのブログの記事を書いてきた内容だけでは
左右にコンテンツを並べることができません。

今回、記事で触れるfloatプロパティを使用すると
横にコンテンツを並べることができます。

floatプロパティ

none 回り込みはしない デフォルト値
left 指定した要素を左に寄せて、
   次の要素は右に回り込ませる。
right 指定した要素を右に寄せて、
   次の要素は左に回り込ませる。

上記の例を見て頂ければ分かりますが、左に寄せたいもの
その後にも左に寄せたいものにfloat:leftを適用しています。

float:left/rightの回り込みを解除する
clearプロパティ

floatプロパティを使うときに気を付けなければいけないことがあります。
float一度指定設定するとその後続の要素も回り込んでいます。

このclearプロパティでbothを設定すると、この回り込みを解除ができ
この回り込みの場所より下の位置にコンテンツを配置することができます。

スポンサードリンク

関連記事

CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化

記事を読む

CSS

要素に2次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。2

記事を読む

cateCSSPage

id名,class名をCSSでセレクタにする。

CSSでid名,class名をセレクタに指定する場合、 id名の前には「#(イゲタ)」、class

記事を読む

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを

記事を読む

cateCSSPage

枠線の形、太さを指定したい。

今回、触れるのは「border」プロパティです。コンテンツ領域と 前回の記事で紹介した「paddi

記事を読む

CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度の

記事を読む

cateCSSPage

ボックスに影をつける

ボックスに影を付ける時に使用するのが 「box-shadow」プロパティです。 これの値に影の距

記事を読む

CSS

グラデーションの繰り返しを指定する

グラデーションは繰り返して表示することができます。線形グラデーションを表示たいなら、repeatin

記事を読む

CSS

要素に3次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。3

記事を読む

cateCSSPage

物の角を丸くするborder-radiusプロパティ

<div><section>などブロックレベル要素に 背景色をつけたとき、

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑