第3回HTML講座（Ⅲ)は、コロナ感染防止のため、予定していた日立市施設の「会瀬青少年の家が使えず、止む無くZoomミーティングによるオンライン講座で、8月19日（木）の9:00～12:00、11名の参加で、開催しました。今回はテキスト本のPart2の「スタイルシートを使ったテキストのデザイン」です。本講座の講師は安田出世話人が担当しました。
講座の内容梗概は下記のとおりです。
Pａｒｔ2 スタイルシートを使ったテキストデザイン
Lesson-1 スタイルシートの基本を覚えよう
-
◆スタイルシートの特徴。メリット１…HTML文書のサイズを大幅に縮小できること。メリット２…スタイルシートでHTML文書の要
素をデザインしておけば1枚のスタイルシートで複数のHTML文書を管理できる。メリット３…緻密なデザインを実現できる。メ
リット４…スタイルシートを使用することで、印刷用・携帯用・PDA用などプラットホーム別のページを作り分ける必要がなく、
1枚のHTML文書を使いまわすことができる。メリット４…非推奨のHTMLタグを使わなくてすむ。廃止することが決定している
HTMLタグと属性を使わず、Webページをデザインすることができる。
◆スタイルシートでは、「セレクタ」と呼ばれるスタイルを適用する対象に、スタイルの種類を表す「プロパティ」を指定し、その「
値」を記述することで定義している。すなわち、「セレクタ{ プロパティ：値;}」の形になる。例… h2{ color: red; }となる。また、
1つのセレクタに対して複数のプロパティを適用させることもできる。適用させるには「;」の後に続けて「プロパティ：値;を指定
する。
◆スタイルシートをHTML文書に適用させるには3つの方法（埋め込み式、インライン方式、外部リンク）がある。
◆「埋め込み式」は、head要素内に<style>タグを記述し、その中にスタイルシートを記述する方法である。<style>タグには「
text/css」を属性値としたtype属性を指定する。
◆「インライン方式」は、body要素の中にある個別のタグに対して、直接スタイルシートを適応させる方法である。また、
HTML文書の中にスタイルシートが記述されていることをブラウザに知らせるため、head要素の中に属性を持った<meta>タ
グを記述する。
◆「外部リンク」は、HTMLファイルとは別にスタイルシートのファイルを用意し、HTMLファイルからスタイルシートのファイルへ
リンクする方法。head要素内に<link>タグを記述して、スタイルシートファイルを読み込み、HTMLファイル全体に適応させ
る。
◆スタイルシートファイルでも、HTML文書と同じ文字コードを記述する必要がある。例、@charset "UTF-8" Lesson-2 テキストのスタイルをマスターしよう（１）
-
◆スタイルシートでフォントサイズを指定するには、 font-sizeプロパティを使用する。値には相対単位（em、ex、px）、絶対単
位（pt、ｐc、in、cm、mm）、%、キーワードでサイズを指定する方法もある。 例、h1{ font-size: 20px; }
◆フォントの色の指定は、colorプロパティを使用する。値には16進数（Red、Green、Blueを00～FFで表示する）を使う表記方
法やカラーキーワード（red、yellowなど）を指定する方法もある。 例、ｈ１｛ color: #666699; }
◆フォントの書体をの指定は、font-familyプロパティ（値としてメイリオ、MSPゴシック、Ａｒｉａｌなど）を使用する。
例、 h1 { font-family: "Times New Roman"; }、 h4 ｛ font-family: Osaka,"MSPゴシック",sans-serif; }
◆フォントを太字や斜体などメリハリをつけるには、太字はfont-weightプロパティ（値としてbold、normal）、斜体にするには
font-styleプロパティ（値としてitalic）、取り消し線や下線を加えるにはtext-decorationプロパティ（値としてunderline、
line-through）を使用する。
Lesson-3 テキストのスタイルをマスターしよう（２）
-
◆text-alignプロパティを使うと、p要素やh1要素などブロック要素内のテキストを左揃え（left）、右揃え（right）、中央揃え
（center）、均等配置（justify）を指定することができる。また、テキストの横幅はwidthプロパティで指定する。
例、 p { text-align: center; }、 p { width: 250px; }
◆line-heightプロパティを使って、行の高さを指定することができる。ほとんどのブラウザでは行の高さはnormalに設定されて
いる。行の高さは倍率で指定するのがベスト。 例、 p { line-height: 1.5; }
◆text-indentプロパティでブロックレベル要素に含まれるテキストの1行目のインデントを指定できるインデントとは段落の最
初の1文字分あける字下げを意味する。 例、 p { text-indent: 1em; } （emとは高さを基準とした相対単位）
◆HTML文書は親要素、子要素、孫要素の関係ができているが、これがスタイルシートの継承に影響がある。スタイルシートで
指定可能なプロパティの中には、親要素に設定した値が、そのまま子要素に引き継がれることがある。これを「継承」と呼ぶ Lesson-4 テキストの周囲をデザインしよう
-
◆コンテンツ（contents）の周りに空白のpadding、さらにその周りにborder（枠線）があり、さらにその周りに空白のmarginがあ
り、ボックスを形成している。ボックスとwidthの関係を間違わないように。
◆コンテンツを表示する領域の背景に色や画像を加えることができる。背景色の指定はbackground-colorプロパティを使用
する。背景色の値の指定は「テキストの色」と同じ。なお、ウインドウの表示領域すべてに色を付けるにはbody要素に
background-colorプロパティを指定すればよい。
◆ブロックレベル要素の内側で、コンテンツのとの間に余白を作るにはpaddingプロパティを使う。余白を設定する数値には、
pxやemなどの単位つき数値や割合（ボックスの横幅を100%とした割合） が一般的に使われる。
四方が同じ40pxの場合、p { padding :40px; }、上下左右の余白の指定は、p { padding: 60px 20px; }
上、左右、下の余白の指定、p { padding: 60px 20px 30px; }、
上右下左それぞれ余白の指定、p { padding: 60px 20px 30px 40px; }
◆文字の周囲にボーダー（枠線）を引くには、border-styleプロパティを使う。値にはnone、solid、doubleなどある。ボーダー
の幅を指定するにはborder-widthプロパティを、色を指定するには、border-colorプロパティを使用する。
◆ボックスの周りにマージンを入れるには、marginプロパティを使う、表示方法はpaddingと同様である。margin-top、margin-
right、margin-bottom、margin-leftを使って、個別指定も可能。 例、p { margin-left: 30em; }
世話人・文責：安田 出
3回HTML講座（Ⅲ）の参加者