HP-目次-
HOME
1day講座
1日で習得！HTML言語
1 2 3 4
1日で習得！スタイルシート
1 2 3
実用的なHTML言語
空白文字
altとtitle属性
meta属性
tableを作ろう
optionを使う
address属性
コメント
hrの横線を
背景の増殖リファレンス
HTML言語
スタイルシートホームページ作成
素材に関して
アクセスカウンター
ソフトに関してふぁるるのホームページ奮闘記
diary、ホームページ奮闘記録
ネットとマナー、ネチケット
私の恥ずかしくて、人に見せられない、ド下手ページの数々orz
ホームページ作成講座。1day講座
1日で習得！HTML言語の講座
ここはホームページを作った事がない方。HTML言語、スタイルシートという言葉を始めて聞いたあなたでも、
1日でHTML言語とスタイルシートを使って、
ホームページが作れるようになります♪
ホームページ、スタイルシートを使って飾ろう♪
ホームページに表示する画像をスタイルシートのpositionを使い表示させる位置を変えます。
positionは画像だけでなく文章の表示位置も変えられるので、
便利ですよ。
まずは、c.htmlを作りましょう♪
c.htmlの内容
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>スタイルシートで画像の位置を自由自在♪</title>
<style type="text/css">
.ggg{position:absolute;top:50px;left:200px;z-index:1;}
.abcdefg{position:absolute;top:65px;left:273px;z-index:2;}
.a1234{position:absolute;top:75px;left:220px;z-index:4;}
.moji{position:absolute;top:79px;left:220px;z-index:3;}
</style>
</head>
<body>
<div class="ggg">
<img src="1.jpg">
</div>
<div class="abcdefg">
<img src="2.jpg">
</div>
<div class="a1234">
<img src="5.jpg">
</div>
<div class="moji">
<h1>ホームページ作成術で、楽して得するHTML講座♪
HTML言語とスタイルシート</h1>
</div>
</body>
</html>
スタイルシートの記述
文字の装飾は#の後に名前を書きましたが、
positionの位置を変える場合は.の後に名前を書きます。
また、文字の装飾にはspanを使いましたが
位置の表示にはdivを使います。
さて、{}の中の説明ですが
{position:absolute;top:50px;left:200px;z-index:1;}
position:の設定、とりあえずabsoluteと書いておいてください。
top:表示する画像のホームページの上からの距離です。
数値を大きくするほど下に表示されます。
left:表示する画像のホームページの左下からの距離です。
数値を大きくするほど右側に表示されます。
z-index:これは複数の画像が重なってしまった場合、
どの画像を上に表示するかです。
数値が大きいものを優先して上に表示します。
これで1日で習得HTML、スタイルシート講座は終わりです。
お疲れ様でした。
今回、記載したものはホームページを作る上での、
最低限のモノと役に立つ知識です。
今回の講座は左側に表示されている。
ＨＰ−目次−の1day講座に当たります。
当サイトは全て、
手打ちのHTML言語、及びスタイルシートで作成されています。
リンク
リンクについて
リンクフリーなのです。banner画像
LINKページ
文字化け解消
管理人
profile
著作権
Copyright(C)2007-2008 ふぁるるAll rights reserved
転載禁止。
サイトの更新履歴
お世話になっている検索エンジンサイト様sponsor by 検索エンジン and ダイエット
作者情報;ふぁるる http://www.faruru.info/
