親方.info
もっと楽しく!
インターネットショッピング!
便利なページを創りましょう!
CONTENTS
◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう!
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター
 
楽天フリマ
古本・ブランド・PC等300万商品を激安ショッピング!
サーチ:
Keyword:
Amazon.co.jpアソシエイト

 
簡単ホームページ作成講座

※用語解説のリンクにつきましては、「 IT用語辞典 e-Words (株式会社インセプト)」 様の許可を得てリンクしています。 下記の検索窓もご利用ください。
 
IT用語検索
 |INDEX|3|

文字の見た目を変えてみよう
 
 この章では、文字の色や大きさ太さを簡単に変えるタグを紹介します。現在は文字の見た目の変更は、 CSS(Cascading Style sheet:カスケーディングスタイルシート) で定義されています。詳しくは後ほど CSS の説明で解説します。

 早速サイズの変更からやってみましょう。
Sample
<HTML>
<HEAD>
<TITLE>文字の大きさ</TITLE>
</HEAD>
<BODY>
<H1>見出しに使うタグ</H1>
<H2>見出しに使うタグ</H2>
<H3>見出しに使うタグ</H3>
<H4>見出しに使うタグ</H4>
<H5>見出しに使うタグ</H5>
<H6>見出しに使うタグ</H6>
<FONT SIZE=1>サイズで指定</FONT><BR>
<FONT SIZE=2>サイズで指定</FONT><BR>
<FONT SIZE=3>サイズで指定</FONT><BR>
<FONT SIZE=4>サイズで指定</FONT><BR>
<FONT SIZE=5>サイズで指定</FONT><BR>
<FONT SIZE=6>サイズで指定</FONT><BR>
<FONT SIZE=7>サイズで指定</FONT><BR>
</BODY>
</HTML>
6.html
 <H>タグと、<FONT SIZE>タグを見てみました。
 <H>タグは数字が小さい方が大きい文字で、自動で改行され、太字になります。見出しに使われるタグです。
 <FONT SIZE>タグは、逆に数字が大きくなるほど大きい文字になります。改行はされません。通常何も指定しないと、<FONT SIZE=3>の大きさになります。最大は7です。
 <BASEFONT SIZE>を定めて下記のようなサイズ指定も可能です。ベースになるサイズに対して「+」「-」(プラス・マイナス)で指定します。
Sample
<HTML>
<HEAD>
<TITLE>ベースを決める</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=4>
ベースは4だよ<BR>
<FONT SIZE=-3>4-3=1だね</FONT><BR>
<FONT SIZE=-2>4-2=2だね</FONT><BR>
<FONT SIZE=-1>4-1=3だね</FONT><BR>
<FONT SIZE=+1>4+1=5だね</FONT><BR>
<FONT SIZE=+2>4+2=6だね</FONT><BR>
<FONT SIZE=+3>4+3=7だね</FONT><BR>
</BODY>
</HTML>
7.html
 文字のサイズを変えるのはこんなタグ達です。
 
 Webページを作るうえで、特殊文字というものがあります。例えば、 < > 半角の括弧等ですが、HTMLファイルをテキストエディタでそのまま書いてしまうと、ブラウザは当然?タグだと思ってしまいます。当然ページには何も表示されない(ブラウザは無効なタグとして処理してしまいます)ということになります。でも、それでは困りますね。さまざまなページを作っていくにあたって、半角の括弧が使えないという事になっていしまいます。このページをみている方は、実際ページに表示されている半角括弧を見ているのですから、当然表示方法がある事は分かっていると思います。次に特殊文字の一覧を表示します。ソースの書き方はアスキーコード(以下 ASCII)と、キーワード(以下 Key)の2種類があります。
文字 ASCII Key 文字 ASCII Key
< - &lt; > - &gt;
& - &amp; " - &quot;
¡ &#161; - ¢ &#162; -
£ &#163; - ¤ &#164; -
¥ &#165; - ¦ &#166; -
§ &#167; - ¨ &#168; -
© &#169; &copy; ª &#170; -
« &#171; - ¬ &#172; -
­ &#173; - ® &#174; &reg;
¯ &#175; - ° &#176; -
± &#177; - ² &#178; -
³ &#179; - ´ &#180; -
µ &#181; - &#182; -
· &#183; - ¸ &#184; -
¹ &#185; - º &#186; -
» &#187; - ¼ &#188; -
½ &#189; - ¾ &#190; -
¿ &#191; - À &#192; &Agrave;
Á &#193; &Aacute; Â &#194; &Acirc;
à &#195; - Ä &#196; &Auml;
Å &#197; &Aring; Æ &#198; &AElig;
Ç &#199; &Ccedil; È &#200; &Egrave;
É &#201; &Eacute; Ê &#202; &Ecirc;
Ë &#203; &Euml; Ì &#204; &Igrave;
Í &#205; &Iacute; Î &#206; &Icirc;
Ï &#207; &Iuml; Ð &#208; &ETH;
Ñ &#209; &Ntilde; Ò &#210; &Ograve;
Ó &#211; &Oacute; Ô &#212; &Ocirc;
Õ &#213; &Otilde; Ö &#214; &Ouml;
× &#215; - Ø &#216; &Oalash;
Ù &#217; &Ugrave; Ú &#218; &Uacute;
Û &#219; &Ucirc; Ü &#220; &Uuml;
Ý &#221; &Yacute; Þ &#222; -
ß &#223; &szlig; à &#224; &agrave;
á &#225; &aacute; â &#226; &acirc;
ã &#227; &atilde; ä &#228; &auml;
å &#229; &aring; æ &#230; &aelig;
ç &#231; &ccedil; è &#232; &egrave;
é &#233; &eacute; ê &#234; &ecirc;
ë &#235; &euml; ì &#236; &igrave;
í &#237; &iacute; î &#238; &icirc;
ï &#239; &iuml; ð &#240; &eth;
ñ &#241; &ntilde; ò &#242; &ograve;
ó &#243; &oacute; ô &#244; &ocirc;
õ &#245; &otilde; ö &#246; &ouml;
÷ &#247; - ø &#248; &oslash;
ù &#249; &ugrave; ú &#250; &uacute;
û &#251; &ucirc; ü &#252; &uuml;
ý &#253; &yacute; þ &#254; &thorn;
ÿ &#255; &yuml;      
 次は書体を変えてみましょう。
 
<B> 太文字 (Bold)
<I> 斜体 (Italic)
<S> 抹消 (Strike through)
<TT> 等幅 (Tele Type)
<U> 下線 (Underline)
<EM> 強調 (Emphasis)
<STRONG> より強い強調 (Stronger)
Sample
<HTML>
<HEAD>
<TITLE>書体の変更</TITLE>
</HEAD>
<BODY>
<P>
<B>太字です</B>
</P>
<P>
<I>斜体はアイだよ</I>
</P>
<P>
<S>取り消し線</S>
</P>
<P>
<TT>等幅に並びます</TT>
</P>
<P>
<U>アンダーラインを引きます</U>
</P>
<P>
<EM>強調します。でもただの斜体?</EM>
</P>
<P>
<STRONG>より強く!より太く!</STRONG>
</P>
</BODY>
</HTML>
8.html
 如何でしたか?これだけでも結構見た目が変わりますよね?こんなタグもあります。
Sample
<HTML>
<HEAD>
<TITLE>書体を変える…2</TITLE>
</HEAD>
<BODY>
<P>
普通の文字に対して<SUP>上付になる。</SUP> <br>
逆にこちらは<SUB>下付になります。</SUB><br>
</P>
<P>
簡単に<BIG>大きくしたり</BIG><SMALL>小さくしたり</SMALL>もできます。
</P>
</BODY>
</HTML>
9.html
 書体を指定することもできます。書体と言うのは、Windows ですと MS明朝とか、Mac だと Osaka とか、フォント名とも言いますね。普段あまり気にしないかも知れませんが、結構見た目は変わります。が…機種によって表示が左右されるので注意してください。
Sample
<HTML>
<HEAD>
<TITLE>フォントを指定する</TITLE>
</HEAD>
<BODY>
<P>
通常、Windows用とMac用、対で指定します。<BR>
代表的なセットを紹介します。
</P>
<P>
<FONT FACE="MS Pゴシック, Osaka">
ゴシック系
</FONT>
</P>
<P>
<FONT FACE="MS ゴシック, Osaka−等幅">
ゴシック系等幅
</FONT>
</P>
<P>
<FONT FACE="MS P明朝, 細明朝体">
明朝系
</FONT>
</P>
<P>
<FONT FACE="Arial,Helvetica,sans-serif">
ABC abc
</FONT>
</P>
<P>
<FONT FACE="Times New Roman,Times,serif">
ABC abc
</FONT></P>
<P>
<FONT FACE="Courier New,Courier,mono">
ABC abc
</FONT>
</P>
<P><FONT FACE="Geongia,Times New Roman,Times,serif">
ABC abc
</FONT>
</P>
<P>
<FONT FACE="Geneva,Arial,Helvetica,sans-serif">
ABC abc
</FONT>
</P>
</BODY>
</HTML>
10.html
Sample
 <BASEFONT>タグを使えば一発でページ全部に適用できます。
<HTML>
<HEAD>
<TITLE>フォントを指定する</TITLE>
</HEAD>
<BODY>
<BASEFONT FACE="MS ゴシック, Osaka−等幅">
最初に基本のフォントを決めてしまえば、
ページ全部に適用できます。
</BODY>
</HTML>
11.html

INDEX|3|

Copyright(c)2004 oyakat All rights reserved