大阪のホームページ制作会社 グリーンヒル

大阪・神戸・京都のホームページ制作会社
WEB制作・スマートフォンサイト・SEO対策ならお任せ下さい!

BLOG

気まぐれなブログ

ブログ
HOME ブログ > 【CSS】これは神なのか!?box-sizing: border-box;がやばいぐらい使える件

2016.09.05WEB【CSS】これは神なのか!?box-sizing: border-box;がやばいぐらい使える件

皆さんこんにちは!
なんだかんだバタバタしてまして、かなりブログの更新サボっていました。
良い事なのか悪い事なのか。。

最近はスマートフォンサイトやレスポンシブで制作する案件が増えてきましたが、
スマートフォンでの制作時にpaddingとかborderを指定した際に横にはみ出したりとかしません??
今回はそのお悩みを一発で解決してくれる魔法のような【css】の超便利なプロパティをご紹介します。

どういう事?

縦300px×横300pxのボックスコンテンツを作り、padding:20px;をかけたとしましょう!
そして中にはテキストを入力します。
box-sizing: border-box;を設定していない左側のボックスはなんと設定したパディング分が横に伸びてしまいます。
boxsizing2

これを右に回避しきれいに枠内に抑えてくれるのがbox-sizing: border-box;なのです!

コード

まとめ

いかがでしたか?
このプロパティは本当に使えますので是非覚えておくとよいでしょう!

ABOUT US私たちについて

株式会社GreenHillは大阪にあるホームページ制作会社です。
株式会社GreenHillは2012年に大阪市中央区にホームページ制作会社として誕生しました。主な業務内容としましてホームページ制作・スマートフォンサイト制作・成果報酬型SEOサービス・保守管理サービスなどを軸に業務を行っております。また、名刺デザイン・チラシデザイン・LINEスタンプの作成・その他様々な案件も承ります。どんな些細な事でも構いません。大阪・神戸・京都にてホームページの事でお悩みがございましたらお気軽にご相談下さいませ。
TEL : 06-6626-9511平日10:00~19:00
FAX : 06-6226-9512

CONTENT

株式会社GreenHill TEL : 06-6626-9511
〒550-0014 大阪市西区北堀江1丁目6-5 大輪ビル6階B号
© 大阪のホームページ制作会社 GreenHill