
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.05.29
overflowプロパティは、オーバーフロー(あふれた)部分の処理方法を指定します。
HTML要素にサイズ指定をした場合、コンテンツ(テキストなど)の分量が多いとはみ出てしまいます。そのはみ出た部分について、スクロール処理をするのか、はみ出た分を隠すのか等の処理を指定します。特に指定をしない場合は、はみ出たまま表示されます。
今回は、このようなoverflowプロパティについてまとめたいと思います。
1.overflowプロパティ
2.overflow:hidden
overflowプロパティの値は、次の通りです。
visible デフォルト値
処理をしない(はみ出たまま表示)hidden はみ出た部分は非表示 scroll スクロールバーを表示 auto ブラウザの仕様に依存(必要に応じてスクロールバーを表示)
overflowプロパティの値は、継承されません。
また、overflowプロパティは、ブロックレベル要素、テーブルセル、非置換要素でdisplay: inline-blockのもの、に使用できます。
overflowプロパティに4つの値を指定すると、それぞれ次のように表示されます。
overflow: visible
デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。
overflow: hidden
はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。
overflow: scroll
スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。
overflow: auto
ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:0} div#sample p { line-height:1.4em; margin:0 0 3em; padding:0.5em; border:solid 1px #AAA; width:100%; height:60px; overflow:visible;} div#sample p:nth-child(2) {overflow:hidden} div#sample p:nth-child(3) {overflow:scroll} div#sample p:nth-child(4) {overflow:auto} (HTML) <div id="sample"> <p style="color:blue;"> <b>overflow: visible</b> デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。 </p> <p style="color:red;"> <b>overflow: hidden</b> はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。 </p> <p style="color:blue;"> <b>overflow: scroll</b> スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。 </p> <p style="color:red;"> <b>overflow: auto</b> ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。 </p> </div>
overflowプロパティにhiddenを指定すると、はみ出た部分は非表示となります。
このoverflow:hiddenは、レイアウト実現の際に色々と便利に使用できます。
サイトのアーカイブ一覧など、各記事のタイトルや冒頭のテキストによって行数が変わると、ブロックの高さが不揃いとなってレイアウト的に見辛くなります。
そのような場合に便利に使えるのがoverflow: hiddenです。
ボックスの高さを決めて、はみ出た分はoverflow: hiddenと指定しておくと、各ボックスの高さが揃って見映えが良くなります。
overflow: hiddenで、画像などの切り抜き表示をすることができます。
この画像を切り抜いてみます。
親要素であるdiv要素を、border-radius:50%で円形にしました。
このdiv要素に、overflow: hiddenを指定しています。
ソースは次の通りです。
(CSS) .sample { width:250px; height:250px; border-radius:50%; overflow:hidden;} .sample img { width:auto; position:relative;} (HTML) <div class="sample"> <img src="img/image.jpg"> </div>
画像等にテキストを回り込ませたい時にfloatプロパティを使いますが、テキストが画像の下に回り込んでしまう場合があります。
overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;
このような場合、回り込ませるテキストに、overflow: hiddenまたはoverflow: autoを指定すると次のように回り込みが解消できます。
overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:10px; border:solid 1px #AAA;} div#sample p {margin:0; overflow:auto;} .smpbox {width:100px; height:100px; margin:5px 10px 10px 0; text-align:center; float:left;} (HTML) <div class="sample"> <div class="smpbox"><img src="img/image.jpg" /></div> <p> overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; </p> </div> </div>
overflow:autoで指定していますが、overflow:hiddenでも同じです。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.