戻る

h2に背景画像を指定する

CSS

ファイル名：hollywood_cafe/4t/style.css

@charset "utf-8";

/* 基本設定　ここから */

body{
	color:#555555;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック", "MS P Gothic",sans-serif;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
	background-color:#999999;
}

a:link{
	color:#55555;
	text-decoration:none;
}
 
a:visited{
	color:#888888;
	text-decoration:none;
}
 
a:hover{
	color:#FF6600;
	text-decoration:none;
}
 
a:active{
	color:#000000;
	text-decoration:none;
}

h1,h2,h3{
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
}

img{
	border:0;
}

hr{
	display:none;
}

h1{
	position:absolute;
	top:-20px;
	left:40px;
}

h2{
	width:700px;
	height:300px;
	background-image:url(images/top/main_image.jpg);
}

/* 基本設定　ここまで */

/* レイアウト設定　ここから */

div#pageBody{
	width:760px;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
	background-color:#FFFFFF;
	background-image:url(images/top/body_bg.jpg);
	background-repeat:repeat-y;
	position:relative;
}

#pageTop{
	background-image:url(images/top/body_bg_t.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	padding-top:70px;
	padding-right:30px;
	padding-bottom:0px;
	padding-left:30px;
}

#contents{
	width:440px;
	padding-right:19px;
	float:left;
	border-right-width:1px;
	border-right-style:dotted;
	border-right-color:#999999;
}

#side{
	width:220px;
	padding-left:20px;
	float:right;
}

/* レイアウト設定　ここまで */

/* PageTopへのリンクテキスト　ここから */

#gotoTop{
	clear:both;
}

/* PageTopへのリンクテキスト　ここまで */

background関連のプロパティを利用して、点線を表示する方法もあります。コンテンツエリアに、右側に点線が入った背景画像を用意し、y方向に繰り返し表示を指定します。

上下左右のボーダーの太さを一括指定する場合は、border-widthプロパティ、上下左右のボーダーの種類を一括指定する場合は、border-styleプロパティ、上下左右のボーダーの色を一括指定する場合は、border-styleプロパティで設定します。

Copyright © 2012 YOHSUKE NAKANO