ホームページ作成とHTML、スタイルシート tag:www.homepagesakusei.biz,2008://2 2006-06-11T11:58:34Z ホームページの作成方法を解説！ホームページ作成とHTMLのブログ版 Movable Type 3.2-ja-2 画像を好きな位置に表示する tag:www.homepagesakusei.biz,2006://2.79 2006-05-10T10:24:41Z 2006-05-10T10:43:01Z プロパティ:position: top: left: right: bottom... hiroto プロパティ:position: top: left: right: bottom:
値:左から absolute 値 値 値 値

スタイルシートで画像を好きな位置に表示するには、まずpositionプロパティを使います。

positionプロパティにabsolute属性をつけると、「位置を絶対的に指定する」という意味になります。

その後でtopプロパティなどを使って位置を指定します。

この方法は画像ではなく、テキストやテーブルなどにも使えます。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>画像を好きな位置に表示する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="cat.gif" style="position:absolute; top:0; left:0">
<img src="cat.gif" style="position:absolute; bottom:0; right:0">
<h3>画像が左上と右下に表示されています。ただしこの方法を使うと何があろうと絶対に指定した位置に表示されるので、訪問者のブラウザによってはレイアウトがむちゃくちゃに崩れます。なので私はおすすめしません。</h3>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 枠線をつける tag:www.homepagesakusei.biz,2006://2.80 2006-05-10T10:44:16Z 2006-05-31T09:40:44Z プロパティ:border: 値:幅 形状 色 スタイルシートで枠線をつけるには、... hiroto プロパティ:border:
値:幅 形状 色

スタイルシートで枠線をつけるには、borderプロパティを使います。

形状というのは線の種類のことですが、普通の線はsolidです。

ここでは画像に対して枠線をつけていますが、段落(ボックス)など他のものにもつけることができます。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>枠線をつける</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="cat.gif" style="border:10pt solid blue">
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 段落の背景色を指定する tag:www.homepagesakusei.biz,2006://2.81 2006-05-31T09:23:26Z 2006-05-31T09:32:15Z プロパティ:background-color: 値:カラー名、RGB値など スタ... hiroto プロパティ:background-color:
値:カラー名、RGB値など

スタイルシートで段落の背景色を指定するにはbackground-colorプロパティを使います。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>段落の背景色を指定する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<p style="background-color:red">
段落の背景色が赤になっています。
</p>
<br><br>
<p style="background-color:#541790">
段落の背景色が#541790になっています。
</p>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 段落の背景画像を指定する tag:www.homepagesakusei.biz,2006://2.82 2006-05-31T09:32:52Z 2006-05-31T09:38:00Z プロパティ:background-image: 値:url(ここに画像のアドレス... hiroto プロパティ:background-image:
値:url(ここに画像のアドレス)

ソース例(太字が学んだ内容です)

<html>
<head>
<title>段落の背景色を指定する</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<p style="background-image:url(cat.gif)">
背景画像が表示されています。
<br><br>
猫ちゃんです。
</p>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 縦書きにする tag:www.homepagesakusei.biz,2006://2.83 2006-05-31T09:40:54Z 2006-05-31T09:45:03Z プロパティ:writing-mode: 値:tb-rl 像に対して枠線をつけてい... hiroto プロパティ:writing-mode:
値:tb-rl

像に対して枠線をつけていますが、段落(ボックス)など他のものにもつけることができます。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>枠線をつける</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<p style="writing-mode:tb-rl">
縦書きになっています。
<br><br>
あいうえお
<br><br>
かきくけこ
<br><br>
さしすせそ
</p>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 半透明フィルタ tag:www.homepagesakusei.biz,2006://2.84 2006-05-31T09:44:54Z 2006-05-31T10:16:34Z プロパティ:filter: フィルタ名:alpha 属性値:(opacity=0... hiroto プロパティ:filter:
フィルタ名:alpha
属性値:(opacity=0～100)

スタイルシートでフィルタを使うには

filter:フィルタ名(属性値)のように書きます。

またフィルタはspanタグやdivタグなどに直接指定する場合は必ずwidth属性かheight属性をつけて大きさを指定する、もしくはposition:absolute;というのを指定しておく必要があります。詳しくはソース例を見てください。

今回の半透明フィルタはフィルタ名がalpha、属性値がopacityで0が透明、100が不透明です。

属性値がたくさんあるフィルタの場合は属性の間を,(カンマ)で区切ります。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>半透明フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<span style="width:100pt; filter:alpha(opacity=50)">
文字が半透明になっているのが分かりますか？
</span>
<br><br>
<span style="position:absolute; color:blue; filter:alpha(opacity=50)">
position:absoluteでもＯＫです。同時に色も指定しています。
</span>
<br><br>
<img src="cat.gif" style="width:90; height:80; filter:alpha(opacity=50)">
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> ぼかしフィルタ tag:www.homepagesakusei.biz,2006://2.85 2006-05-31T10:02:21Z 2006-05-31T10:08:31Z フィルタ名:blur 属性値:(direction=0から順に45度きざみ　なく... hiroto フィルタ名:blur
属性値:(direction=0から順に45度きざみ　なくても可)

direction属性をつけるとぼかす方向を指定できます。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>ぼかしフィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<span style="width:100pt; filter:blur()">
ぼかしがかかっています
</span>
<br><br>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> ドロップシャドウフィルタ(シャープな影) tag:www.homepagesakusei.biz,2006://2.86 2006-05-31T10:07:29Z 2006-05-31T10:19:54Z フィルタ名:dropshadow 属性値:(color=影の色　offX=横方向... hiroto フィルタ名:dropshadow
属性値:(color=影の色　offX=横方向のずれ具合　offY=縦方向)

今回のドロップシャドウフィルタや後から出てくる発光フィルタなどを使うときは、影などによって余分に場所が必要になるのでpadding-bottom:などを使ってその分の場所を確保しておく必要があります。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>ドロップシャドウフィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<span style="padding-bottom:3pt; width:200pt; filter:dropshadow(color=red,offX=3pt,offY=3pt)">
影がついています
</span>
<br><br>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> シャドウフィルタ(やわらかい影) tag:www.homepagesakusei.biz,2006://2.87 2006-05-31T10:17:50Z 2006-05-31T10:22:08Z フィルタ名:shadow 属性値:(color=影の色　offX=横方向のずれ具... hiroto フィルタ名:shadow
属性値:(color=影の色　offX=横方向のずれ具合　offY=縦方向)

ソース例(太字が学んだ内容です)

<html>
<head>
<title>シャドウフィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<span style="padding-bottom:3pt; width:200pt; filter:shadow(color=blue,offX=3pt,offY=3pt)">
青色のやわらかい影がついています
</span>
<br><br>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 左右、上下反転フィルタ tag:www.homepagesakusei.biz,2006://2.88 2006-05-31T10:20:34Z 2006-05-31T10:25:49Z フィルタ名:flipH　左右反転 フィルタ名:flipV　上下反転 属性値:特に... hiroto フィルタ名:flipH　左右反転
フィルタ名:flipV　上下反転
属性値:特になし

ソース例(太字が学んだ内容です)

<html>
<head>
<title>左右、上下フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<span style="width:200pt; filter:flipH()">
左右が反転しています。
</span>
<br><br>
<span style="width:200pt; filter:flipV()">
上下が反転しています。
</span>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 発光フィルタ tag:www.homepagesakusei.biz,2006://2.89 2006-05-31T10:24:29Z 2006-05-31T10:30:16Z フィルタ名:glow 属性値:(color=色,strength=光の強さ) ソ... hiroto フィルタ名:glow
属性値:(color=色,strength=光の強さ)

ソース例(太字が学んだ内容です)

<html>
<head>
<title>発光フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div style="background-color:black">
<span style="width:200pt; filter:glow(color=yellow,strength=10)">
発光しています
</span>
</div>
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 白黒フィルタ tag:www.homepagesakusei.biz,2006://2.90 2006-05-31T10:33:47Z 2006-05-31T10:40:37Z フィルタ名:gray 属性値:特になし 下で使っているトマトの画像は素材屋いたま... hiroto フィルタ名:gray
属性値:特になし

下で使っているトマトの画像は素材屋いたま様からゲットしました。

ソース例(太字が学んだ内容です)

<html>
<head>
<title>白黒フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="tomato.gif">
<br><br>
<img src="tomato.gif" style="width:229; height:205; filter:gray()">
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> 色反転フィルタ tag:www.homepagesakusei.biz,2006://2.91 2006-05-31T10:38:48Z 2006-05-31T10:42:59Z フィルタ名:invert 属性値:特になし ソース例(太字が学んだ内容です) &... hiroto フィルタ名:invert
属性値:特になし

ソース例(太字が学んだ内容です)

<html>
<head>
<title>色反転フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="tomato.gif">
<br><br>
<img src="tomato.gif" style="width:229; height:205; filter:invert()">
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> X線効果フィルタ tag:www.homepagesakusei.biz,2006://2.92 2006-05-31T10:41:26Z 2006-05-31T10:44:46Z フィルタ名:xray 属性値:特になし ソース例(太字が学んだ内容です) &lt... hiroto フィルタ名:xray
属性値:特になし

ソース例(太字が学んだ内容です)

<html>
<head>
<title>X線効果フィルタ</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<img src="tomato.gif">
<br><br>
<img src="tomato.gif" style="width:229; height:205; filter:xray()">
<br><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>

表示はこちら]]> はじめに tag:www.homepagesakusei.biz,2006://2.1 1911-06-29T01:33:23Z 2006-06-11T11:58:34Z ホームページ作成とHTML、スタイルシートにご訪問ありがとうございます。 このサ... hiroto ホームページ作成とHTML、スタイルシートにご訪問ありがとうございます。
このサイトではこれからホームページを作成しようとしている人に、
作成方法を基本から、 HTML、スタイルシートまで解説します。
このページがあなたのお役に立てれば幸いです。
Webサイト版ホームページ作成とHTMLもよろしくお願いします。
↑やばいくらいの情報量ですよ。

合計 カウント 人目の訪問者　　昨日は カウント 人　　Since 2006/04/23

あなたの探している情報はどれかな？

ホームページ作成準備講座
ホームページを作ったことがない人はここから！

HTML書き方講座
HTMLでホームページを作成しよう！

スタイルシート書き方講座
綺麗で美しいホームページを作るためにスタイルシート！



]]>