超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

色を変える サイズを変える 色とサイズを変える
太文字 アンダーライン 斜体
取消線 書体の変更 改行
改行しない 段落 表示位置
コメント 書いたままに表示する 特殊文字

文字(テキスト)

このリファレンスの見方については「リファレンスの見方」をお読みください。

文字の色を変えてみよう

文字の色を赤く変えてみましょう。
りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<font color="#FF0000">真っ赤に</font>熟しています。
【スタイルシート インライン】
りんごが<span style="color: #FF0000;">真っ赤に</span>熟しています。
.red {
color: #FF0000;
}

りんごが<span class="red">真っ赤に</span>熟しています。
ここではクラス名に「red」を使いましたが、自分でわかりやすいクラス名を付けてもいいです。
その他の色は「216セーフカラーチャート」を参照してください。

文字の大きさを変えてみましょう

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<font size="+2">真っ赤に</font>熟しています。
【スタイルシート インライン】
りんごが<span style="font-size: 150%;">真っ赤に</span>熟しています。
.big {
font-size: 120%;
}
りんごが<span class="big">真っ赤に</span>熟しています。
ここではクラス名に「big」を使いましたが、自分でわかりやすいクラス名を付けてもいいです。

ホームページで表示される文字の大きさは、ブラウザや解像度(画面が表示できる大きさ)によって違います。

自分のパソコンではちょうどいい大きさなのに、他の人のパソコンでは字が小さすぎて読みにくくなることがあります。

この場合、「font-size: 15pt」「font size=5」などのように文字の大きさを固定してしまうと、せっかく作ったページが読みにくくて、見てもらえないこともあります。

できるだけ、文字の大きさは固定値を使わず、「font-size: 120%」「font size=+2」などのように文字の大きさを変更できるようにしておきましょう。

文字の大きさと色を変える

文字の属性は同時に変更することができます。
以下の文字属性についても同じです。
りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<font color="#FF0000" font size="+2">真っ赤に</font>熟しています。
【スタイルシート インライン】
りんごが<span style="color: #FF0000; font-size: 120%">真っ赤に</span>熟しています。
.red {
color: #FF0000;
font-size: 120%;
}

りんごが<span class="red">真っ赤に</span>熟しています。

文字装飾

太文字

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<b>真っ赤に</b>熟しています。
【スタイルシート インライン】
りんごが<span style="font-weight:bold">真っ赤に</span>熟しています。
.bold {
font-weight:bold;
}

りんごが<span class="bold">真っ赤に</span>熟しています。

アンダーライン

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<u>真っ赤に</u>熟しています。
【スタイルシート インライン】
りんごが<span style="text-decoration:underline">真っ赤に</span>熟しています。
.under {
text-decoration:underline;
}

りんごが<span class="under">真っ赤に</span>熟しています。

斜体

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<i>真っ赤に</i>熟しています。
【スタイルシート インライン】
りんごが<span style="font-style:italic">真っ赤に</span>熟しています。
.italic {
font-style:italic;
}

りんごが<span class="italic">真っ赤に</span>熟しています。

取消線

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<s>真っ赤に</s>熟しています。
【スタイルシート インライン】
りんごが<span style="text-decoration:line-through">真っ赤に</span>熟しています。
.line {
text-decoration:line-through;
}

りんごが<span class="line">真っ赤に</span>熟しています。

書体の変更

りんごが真っ赤に熟しています。
【HTMLタグ】
りんごが<font face="HG創英角ゴシックUB">真っ赤に</font>熟しています。
【スタイルシート インライン】
りんごが<span style="font-family:'HG創英角ゴシックUB'">真っ赤に</span>熟しています。
.style {
font-family:'HG創英角ゴシックUB';
}

りんごが<span class="style">真っ赤に</span>熟しています。

改行・段落

改行

りんごが真っ赤に熟しました。
とてもおいしそうです。
【HTMLタグ】
りんごが真っ赤に熟しました。<br>
とてもおいしそうです。

改行しない

りんごが真っ赤に熟しました。とてもおいしそうです。
【HTMLタグ】
りんごが真っ赤に熟しました。<nobr>とても
おいしそうです。</nobr>
無改行は、このように短い文章では使いませんが、 長い文章を書いていて途中で改行されるとおかしくなるような語句や文節につけておくと途中できれることなく読みやすい文章になります。

【例】  <nobr>http://○○○○○○○○○.com/~△△△△△/□□□□□.html</nobr>

段落

りんごが真っ赤に熟しました。

とてもおいしそうです。

【HTMLタグ】
<p>りんごが真っ赤に熟しました。</p>

<p>とてもおいしそうです。</p>

表示位置

横位置を変える

りんごが

真っ赤に

熟しました。

【HTMLタグ】
<p align="left">りんごが</p>
<p align="center">真っ赤に</p>
<p align="right">熟しました。</p>

【スタイルシート インライン】

<p style="text-align=left">りんごが</p>
<p style="text-align=center">真っ赤に</p>
<p style="text-align=right">熟しました。</p>

【スタイルシートヘッダ、外部ファイル】

.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}


<p class="left">りんごが</p>
<p class="center">真っ赤に</p>
<p class="right">熟しました。</p>

書いたままのレイアウトで表示する

りんごが真っ赤に
     熟しました。
      とても    おいしそうです。
【HTMLタグ】
<pre>
りんごが真っ赤に
     熟しました。
      とても    おいしそうです。
< /pre>

コメント

ホームページを作っている時、ソースの中にメモができれば便利だなって思うことってありませんか?
HTMLのタグ中にコメントを書いて、それを画面に表示しないようにできる機能があります。
りんごが真っ赤に熟しました。とてもおいしそうです。
【HTMLタグ】
<!-- りんごの説明 -->
りんごが真っ赤に熟しました。とてもおいしそうです。
<!--  と  -->  の間に書いたものは画面に表示されません。  

特殊文字

特殊文字は、OSやブラウザの種類・バージョン等の環境により表示できないものがあるので注意してください。
ここにはよく使うものをあげておきます。
タグ 表示 意味
&nbsp;   空白
&copy; © 著作権表示
&reg; ® 登録
&#8482; 商標
&pound; £ ポンド
&yen; ¥
&#8364; ユーロ
&#8220; 開始引用符
&#8221; 終了引用符
&#8212; Mダッシュ
&lt; < 小なり
&gt; > 大なり
▲このページのトップに戻るTop