株式会社アテンド0paddingやborderを付けた時の要素幅指定についてpaddingとかborderって意外と厄介ですよね。横幅500pxのボックスを用意します。#000;を付けるとこうなります。500pxのボックスが欲しいのに、paddingやらborderやらをつけるとどんどん大きくなってしまいます・・・なので全部の値を足し引きして横幅を決めなければなりません・・・この場合であれば「width:390px;」にしなければなりませんね。このまま余白が変わらなければいいですが、調整が入ったり、レイアウトを変更しようとした時にとても面倒です。いうものだ・・・と受け入れればいいのかもしれませんが、数値が13pxとか細かい値が来ると厄介です。borderも1pxとか2pxをよく使うので、指定する数値もキリが悪く、計算が大変です。指定できる値はこちらです。幅を要素の幅と高さに含めるどゆこと?と思うので簡単に説明すると、「box-sizing:border-box;」と指定してあげれば、横幅500pxで指定した中にpaddingもborderも含んで計算しますよ。paddingとborderの幅を加味して横幅を指定する必要はありません!メンテナンスがとっても簡単になりますね。先ほどの例にbox-sizing:border-box;を付け加えるとこうなります。おお!!なにやら良さそうな感じです!!煩わしかった計算が減り、直感的に考えられるようになりました。できているコンテンツに付け加える事によって、思わぬ調整箇所が出てきてしまうので、注意してください。box-sizing:border-box;を使う事で、ボックスの幅全体を考えやすくなりました。その反面、文字や写真を入れられる幅は今まで以上にわかりにくくなってしまいます。何が起こるかというと、写真の横幅を何pxにしたら綺麗に収まるのか?とか12pxの文字が何文字まで収まるのか?といった配置するコンテンツ量は今までと同じように計算して出さなければなりません。Webなので文字は折り返されるもの。いう認識は広くありますが、一行に収める文字をしっかりと決めたいレイアウトの場合は大変ですね。この辺りはエディトリアルデザインを長くしている方には抵抗があるかもしれません。ページ全体的な見栄えや、更新作業を考慮するととても便利な「box-sizing」・・・でも優れた点ばかりではありませんね。長所もあれば短所もあります。便利に使える場面もあれば不便に思う事もあるものです。利用する場面に合わせて使うようにしましょう。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。