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言語とスタイルシートを使って、
ホームページが作れるようになります♪
スタイルシートで文字の装飾
HTML言語についてある程度、理解していただけたと思います。スタイルシートはhead内で記述し。
head内で記述したものがbody内で使うことが出来ます。
メモ帳には、このように書きます。
<!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">
#txt1{font-size:42px;}
#txt6{font-size:11px;}
#b{font-weight:700;}
#htmlgenngo{font-weight:100;}
#red{color:red;}
#aaaaaaaaaa{color:blue;}
#pu{color:green;}
</style>
</head>
<body>
<span id="pu">
<span id="txt1">
font-sizeは文字の大きさに関係しています。<br>
</span>
</span>
<span id="txt6">
文字の大きさはpxなどの単位の大きさによって変わります。<br><br>
</span>
<span id="b">
font-weightは文字の太さに影響します。<br>
</span>
<span id="htmlgenngo">
文字の太さは数値を大きくするほど太くなります。<br>
</span>
<span id="red">
colorで文字の色を変える事が出来ます。
</span>
<span id="aaaaaaaaaa">
colorはred、blueなどの英語入力です。
</span>
</body>
</html>
スタイルシートの文字装飾に関する記述は、
まずhead内に#を書き、その後にtxt1やredなど入力します。
注意ですが
１、<style type="text/css"></style>の中に記述すること。
２、記述に同じモノがない、（例）txt1が２つあったりしないこと。
３、bやhtmlgenngoのように
a〜z、0〜9を使い好きな名前をつけられます。
最初の文字にa〜z以外の頭文字を使うと、動きません。
（txt6のように数字が2文字目以降ならＯＫです。）
文字の後を{}で囲み、中に
{font-size:42px;}
font-size:は文字の大きさに影響し、
pxの値を変えることで文字の大きさが変化します。
pxの他にcmやmmといった単位を使うことも出来ます。
{font-weight:700;}
font-weight:は文字の太さに影響し、
:;の間の数字を変える事で文字の太さが変化します。
{color:red;}
color:は文字の色に影響します。
red、blue、green、purpleなどなど、色々あります。
body内で<span id="名前"></span>の間に、
飾りたい文字を入れれば完了です♪
body内では宣言したモノは使い放題ですよｂ
これで文字の大きさ、太さ、色を操ることが出来ますね。
次はホームページを飾る雛形、
ホームページに画像を表示させてみましょう。
当サイトは全て、
手打ちのHTML言語、及びスタイルシートで作成されています。
リンク
リンクについて
リンクフリーなのです。banner画像
LINKページ
文字化け解消
管理人
profile
著作権
Copyright(C)2007-2008 ふぁるるAll rights reserved
転載禁止。
サイトの更新履歴
お世話になっている検索エンジンサイト様sponsor by 検索エンジン and ダイエット
作者情報;ふぁるる http://www.faruru.info/
