2年 ago
1549 Views

ブラウザの表示領域いっぱいにボーダーを配置するCSS

css

ブラウザウィンドウにボーダーをつけたサイトをたまに見かけますよね。数は多くないですが、意外にこのボーダーサイトは記憶に残ってます。

border

楽天内では商品を比較されるので、何店舗も行き来するユーザーさんが多いと思います。その中で記憶に残すことは重要で、多くの商品を比較されればされるほど、インパクトに残っていたモノ勝ちみたいな所があります。他店舗にはないウィンドウ固定ボーダーで記憶に残る店舗づくりしてみませんか?

ブラウザの表示領域いっぱいにボーダーを配置する方法ver1

CSS

html:before,html:after,body:before,body:after{
    content:"";
    background:#000;
    position:fixed;
    display:block;
    z-index:5;
}
 
html:before{
    height:10px;
    left:0;
    right:0;
    top:0;
}
html:after{
    width:10px;
    top:0;
    right:0;
    bottom:0;
}
body:before{
    height:10px;
    right:0;
    bottom:0;
    left:0;
}
body:after{
    width:10px;
    top:0;
    bottom:0;
    left:0;
}

ブラウザの表示領域いっぱいにボーダーを配置する方法ver2

html

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

CSS

#top, #bottom, #left, #right {
	background: #a5ebff;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 15px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 15px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }
@media 

/* Fairly small screens including iphones */
only screen and (max-width: 500px),

/* iPads */
only screen and (min-device-width: 768px) and (max-device-width: 1024px) 

{
	#top, #bottom, #left, #right { display: none; }
}

ブラウザの表示領域いっぱいにボーダーを配置する方法ver3

html

html:before, html:after, body:before, body:after {
    content: "";
    position: fixed;
    background: #a5ebff;

    /* etc. */
}

CSS

body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;  
}
Article Tags:
·
Article Categories:
html&CSS · ボーダー
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ