HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
    1. 段落を作る
    2. 改行する
    3. 見出しの設定
    4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
    5. 箇条書き
    6. 表を配置する
    7. 画像を配置する
    8. リンクを設定する
    9. 特殊文字を表示する
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

基礎的なタグをマスターしよう

文字スタイルの変更

文章の一部を太字にしたり斜体にしたりするなど，スタイルを変更するには，変更したい範囲を <span> タグで囲います．<span> は単に範囲を指定するだけのタグで，これで囲っただけでは何も起こりません．<span> タグに様々な属性を追加することで，太字にしたり，斜体にしたりできるようになります．

太字にする

例えば太字にしたければ，<span style="font-weight:bold;"> のように記述します．このとき，コロン（:）とセミコロン（;）の使い方に注意をしてください．font-weight を bold に変更するという意味です．セミコロンはなくても構いませんが，複数のスタイルを指定するときの区切りを意味する文字になるので，毎回つけるようにしておくと良いでしょう． 

index.html（抜粋）
<p>
  本文中の<span style="font-weight:bold;">重要箇所</span>を太字にする．
</p>

ブラウザでの表示結果

本文中の重要箇所を太字にする．

斜体にする

斜体にするには，<span style="font-style:italic;"> を使います．ただし，全角文字は環境によってはイタリックにならない可能性があります． 

index.html（抜粋）
<p>
  本文中の<span style="font-style:italic;">重要箇所 (important matters)</span> をイタリックにする．
</p>

ブラウザでの表示結果

本文中の重要箇所 (important matters) をイタリックにする．

文字サイズを変更する

文字サイズを変更するには，標準サイズを 100% とした比率を指定するか，ピクセル (px：標準は 16px) で指定します． 

index.html（抜粋）
<p>
  本文中の<span style="font-size:150%;">重要箇所</span>のフォントサイズを変更する．
</p>
<p>
  本文中の<span style="font-size:30px;">重要箇所</span>のフォントサイズを変更する．
</p>
<p>
  本文中の<span style="font-size:70%;">重要箇所</span>のフォントサイズを変更する．
</p>

ブラウザでの表示結果

本文中の重要箇所のフォントサイズを変更する．

本文中の重要箇所のフォントサイズを変更する．

本文中の重要箇所のフォントサイズを変更する．

文字の色を変える

色を変更するには，「red」「blue」などのようにキーワードで色を指定する方法と，「#FF0000」のように16進数で RGB カラーで指定する方法，「rgb(0, 0, 255)」のように10進数で RGB カラーを指定する方法などがあります．さらに「rgba(0, 0, 255, 1)」「rgba(0, 0, 255, 0.5)」 のように透明度を指定する方法も利用できます．詳細はこのあたりを参考にすると良いでしょう． 

index.html（抜粋）
<p>
  本文中の<span style="color:red;">重要箇所</span>の色を変更する．
</p>
<p>
  本文中の<span style="color:#FF0000;">重要箇所</span>の色を変更する．
</p>
<p>
  本文中の<span style="color:rgb(0, 0, 255);">重要箇所</span>の色を変更する．
</p>

ブラウザでの表示結果

本文中の重要箇所の色を変更する．

本文中の重要箇所の色を変更する．

本文中の重要箇所の色を変更する．

フォントを変える

HTML文書中に <span style="font-family:'ＭＳ 明朝';">フォントの変更</span> のように記述すれば表示するフォントを指定することができますが，このようなフォントの指定はおすすめできません．その理由は，MS 明朝 というフォントは Windows には標準搭載されていますが，その他の OS (macOS, iOS, Android) では搭載されていないからです．つまり，Windows では表示できても，その他の OS では思ったとおりの表示にならないことになります．したがって，デザイン上の理由で文字のフォントを変更したいのであれば，Google Fonts などの Web フォントを利用すると良いでしょう．

複数のスタイルを同時に指定する

フォントサイズと色を同時に指定したいような場合，スタイルをセミコロンで区切って指定するだけです．

index.html（抜粋）
<p>
  本文中の<span style="font-size:200%;color:#0000FF;">重要箇所</span>のサイズと色を変更する．
</p>

ブラウザでの表示結果

本文中の重要箇所のサイズと色を変更する．

« 戻る 次へ »