Liveveryday BLOG

Liveverydayメンバーのライフハックブログ

ブラウザサイズからの要素のはみ出し

f:id:webtsuku1:20160207093655j:plain

 

おはようございます。フロントエンドエンジニアのあらぴくです。

 

今日はブラウザの横幅を要素が超えてしまう原因と対処法について見ていきたいと思います。

 

普段はアイキャッチ画像のようにコーディングをしている私ですが、プログラミングはまだ始めて4ヶ月ほど。

 

同じような境遇の方(つまり初心者)の手助けに少しでもなれるなら幸いです。

 

f:id:webtsuku1:20160207093522p:plain

 

昨日、擬似要素(before::, after::)を使って背景を斜めにし、オーバーラップさせることについて検証していたのですが、ブラウザから擬似要素がはみ出してしまう事件が起こりました。

 

そう、事件は会議室で起きてるんじゃない、現場で起きているんだ・・・!(早くオフィス欲しい)

 

グレーの背景の右端がwidth: 100%;の限界点なんですが、明らかにはみ出ているのがおわかりでしょうか。

 

 

これに対処する方法が

 

overflow: hidden; です。これ、めちゃくちゃ便利です。

 

 

擬似要素やmargin、paddingなどの調整の際、どうしてもこういった現象に直面してしまうと思います(少なくとも私の場合)。

 

ぜひ、皆さんも使ってみてください!

 

 

 

ウェブツクのHPはこちら→http://www.w-tsuku.com