Pocket
LINEで送る

float: left;使用時にもお世話になる便利なCSS!

Bikes!

コンテンツ

overflow: hidden; makes protruding content disappear

When child element is out of parent element’s box,
setting the overflow property on the parent element is
a very effective solution.

So I check the effect after using the overflow property. [5 ways]
Thank you for reading!

中身が溢れて困った時はoverflowプロパティ(入れ子/ネスト)

「あふれたものを隠してくれる」との字面通り
Webサイト制作において
overflow: hidden;は力強い味方となってくれます。

日頃からお世話になる事も多いこのコード。
身に付けた周辺知識をまとめておきたいと考え
ブログにUPする事にしました。

実験ルール

3/1(土)にアップしたブログ記事
[徹底実験!] <ul><li>とfloat:left;で横並び
実験ルールに加えて
当該記事の
5.一郎と二郎にfloat: left;をあてている状態を基本ベースとする。

一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

(注)
親要素 → <ul>タグ
子要素 → <li>タグ

ボックスについてのお勧め記事はこちら

HTMLクイックリファレンス 様
ボックス-CSSの基本

基本ソースコード

1
2
3
4
5
6
7
<ul style="list-style: none;">
    <li style="float: left;"><img src=""></li>
 
    <li style="float: left;"><img src=""></li>
 
    <li><img src=""></li>
</ul>

1.初期状態

  • ichirou
  • jirou
  • saburou

通常の状態です。

[Case #1]
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

2.親要素の<ul>タグの背景色を緑にした状態

  • ichirou
  • jirou
  • saburou

子要素の<li>タグの一郎・二郎・三郎が
親要素の<ul>タグのボックスからはみ出ず
綺麗に収まっている事がわかります。

[Case #2]
<ul> → background-color: #23b473;
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

3.親要素の<ul>タグの背景色を緑・高さを115pxにした状態

  • ichirou
  • jirou
  • saburou

子要素の<li>タグの一郎・二郎・三郎が
親要素の<ul>タグのボックスから
はみ出ている事がわかります。

(注)
親要素の<ul>タグの高さと
子要素の<li>タグの高さの差による巻き込まれを防ぐ為に、
この本文自体(pタグ)にmargin-top: 125px;を設定しています。

[Case #3]
<ul> → background-color: #23b473; height: 115px;
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

4.上記3.の状態 + <ul>タグにoverflow: hidden;を設定した状態

  • ichirou
  • jirou
  • saburou

overflow: hidden;の働きによって
親要素の<ul>タグのボックスから
はみ出ていた部分が非表示になっている事がわかります。

[Case #4]
<ul> → background-color: #23b473; height: 115px; overflow: hidden;
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

5.上記3.の状態 + <ul>タグにoverflow: scroll;を設定した状態

  • ichirou
  • jirou
  • saburou

overflow: scroll;の働きによって
子要素の<li>タグに対し
親要素の<ul>タグの高さが足りない状態の時でも
スクロールバーを動かす事により中身を閲覧できるようになります。

[Case #5]
<ul> → background-color: #23b473; height: 115px; overflow: scroll;
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

記事まとめ [親要素のボックスとoverflow: hidden;は相性抜群]

親要素が子要素を囲む入れ子(ネスト)形式。
その集合体であるWebサイトの構造。

overflow: hidden;の周辺知識をまとめる事は
Webサイトの構造を再認識する良い機会となりました。

画像の引用元 (Flickr・イラストAC)

バイク運送写真
作品名 Bikes!
Laurel Fan 様

一郎イラスト
作品名 アビシニアン(猫)
OOtsuki。 様

二郎イラスト
作品名 マンクス(猫)
OOtsuki。 様

三郎イラスト
作品名 エキゾチック(猫)
OOtsuki。 様

ブログ次回更新日のお知らせ

3/15(土)前後にUP予定です。
頻出HTMLタグを一つ取り上げて
記事にしたいと考えています。(変更あり)

ライフハックお悩み解決製品・サービスの情報をまとめました↓

製品・サービスの公式ページを見る こんな製品・サービスです
ウェブキャンプ :Webスキルのパーソナルジム・いつでも質問 & 豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ :実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive
:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
リツアンSTCは、エンジニアに特化した人材紹介会社(派遣・業務委託・正社員紹介)です!
:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円!業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」
:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。
Pocket
LINEで送る

比較表:説明

はみ出し情報

コメント欄

この記事はこんな人が書いています!

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る