|
|||
| || トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
|
reference
 リファレンスの見方
  スタイルシートの書き方
ヘッダ情報
ページ全体
見出し
文字（テキスト）
リスト
テーブル
画像・イメージ
リンク
レイアウト
フォーム
フレーム
リファレンス一覧
|
文字（テキスト）
このリファレンスの見方については「リファレンスの見方」をお読みください。
文字の色を変えてみよう文字の色を赤く変えてみましょう。
りんごが真っ赤に熟しています。
【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」を使いましたが、自分でわかりやすいクラス名を付けてもいいです。
ホームページで表示される文字の大きさは、ブラウザや解像度（画面が表示できる大きさ）によって違います。 自分のパソコンではちょうどいい大きさなのに、他の人のパソコンでは字が小さすぎて読みにくくなることがあります。 この場合、 できるだけ、文字の大きさは固定値を使わず、 文字の大きさと色を変える文字の属性は同時に変更することができます。
以下の文字属性についても同じです。
りんごが真っ赤に熟しています。
【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>
【スタイルシートヘッダ、外部ファイル】
.left { <p class="left">りんごが</p> <p class="center">真っ赤に</p> <p class="right">熟しました。</p> 書いたままのレイアウトで表示するりんごが真っ赤に 熟しました。 とても おいしそうです。
【HTMLタグ】
<pre> りんごが真っ赤に 熟しました。 とても おいしそうです。 < /pre> コメント
ホームページを作っている時、ソースの中にメモができれば便利だなって思うことってありませんか？
HTMLのタグ中にコメントを書いて、それを画面に表示しないようにできる機能があります。
りんごが真っ赤に熟しました。とてもおいしそうです。
【HTMLタグ】
<!-- りんごの説明 --> りんごが真っ赤に熟しました。とてもおいしそうです。 <!-- と --> の間に書いたものは画面に表示されません。
特殊文字
特殊文字は、OSやブラウザの種類・バージョン等の環境により表示できないものがあるので注意してください。
ここにはよく使うものをあげておきます。
|