
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
ITコラム
2017.05.31
floatプロパティは、HTML要素を左側または右側に寄せて配置する際に使用するプロパティです。floatプロパティを指定した要素の後に続く内容は、floatプロパティで指定した要素が配置されていない右側または左側に表示されます。
今回は、段組みなどのレイアウトで重要な役割を担うfloatプロパティについてまとめたいと思います。
通常、HTML要素は縦方向に順次表示されますが、画像の横に文章が表示されたり、ナビゲーションとコンテンツが左右に並んでいるwebサイトを見たことがあると思います。
このようなレイアウトを実現する際によく使用されるのがfloatプロパティです。
floatプロパティの値は、次の通りです。
none デフォルト値
配置を指定しないleft 指定した要素を左側に寄せて配置(後続の内容は右側に回り込む) right 指定した要素を右側に寄せて配置(後続の内容は左側に回り込む)
floatプロパティの値は、継承されません。
また、floatプロパティは、positionプロパティにstatic以外の値が指定されている要素を除き、全要素に使用できます。
画像とテキストとを順次記述すると、通常は次のように表示されます。
彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
上の例で、画像を表示する要素のfloatプロパティにleftを指定すると、次のようになります。
彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
上の例で、画像を表示する要素のfloatプロパティにrightを指定すると、次のようになります。
彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:10px; border:solid 1px #AAA;} div#sample p {margin:0;} .smpbox {width:180px; height:180px; margin:5px 10px 10px 0; float:right; /* またはfloat:left; */} (HTML) <div class="sample"> <div class="smpbox"><img src="img/image.jpg" /></div> <p> 彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。 </p> </div> </div>
2つの要素にそれぞれfloat:leftの指定をすると、左側から横並びに表示されます。
次に、横並びの2つの要素の下に表示させたい要素を記述する場合、次のような表示になることがよくあります。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:10px; border:solid 1px #AAA;} .smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;} .smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;} .smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE;} (HTML) <div class="sample"> <div class="smpbox"><img src="img/image.jpg" /></div> <div class="smpbox2"> <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small> </div> <div class="smpbox3">2つの要素の下に表示させたい要素(float指定なし)</div> </div>
この現象は、floatプロパティの特徴に原因があります。
floatプロパティは、float(浮動する)の言葉通り、要素を浮かせて移動させる指定をします。
上の例では、float:leftを指定した画像要素とテキスト要素を、浮かせて左側に移動させています。
この2つの要素は浮いた状態にあるという認識のため、浮いたことによって空いた地上スペースに、次の要素(フロート指定のない水色領域)が入っているという状態です。
このようなfloatプロパティの特徴を踏まえて、当初の意図通りの表示を実現するためには、clearプロパティを使用します。
clearプロパティは、floatプロパティによって左寄せ(または右寄せ)指定された要素の、次の要素に対する回り込みの指定を解除するプロパティです。
clearプロパティの値は、left、right、both、の3つです。
leftとrightは、それぞれfloat:left、float:rightを解除するもので、bothは両方を解除します。
解除もれ防止のためにも、特に問題がなければclear:bothを指定します。
clear:bothを指定すると、テキストが回り込まず、水色領域が下に表示されます。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:10px; border:solid 1px #AAA;} .smpbox {width:100px; height:100px; margin:5px 10px 10px 0; background:#6CF; float:left;} .smpbox2 {width:100px; height:200px; margin:5px 10px 10px 0; background:#FF9696; float:left;} .smpbox3 {width:300px; height:300px; margin:5px 10px 10px 0; background:#31A9EE; clear:both;} (HTML) <div class="sample"> <div class="smpbox"><img src="img/image.jpg" /></div> <div class="smpbox2"> <small>彼はメキシコ湾流に独り小舟を浮かべて魚を獲る年老いた漁師であるが、一匹も釣れない日が今日で八十四日も続いていた。</small> </div> <div class="smpbox3">2つの要素の下に表示させたい要素(float指定なし)</div> </div>
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.