サイト製作 - 7 / html

html CSS

サイト製作 - 6のつづき


前回まではこんなかたち↓



なんか味気ないサイトになってきましたが、ここで思い切って画像を使用してみる。サイトを公開するにあたって、画像は何を表示しても良いのかというと、それはNG。著作権にふれるものや、人物であれば肖像権にかかわるものもあるから。


ネットで探すなら、著作権フリーの画像のもの。または素材集などの本を購入してそれを使用する。でも、注意すれば自分の撮影した画像だって十分に使える。飼ってるペットの写真でホームページを作成したり、料理の画像を使ったサイトもできる。


画像の加工はペイントやOfficeのソフトにあるPicture Managerでも簡単なことは可能。サイズや明るさやトリミングなどで対応できる。


以前撮影したDesneyのモノレール内から見えたシンデレラ城の画像を使ってみる。



これを「index.html」と「style.css」の同階層に「img」フォルダを作成して、ここにこれから画像を入れておくスペースとして使用する。

「img」フォルダの中↓



ここでCSSでの指定のやり方。

プロパティ名 指定内容 例
background-image 画像をパスで指定して背景として表示 background-image: url(img/bak.jpg);
background-repeat 背景の繰り返し表示を指定 background-repeat: repeat-x;(xが横軸yが縦軸)



CSSの記述は下記。
bodyタグでの指定をすることで、サイト全体の背景として指定できる。もちろんdivのidがwrapの中だけ、背景画像を表示するという指定もできる。

body {
	background-image: url(img/bak.jpg);	/*bak.jpgのパスを指定して画像表示*/
	background-repeat: repeat;		/*画像の繰り返し表示*/
}

#wrap {
	margin: 10px auto;
	padding: 10px;
	width: 700px;
	border: 2px solid black;
}
#header {
	margin: 0 auto;
	width: 600px;
	height: 150px;
	background-color: blue;
}
#header h1,h2 {
	font-weight: normal;
	font-size: 20px;
	color: white;
	text-align: center;
}

#menu {
	float: right;
	width: 200px;
}

#menu ul li {
	list-style-type: none;
}

.contents {
	float: left;
	width: 400px;
}

#footer {
	clear: both;
}

#footer ul li {
	display: inline;
	margin-left: 15px;

}




これだとちょっと気持ち悪いので、

body {
	background-image: url(img/bak.jpg);	/*bak.jpgのパスを指定して画像表示*/
	background-repeat: repeat;		/*画像の繰り返し表示*/
}

#wrap {
	margin: 10px auto;
	padding: 10px;
	width: 700px;
	border: 2px solid black;
	background-color: #FFF;		/*wrapの背景を白にして文字をはっきり*/
}
#header {
	margin: 0 auto;
	width: 600px;
	height: 150px;
	background-color: blue;
}
#header h1,h2 {
	font-weight: normal;
	font-size: 20px;
	color: white;
	text-align: center;
}

#menu {
	float: right;
	width: 200px;
}

#menu ul li {
	list-style-type: none;
}

.contents {
	float: left;
	width: 400px;
}

#footer {
	clear: both;
}

#footer ul li {
	display: inline;
	margin-left: 15px;

}




画像入れてもあんまりさえないですなぁ。笑
まぁこれからということで。


ちなみにCSSで背景として画像を表示させるのではなく、htmlファイルに直接画像のタグを書き込んで表示させることもできる。

タグ名 例
img ＜img src="img/bak.jpg" alt=""＞

文章のスペースに画像を挿入すると、divのクラスがcontentsの中に記述する。

<div class="contents">
	<p>サイトコンテンツの文章</p>
	<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも・・・・</p>
	<p><img src="img/bak.jpg" alt=""></p>
</div>




「alt=""」に文字を入れると、画像がブラウザで表示されなかった際にその文字が表示される。たとえ指定しなくても今回のようにalt内を空にしてソース上は記述する方が良い。


つづく