神戸学院大学 経営学部 林坂ゼミ

HTML 入門トップページ

« 戻る 次へ »

HTML 入門

スタイルシートでデザインを作ろう

文字のスタイルを調整する

次に，文字のスタイリングについていくつかの例を示します．まず，HTML に次のような内容を準備します．（HTMLのサンプルを見る ／ CSSのサンプルを見る） 

index.html（抜粋）
<h2>第2レベルの見出し</h2>
<h3>第3レベルの見出し</h3>
<h4>第4レベルの見出し</h4>
<h5>第5レベルの見出し</h5>

<p>
  見出しや本文中の文字を<span class="keyword">スタイリング</span>してみましょう．．．
</p>

<p>
  Let's stylize the text in headings and body text...
</p>

ブラウザでの表示結果

第2レベルの見出し

第3レベルの見出し

第4レベルの見出し

第5レベルの見出し

見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．

Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text.

見出しの <h2> 要素はフォントサイズを <length> 値を使って 36px （多くのブラウザでの標準は 16px） に変更し，文字列の配置を左右中央に変更します． 

style.css（抜粋）
h2 {
  font-size: 36px;
  text-align: center;
}

ブラウザでの表示結果

第2レベルの見出し

見出しの <h3> 要素はフォントサイズを 1.5em に変更します．なお em は親要素のフォントサイズに対する相対値であるので，1.5em は親要素の 150% を意味します．その他にも様々な指定方法があるので，font-size で利用できる値の詳細はここで確認して下さい． 

style.css（抜粋）
h3 {
  font-size: 1.5em;
}

ブラウザでの表示結果

第3レベルの見出し

見出しの <h4> 要素は文字を右揃えに変更します．このとき text-align: end; は使用されている言語に応じて終端に揃えられるので，左から右に記述する日本語や英語では右揃えになり，アラビア語などでは左揃えになります．一方で，text-align: right; では言語の種類に関係なく右揃えになります． 

style.css（抜粋）
h4 {
  text-align: end;
  /* text-align: right; */
}

ブラウザでの表示結果

第4レベルの見出し

見出しの <h5> 要素はフォントの太さを normal に変更します． 

style.css（抜粋）
h5 {
  font-weight: normal;
}

ブラウザでの表示結果

第5レベルの見出し

ここで4つの見出しを並べて確認します．（HTMLのサンプルを見る ／ CSSのサンプルを見る） 

style.css（抜粋）
h2 {
  font-size: 36px;
  text-align: center;
}

h3 {
  font-size: 1.5em;
}

h4 {
  text-align: end;
  /* text-align: right; */
}

h5 {
  font-weight: normal;
}

ブラウザでの表示結果

第2レベルの見出し

第3レベルの見出し

第4レベルの見出し

第5レベルの見出し

続いて本文についてもスタイリングの例を示します．まず，本文を準備します． 

index.html（抜粋）
<p>
  見出しや本文中の文字を<span class="keyword">スタイリング</span>してみましょう．．．
</p>

<p>
  Let's stylize the text in headings and body text...
</p>

ブラウザでの表示結果

見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．

Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text.

上の本文には一部に .keyword クラスが設定されているので，このクラスにスタイルを適用します．これにより <span class="keyword"> で囲った範囲が太字になりました． 

style.css（抜粋）
.keyword {
  font-weight: bold;
}

ブラウザでの表示結果

見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．

Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text.

ブラウザの画面幅を変更して，レイアウトがどのように変化するか観察して下さい．特に英語の段落は単語の途中で改行しないために，画面幅によっては右端が揃っておらず美しさに欠けることがあります．これを改善するには，段落要素クラスを追加し，そのクラスに text-align: justify; プロパティを設定すると良いでしょう．下の結果では文字列が両端に揃ってい美しく配置されるでしょう．（HTMLのサンプルを見る ／ CSSのサンプルを見る） 

index.html（抜粋）
<p class="just">
  見出しや本文中の文字を<span class="keyword">スタイリング</span>してみましょう．．．
</p>

<p class="just">
  Let's stylize the text in headings and body text...
</p>

style.css（抜粋）
.just {
  text-align: justify;
}

ブラウザでの表示結果

見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．見出しや本文中の文字をスタイリングしてみましょう．

Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text. Let's stylize the text in headings and body text.

目次に戻る