widthが700pxの要素に対して、ブラウザの幅いっぱいに太いborderをかけることは理論上できますか？backgroundは使わずborderで表現したいのですがきれいな書き方では不可能でしょうか...？いいアイデアがあればご意見いただきたいです
width700pxはいったん外して、100%にすればいい。
要素の外にwrapper作ってそれをwidth: 100%
そうではなく、borderを使いたいのです...
wrapperを使えばよいのは知っています
box-sizing:border-boxで多分なんとかなる
↑の人の言うとおりだと思うよ。wrapperもいらないし。border設けたい要素にwidth:700px;box-sizing:border-box;border:2px solid #000;padding:20px;とかで良いんじゃないでしょうか。
単に興味本位なんですけど、なんでborder使いたいんですか？
<div style="width: 700px; height: 700px; background: #000;"><div style="border: 10px solid #ccc; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; box-sizing: border-box;"></div></div>-中にdiv要素を作りたくないのなら擬似要素等で対応して下さい
ブラウザの画面幅をJSで取得し、画面幅 - 700px /2でボーダーの幅が出るのでそれを指定すればいける。はず。
こんなのとか。-<html><head><style>* {box-sizing: border-box;}html {padding:0; margin:0; border:10px solid #ff0000;}body {height:100%; padding:0; margin:0; border:0;}.wrapper {background-color:#aaa; width:700px; height:100%; margin:0 auto;}.box {background-color:#ccc; width: 100%; height: 300px;}@media (max-width:700px) {.wrapper {background-color:#404040; color:#fff; width:100%;}}</style></head><body><div class="wrapper"><h1>WRAPPER 700px</h1><div class="box"><h2>箱</h2></div></div></body></html>
トピ主が素人かどうか知らないが、概ねの素人は答えをいきなり聞きたがる傾向にあるから、そもそもそこにいたるまでの思考が間違っている場合が多い。今回の場合は、そもそもborder幅で解決することが最良なのかどうかということ。何かの課題なのならまだ話が分かるんだけどね。。やってやれないことはないけど、そんな特殊な仕様はどこかで必ずツケがまわる。と、沢山の人が思っていると代弁しておくよ。/****css*******************/div{ box-sizing: content-box; width: 700px; border-style: solid; border-color: #000; border-width: 0 calc((100vw - 700px) /2);}
モジラのツールが便利そうだったので、よければどうぞ。thimble.mozillafactory.org/p/tf/edit
珍しく素晴らしい回答を見た。感服します。
みんなの回答 6 件
width700pxはいったん外して、100%にすればいい。
単に興味本位なんですけど、なんでborder使いたいんですか？
<div style="width: 700px; height: 700px; background: #000;">
<div style="border: 10px solid #ccc; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; box-sizing: border-box;"></div>
</div>
-
中にdiv要素を作りたくないのなら擬似要素等で対応して下さい
ブラウザの画面幅をJSで取得し、
画面幅 - 700px /2でボーダーの幅が出るのでそれを指定
すればいける。はず。
こんなのとか。
-
<html>
<head>
<style>
* {box-sizing: border-box;}
html {padding:0; margin:0; border:10px solid #ff0000;}
body {height:100%; padding:0; margin:0; border:0;}
.wrapper {background-color:#aaa; width:700px; height:100%; margin:0 auto;}
.box {background-color:#ccc; width: 100%; height: 300px;}
@media (max-width:700px) {
.wrapper {background-color:#404040; color:#fff; width:100%;}
}
</style>
</head>
<body>
<div class="wrapper">
<h1>WRAPPER 700px</h1>
<div class="box">
<h2>箱</h2>
</div>
</div>
</body>
</html>
トピ主が素人かどうか知らないが、概ねの素人は答えをいきなり聞きたがる傾向にあるから、そもそもそこにいたるまでの思考が間違っている場合が多い。
今回の場合は、そもそもborder幅で解決することが最良なのかどうかということ。何かの課題なのならまだ話が分かるんだけどね。。
やってやれないことはないけど、そんな特殊な仕様はどこかで必ずツケがまわる。と、沢山の人が思っていると代弁しておくよ。
/****
css
*******************/
div{
box-sizing: content-box;
width: 700px;
border-style: solid;
border-color: #000;
border-width: 0 calc((100vw - 700px) /2);
}
関連するトピックス