ホームページ作成とHTML、スタイルシート http://www.homepagesakusei.biz/ ホームページの作成方法を解説！ホームページ作成とHTMLのブログ版 ja Copyright 2008 Tue, 22 Apr 3000 14:19:31 +0900 http://www.sixapart.com/movabletype/?v=3.2-ja-2 http://blogs.law.harvard.edu/tech/rss 画像を好きな位置に表示する プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_72.html http://www.homepagesakusei.biz/2006/05/post_72.html スタイルシート書き方講座 Wed, 10 May 2006 19:24:41 +0900 枠線をつける プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_73.html http://www.homepagesakusei.biz/2006/05/post_73.html スタイルシート書き方講座 Wed, 10 May 2006 19:44:16 +0900 段落の背景色を指定する プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_74.html http://www.homepagesakusei.biz/2006/05/post_74.html スタイルシート書き方講座 Wed, 31 May 2006 18:23:26 +0900 段落の背景画像を指定する プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_75.html http://www.homepagesakusei.biz/2006/05/post_75.html スタイルシート書き方講座 Wed, 31 May 2006 18:32:52 +0900 縦書きにする プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_76.html http://www.homepagesakusei.biz/2006/05/post_76.html スタイルシート書き方講座 Wed, 31 May 2006 18:40:54 +0900 半透明フィルタ プロパティ: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_77.html http://www.homepagesakusei.biz/2006/05/post_77.html スタイルシート書き方講座 Wed, 31 May 2006 18:44:54 +0900 ぼかしフィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_78.html http://www.homepagesakusei.biz/2006/05/post_78.html スタイルシート書き方講座 Wed, 31 May 2006 19:02:21 +0900 ドロップシャドウフィルタ(シャープな影) フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_79.html http://www.homepagesakusei.biz/2006/05/post_79.html スタイルシート書き方講座 Wed, 31 May 2006 19:07:29 +0900 シャドウフィルタ(やわらかい影) フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_80.html http://www.homepagesakusei.biz/2006/05/post_80.html スタイルシート書き方講座 Wed, 31 May 2006 19:17:50 +0900 左右、上下反転フィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_81.html http://www.homepagesakusei.biz/2006/05/post_81.html スタイルシート書き方講座 Wed, 31 May 2006 19:20:34 +0900 発光フィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_82.html http://www.homepagesakusei.biz/2006/05/post_82.html スタイルシート書き方講座 Wed, 31 May 2006 19:24:29 +0900 白黒フィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_83.html http://www.homepagesakusei.biz/2006/05/post_83.html スタイルシート書き方講座 Wed, 31 May 2006 19:33:47 +0900 色反転フィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/post_84.html http://www.homepagesakusei.biz/2006/05/post_84.html スタイルシート書き方講座 Wed, 31 May 2006 19:38:48 +0900 X線効果フィルタ フィルタ名: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>

表示はこちら]]> http://www.homepagesakusei.biz/2006/05/x.html http://www.homepagesakusei.biz/2006/05/x.html スタイルシート書き方講座 Wed, 31 May 2006 19:41:26 +0900 はじめに ホームページ作成とHTML、スタイルシートにご訪問ありがとうございます。
このサイトではこれからホームページを作成しようとしている人に、
作成方法を基本から、 HTML、スタイルシートまで解説します。
このページがあなたのお役に立てれば幸いです。
Webサイト版ホームページ作成とHTMLもよろしくお願いします。
↑やばいくらいの情報量ですよ。

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

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

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

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

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



]]> http://www.homepagesakusei.biz/3000/04/html_1.html http://www.homepagesakusei.biz/3000/04/html_1.html はじめに Tue, 22 Apr 3000 14:19:31 +0900