• ・・凡例・・
  • 使用例
  • スタイル
  • ソースコード
  • HPBを使う

スタイルシート?聞き慣れない言葉ですが、御存知ですか?

オフィス(ワードやエクセル)には「スタイル]があり、表題や図などの表示形式(文字フォントやサイズ、フレームを付けるなど)を指定することができます。スタイルは、個別に設定することもできますが、標準スタイルを決めておくと文書の形式が簡単に整います。(段落ごとにフォントやサイズを指定すると大変ですね)

HTML文書でもこのようなスタイルを用いて、表示画面の体裁を整えます。

スタイルの種類

HTML文書では、タグで囲まれた"要素"(例 p要素 <P>テキスト</p>)を記述していきます。この要素にスタイルが設定され、ブラウザはそれを参照しながら、画面に表示していきます。

スタイルには、ブラウザが標準で準備している既定スタイルと文書で指定された文書の独自スタイルがあります。独自スタイルが設定されていない場合には、ブラウザは既定スタイルを利用します。

よく使うスタイル("要素")の種類
スタイル 記述内容の性質・意味
標準段落(<p>) 通常の文章
見出し段落(<h1>から<h6>) 見出し・・・大見出しから小見出し
引用文 他の文献からの引用文

その他に、画像・ハイパーリンク・テーブルなどのスタイルがあります。

ブラウザ既定のスタイルを確認する。

ブラウザの既定スタイルを確認しましょう。

HPBを立ち上げる → HTML文書の新規作成 → 適当な文字(例 ”ブラウザ既定のスタイルです。標準段落”を入力

プレビューで、表示形式を確認してください。

カーソルを文字列に置き、メニューバー「書式」 → 「段落」 → 段落種類 で段落を変え、プレビューで確認してください。

「段落」の種類
「標準」「見出し1」から「見出し6」、「アドレス」、「引用文」、「ベタ書き」の10種類あります。「アドレス」、「ベタ書き」は、通常、使用しません。

既定のスタイルの確認(IE11)

表示

既定のスタイルでは、文字色は黒、サイズの上下のマージンはそれぞれに設定、左マージンは0です。(引用文のみ設定)

これでは困りますね。文字の色・フォントの種類・サイズが固定されますし、その位置は引用文を除いて左よせになります。

既定のスタイルはブラウザで異なる場合があります。使用するブラウザで、表示形式が異なるのも厄介です。

既定のスタイルを変更する その1

既定のスタイルでは、思い通りのスタイルが表現出来ませんので、作成するホームページ独自の共通するスタイルを作成します。

そのメリット

  • ホームページのデザインが標準化出来る(変更も簡単です)
  • ブラウザの差がなくなる(どのようなブラウザでも同一の表示が可能)

標準段落のスタイルを変更する

先ほど作成したページ → 「標準」の文字列にカーソルを置く → メニューバー「表示」 → 「スタイルシートマネジャ」

[追加]をクリック → 以下のように設定

これで、標準段落のスタイルが、文字サイズは「大きい」・「太字」・「下線付き」に変更されました。

表示

  • 上段・・・既定スタイル
  • 下段・・・変更したスタイル

ソースプログラムを確認する

HPBのメニューバー下の「HTMLソース」タブをクリックしてください。ソースプログラムが表示されます。この中の<head>タグと</head>タグの間(head要素と呼びます)を見てください。

ソースプログラム

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
<!--
p{
font-size : x-large;
font-weight : bold;
text-decoration : underline;
}
-->
</style>

</head>
<body>
<p>ブラウザ既定のスタイルです。 標準段落</p>
</body>
</html>

独自スタイルは <style type="text/css"><!-- ・・・・・・ --></style>の中に記述されています。

スタイルの説明

p{  }  標準段落 pタグ へのスタイルの指定を示します。

{、 }の中にスタイルを指定します。

  • font-size : X-large;  フォントサイズを「大きい」
  • font-weight : bold;  太字
  • text-decoration : underline; 文字飾りはアンダーライン(下線)

左側にfont-size、font-weight 等の指定したい”項目名”(プロパティと呼ばれます)、続いて”:”(コロン)、その後に”値”の記述して、”;”(セミコロン)で終わります。

複数のスタイルを記述することができます。1行に記述してもいいですし、途中で行変えしてもOKです。その順番は任意です。このような形式で設定されたスタイルを「カスケードスタイルシート(CSS)」と呼びます。

既定のスタイルを変更する その2

その1で設定したスタイルをもう少し変更してみましょう。

その1のページを表示する → 表示 → スタイルシートマネジャ

ルール情報 pを選択 → [編集]

「フォント」タブ・・・サイズをブランクに変更(展開をクリック)

「色と背景」タブ・・・前景色(文字の色)を青に変更(展開をクリック)

「レイアウト」タブ・・・左方向にマージンを10文字分指定

これで、標準段落は、文字サイズは普通、アンダーライン、太字、青、左マージン10文字分のスタイルに変更されました。

表示