含んだものになります。実際の幅は250px使うシチュエーションは色々あるかと思いますが、おすすめするのは画像(imgタグ)に書いておくというもの何故かと言うとレスポンシブの際に横幅100%にすることが多いリンクするしないでボーダーの有無を変える事があるボーダーを付けても幅が変わらないのでマウスオーバー(hover)時のみボーダーを付けることができるという事です。それぞれ説明していきます。*実際の例ではわかりやすくコンテンツの幅をグレー、ボーダーの幅を10pxにしています。使用する画像のオリジナルサイズは300*200です。レスポンシブの際に画像横幅100%をした場合レスポンシブの場合、画像幅100%を書いておくことが多いです。auto;こう書くことでコンテンツからはみ出すのを防ぎます。なりますので結局はみ出します。その際、box-sizing:border-boxを書くことでそれを防ぐことができます。通常にボーダーbox-sizing:border-box100%指定でもちゃんとコンテンツに収まるようになりました。リンクするしないでボーダーの有無を変えるリンクが貼られた画像のみボーダーを付けると通常であればリンクのある画像だけサイズがボーダー分大きくなります。border-boxを書くことで表示サイズを同じに出来きます。border-boxリンクマウスオーバー(hover)時のみボーダーを付けるこれはPC向けですが、box-sizing:border-boxを使えばマウスオーバー時のみボーダーを付けるという動作でも表示幅は変わらないためレイアウト崩れを防ぐことができます。可変のため画像の幅は変わってしまいますが、よくある1pxのボーダーとかだとほぼわからないと思います。}通常リンクホバーにボーダーbox-sizing:border-boxリンクホバーホバー時に高さがすこし変わるよう。詰めるレイアウトとかはやめといたほうがいいかも。レイアウトする場合は高さを固定にすれば対応できます。PCで下記のようなレイアウトをするときに使えますね。書いておくと良い!とうことですかね。HTML,CSSコメント(0)おもしろかった・役に立った▼ブログランキング参加中!クリック!▼おすすめ関連の記事wordpress:ダウンロードしたテーマは絶対カスタマイズしちゃダメ!カスタマイズは子テーマを使え!wordpress:マルチサイト化する手順wordpress:マルチサイトで複数の子サイトの記事をまとめて親サイトに日付順表示させるwelcart:数量入力inputボックスをtextからnumberにするwelcart:カートのサムネイルサイズを変更するwordpress:メンテナンスモードを固定ページを使って作成。Form:セレクトに「選択してください」を追加する。確認画面や送信メールの調整も。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。