*

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

公開日: : CSS ,

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

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

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

floatプロパティ

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

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

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

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

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

スポンサードリンク

関連記事

cateCSSPage

overflowプロパティを使い表示領域を設定する

width,heightを使って高さを設定したコンテンツを入れる箱に、 サイズを超えるもの、画像や

記事を読む

cateCSSPage

リスト要素のスタイルを設定する

<ul>や<ol>タグでマークアップするリストは、 スタイルで先頭に表示さ

記事を読む

CSS

擬似クラスってなに?

簡単に言うと、状況に合わせてスタイルを変える クラスのことです。 CSSで要素をしてい、何か

記事を読む

CSS

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

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

記事を読む

cateCSSPage

線形グラデーションを設定する。

CSS3から背景やボーダーにグラデーションを付すことが できるようになっています。 表現でき

記事を読む

cateCSSPage

行間を設定したいときに使う line-heightプロパティ

行間を設定して文字を読みやすくする。 行数の多いリストや文字数が多い段落は文字が詰まっていて 読

記事を読む

cateCSSPage

外側の余白を設定するときに使うmarginプロパティ

以前paddingプロパティを紹介しました。 あれはborderの内側の余白を設定するものでした。

記事を読む

CSS

圏点を指定する

今回の記事で紹介するプロパティは、IEやfirefoxでは利用できません。 語句を強調するため、文

記事を読む

CSS

擬似要素とは

前回の記事で紹介した、擬似クラスと似てますが、 今回書く擬似要素は要素内のある場所を対象に適用させ

記事を読む

cateCSSPage

文字を斜体にしたり、文字を装飾する

文字を斜体にするfont-styleプロパティ CSSのfont-styleプロパティを使用するこ

記事を読む

スポンサードリンク

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 ↑