10/11　背景画像の設定＆Photoshop

CSS

背景画像

必要な設定

●background-color（背景色）

●background-image（画像の配置）
background-image: url(画像の住所)=images/画像名

●background-repeat（画像の繰り返し）
background-repeat: repeat; /* 画像の繰り返し */
background-repeat: no-repeat; /* 画像の繰り返さない */
background-repeat: repeat-x; /* X軸方向に画像の繰り返し */
background-repeat: repeat-y; /* Y軸方向に画像の繰り返し */

●background-position（画像の表示する左上からの距離）

body背景

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>body背景</title>
<style type="text/css" media="screen,print">
<!--
* {
	margin; 0;
	padding: 0;
}

body {
	background-color: #fff;
	background-image: url(images/01.png) ;
	background-repeat: repeat;
}
-->
</style>
</head>
<body>


</body>
</html>

header背景

  • 画像はトリミング出来るので若干大きめでも良いが、なるべくぴったりのサイズで作る。
  • #header_innerなど指定をして文字を重ねる事が出来る。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>header背景</title>
<style type="text/css" media="screen,print">
<!--
* {
	margin: 0;
	padding: 0;
}

#header {
	width: 800px;
	height: 200px;
	margin: 50px 0 0 50px;
	background-color: #fff;
	background-image: url(images/02.jpg);
	background-repeat: no-repeat;
	background-position: -50px -100px; /* 背景画像の位置 */
	border: 1px solid #CCC;
	
}

#header_inner {
	text-align: right; /* テキストを右寄せ */
	padding: 20px;
}

#h1 {
	font-size: 2em;
	font-family:
     Verdana,
     Helevetica,
     sans-serif;
}

#header p {
   font-size: 1em;
   margin: 1px 0 0 0; /* h1からpまでの空き */
}

-->
</style>
</head>
<body>
<div id="header">
<div id="header_inner">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>
</div>
</body>
</html>

リスト・ビュレッドを背景で設定

  • li要素の背景画像として指定する。
  • img srcで設定すると文字の中心が揃わない。
  • 文字にpaddingを指定してマークビュレットを入れるスペースをあける。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>リスト・ビュレッドを背景で設定</title>
<style type="text/css" media="screen,print">
<!--
* {
	margin; 0;
	padding: 0;
}

#nav {	
	width: 250px;
	height: auto;
	margin: 50px 0 0 50px;
	background-color: #fff;
}

#nav ul {
	list-style-type: none;
}

#nav li {
	font-size: 1.2em;
	lign-height: 1.0;
	margin: 0 0 16px 0;
	padding: 4px 0 4px 25px;

	background-color: transparent;
	background-image: url(images/03.png);
	background-repeat: no-repeat;
	background-position: 0 4px;
}

#nav li a {
	color: #000000;
	text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>	
</div>	
</body>
</html>

navの背景画像を設定

  • 背景画像は１つで、「background-position」で見える部分を変化させる。
  • この画像は−４０pxで下の画像が表示される様に作られている。
  • line-heightは文字、画像に関係なくボタン画像の高さを指定する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>navの背景画像を設定</title>
<style type="text/css" media="screen,print">
<!--
* {
	margin; 0;
	padding: 0;
}

body {
	background-color: #fff;
}

#nav {	
	width: 250px;
	height: auto;
	margin: 50px 0 0 50px;
}

#nav ul {
	list-style-type: none;
	border-top: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}

#nav li a {
	color: #000000;
	font-size: 0.875em;
	line-height: 30px; /* ボタン画像の高さ */
	padding-left: 1.5em;
	display: block;
	background-image: url(images/02.png);
	background-repeat: no-repeat;
	border-bottom: 1px solid #aaaaaa;
	text-decoration: none;
}

#nav li a:hover {
	background-position: 0 -40px;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>	
</div>	
</body>
</html>

単純画像置換

  • 現在では、JavaScriptに置き換えられている。
  • em（リストの中での軽い強調）の使い方が重要。
  • emは場合によってはつける。サイズは１〜９em必要、カラーも白にはしない。
  • em は「visibility: hidden」で見えない様に出来る。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ネットショップ</title>
<style type="text/css" media="screen,print">
<!--
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #6699CC;
	background-image: url(images/back5.gif);
	background-repeat: repeat-y;
}

#container {
	width: 800px;
	background-color: #fff;
}

#header {
	background-color: #fff;
	background-image: url(images/header_ns.gif);
	background-repeat: no-repeat;
	width: auto;
	height: 120px;
	border-bottom: 6px groove #006699;
}

#header h1 {
	height: 95px;
}

#header h1 img {
	padding: 40px 0 17px 25px;
}

#nav {	
	overflow: auto;
}

#nav li {
	font-size: 9px;
	float: left;
	list-style-type: none;
}

#nav li a {
	width: 130px;
	height: 25px;
	text-decoration: none;
	display: block;
}

#nav li#btn1 a {
	background-color: #fff;
	background-image: url(images/nsButton01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn1 a:hover,#nav#btn a:active {
	background-color: #fff;
	background-image: url(images/nsButton01_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn2 a {
	background-color: #fff;
	background-image: url(images/nsButton02.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn2 a:hover,#nav#btn a:active {
	background-color: #fff;
	background-image: url(images/nsButton02_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn3 a {
	background-color: #fff;
	background-image: url(images/nsButton03.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn3 a:hover,#nav#btn a:active {
	background-color: #fff;
	background-image: url(images/nsButton03_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn4 a {
	background-color: #fff;
	background-image: url(images/nsButton04.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn4 a:hover,#nav#btn a:active {
	background-color: #fff;
	background-image: url(images/nsButton04_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn5 a {
	background-color: #fff;
	background-image: url(images/nsButton05.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li#btn5 a:hover,#nav#btn a:active {
	background-color: #fff;
	background-image: url(images/nsButton05_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#nav li em {
	visibility: hidden;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo5.gif" alt="Netshop.com" width="342" height="38" /></h1>
<div id="nav">
<ul>
<li id="btn1"><a href="#"><em>CD.DVD</em></a></li>
<li id="btn2"><a href="#"><em>日用雑貨</em></a></li>
<li id="btn3"><a href="#"><em>エレクトロニックパーツ</em></a></li>
<li id="btn4"><a href="#"><em>インテリア</em></a></li>
<li id="btn5"><a href="#"><em>ファッション</em></a></li>
</ul>
</div>
</div>
</div>	
</body>
</html>

本日は背景画像の設定の最初からてんてこ舞いで、授業中に全然仕上がらずあせりまくってしまった・・・・
家で一から落ち着いて理解しながら復習。
画像を中々読み込まなかったのは、単に数字を全角で打っていたりと本当に単純なミスばかりで情けない！！
先生のお話もうろ覚えで、後で他の方のブログを参考にさせて頂きます。

jimdoでも課題サイトを作るのかと勘違いしてしまいせっせと作ったけど、ソースの表示に向かないとの事なので、お気に入りサイト用にするなど、別の事に使用した方が良いとの事です。
オリジナルの課題サイトを早く完成させなければ・・・・・