[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ

ホームページを画像で飾る

まず画像を知る
まず画像と一言で言ってもさまざまなフォーマットや圧縮形式があり、ｗｗｗの世界では何が主に使われているのか？このページで 最初から学んでいる方にはこんな疑問が出てくると思います。
画像一つ一つにしても、とても奥が深く私のサイトの容量だけではページ数が入りきれませんので詳しい説明はここでは省略させていただきます。デジカメなどの画像を自分のコンピューターに取り込んだことが有る人は簡単かも知れませんが、分らない方の為にも少しお付き合いください。画像の種類を見分ける方法は簡単で画像ファイルの拡張子・そのものが画像の圧縮形式やフォーマットを表しています。.jpg　.gif　.bmpなどがそうですが他にも数十種類あります。
色々有る中、wwwで画像やバーナーなど主に使われているのが.gifや.jpgです。ご自分の目的に応じて使い分けると良いかも知れません。

画像を張ってみる
とりあえず画像を張ってみます。
　　　　　　　　　　　　　　　　　　　　
とりあえず何でも構いませんので画像を張ってみましょう。

ソース
<img src="画像のURL" border="10">

説明
＜img src＞ 　ImaGe SouRCeの略でソースは出所という意味を持っています。「src」はイメージのエレメントソース属性なので「＝」の後に、必ず属性地として画像の名前もしくはURLを指定しなければなりません。

＜border="10"＞　これは画像の外枠のサイズを指定していて数字はピクセル単位で表記します。

画像サイズの変更
同じ画像のサイズを色々変えてみましょう。


ソース

<img src="画像のURL" border="10" WIDTH="220" HEIGHT="220">

WIDTH・HEIGHTは、見ての通り画像の横幅と縦幅を指定しています。ピクセル以外にも％で表記することもできます。

背景に画像を使う場合
左に固定 左上に固定
<style media="screen" type="text/css"><!--
body { background : #FFFFFF url(画像のURL) repeat-y fixed;}
--></style>

<style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) no-repeat fixed left top }
--></style>
右に固定 右下に固定
<style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) repeat-y fixed right }
--></style>		 <style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) no-repeat fixed right bottom}
--></style>
上に固定 好きな場所に固定

<style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) repeat-x fixed ;}
--></style>

 <style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) no-repeat fixed500px500px }
--></style>
下に固定 右上に固定

<style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) repeat-x fixed bottom }
--></style>

 <style media="screen" type="text/css"><!--
body { background: #FFFFFF url(画像のURL) no-repeat fixed right top }
--></style>
タグの使い方
タグをコピーして、＜head＞ 〜 ＜/head＞ の間に貼り付けます。
●変更箇所
　（画像のURL）　　　　　　背景色　#FFFFFFを好みに合わせて変更してください。
●500px 500px (好きな場所に固定)


Welcome! to Web Window/wwwへ