戻る

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);
	text-indent:-9999px;
}

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

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

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へのリンクテキスト ここまで */

インデントは、字下げとも呼ばれています。日本語の文章作法の場合、行のはじめを1文字下げます。

この方法は、テキストが画像となっているデザインの場合もXHTML文書ではテキストで入力できることと、またアクセシビリティの観点からも有効だったため、一時期利用されていました。しかし、ブラウザでは画像非表示の設定にすると、テキスト背景も表示されないためにどんな内容かわからなくなってしまします。加えて、数多く利用すると検索エンジンがスパムと判断する恐れがありました。そのため現在は、画像が非表示でもあまり支障のない場合などに、このテクニックを使っています

inserted by FC2 system