
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
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.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.