§４　文字・段落の装飾

【１】改行・特殊文字　　【２】装飾場所の設定　　【３】スタイルの書き方　　 【４】文字のスタイル　　【５】段落のスタイル　　【関連資料】

【１】改行・特殊文字
　　　HTML　では　改行や半角スペース、<　 > などは　特別な書き方をする

　　　改行　主な方法は２つ
　　　　１）<br>　タグを使う
　　　　　　　例　　ようこそ〇〇のページへ<br>
　　　　　　　　　　今日の気分はとてもハッピーです。<br>
　　　　２）<p>　タグを使う　　　　<p>　と　</p> 　で囲む。
　　　　　　　例　　<p>ようこそ〇〇のページへ</p>
　　　　　　　　　　<p>今日の気分はとてもハッピーです。</p>
　　　　　　　　　　この方法を使うと、行間隔を自由に設定できる（但し、やや高度）
　　　特殊文字(<　や　>)
　　　　　　　<　→　&lt;　　　　　>　→　&gt; 　　　　　半角スペース　→　&nbsp;　　　　　"　→　&quot;
　　　　　　　その他　　HTML特殊文字コード表秀麗さんのページ

　　　　
【２】装飾場所の設定
　　　文字の色や大きさ・フォントを変えたり、配置（センタリングや左寄せなど）を設定することができる。
　　　設定するには、その範囲（文字や段落）をしてしなければならない。先ず、その設定法を見る。
　　段落（ブロック）の範囲指定
　　　<div>～</div> 段落（ブロック）の範囲指定
　　　　＜標準的書き方＞　<div　class = "A1" >　文　</div>
　　　　　　class = "A1"　というのは　、ここの文に「A1」という名前をつけたということ。後でこの名前を使って装飾する
　　　　　例　<div　class = "A1" >　ようこそ〇〇のページへ　</div>
　　　文字列の範囲指定
　　　<span>～</span> 文字の範囲指定
　　　　＜標準的書き方＞　<span　class = "B1" >　文　</span>
　　　　　　class = "B1"　というのは　、ここの文字列に「B1」という名前をつけたということ。後でこの名前を使って装飾する
　　　　　例　<div　class = "A1" >　ようこそ<span　class = "B1" >〇〇</span>のページへ　</div>
【３】スタイルの書き方

　　スタイルを書く場所
　　　装飾（スタイル：スタイルシート）を書く方法（場所）は３つある。
　　　１）タグ（<div>や<span>の中）に書く方法。　簡単。多くの設定は書きにくい。見にくい。
　　　　　例　<div　class = "A1"　style = "font-size:12px; color:green;">ようこそ〇〇のページへ　</div>
　　　２）ヘッダー内（<head>　～　</head>）に書く。
　　　　　例 　　　　　　<head>
　　　　　　　　・ 　　　　　　　　<style>
　　　　　　　　　　div.A1 {font-size:12px; color:green;}
　　　　　　　　</style>
　　　　　　</head>
　　　　　　場所を表すのに　div.A1と書く（ divタグで　classで　「A1」　と名前をつけたところ）
　　　　　　スタイルは{ }で括る。
　　　３）別ファイルに書く。（書き方は上と同じ。）
　　　　　　別ファイルに書いておくと、多くのページで共通のスタイルを適応させることができる。
　　　　　　本格的なページ作成はこの方法で行う。

　　スタイルの書き方
　　　　　スタイルの属性（プロパティ） : 属性の値　;
　　　　　　　という、書き方をする。
　　　　　プロパティは、以下で見ていく。
【４】文字のスタイル

　　フォントの大きさ【font-size】
　　　（値）数値　px（ピクセル）1px　点の大きさ　大きさは固定される
　　　　　　　　　em（エム）　　元々の文字の高さを基準とした値。
　　　　　　　％　　　　　　　　元々の要素に対する比率
　　　（例）　div.A1 {font-size:1.2em;}
ようこそ〇〇のページへ　

　　文字の太さ【font-weight】
　　　（値）　　100、200、300、400、500、600、700、800、900　で指定　（あまり変わらない）
　　　　　　　　normal(標準）/bold（太く)で指定
　　　（例）　div.A1 {font-weight:bold;}
ようこそ〇〇のページへ　

　　斜体文字【font-style】
　　　（値）　　normal(標準）/italic(イタリック)/oblique(斜体)で指定 できないこともある
　　　（例）　div.A1 {font-style:italic;}
ようこそ〇〇のページへ　

　　フォントの指定【font-family】
　　　（値）　　sans-serif(ゴシック)/serif(明朝) それ以外に特定のフォントを指定できる ""　で囲む
　　　（例）　div.A1 {font-family:serif;}　　　または　div.A1 {font-family:"MSゴシック";}
ようこそ〇〇のページへ　

　　文字色の設定【color】
　　　（値）基本色　　　　　　　　 　　　　
black silver gray white maroon red purple fuchsia
green lime olive yellow navy blue teal aqua
　　　　色のコード　カラーサイト.com
　　　（例）　div.A1 {color:green;}
ようこそ〇〇のページへ　

　　背景色の設定【background-color】
　　　（値）　　上の　color　と同じ
　　　（例）　div.A1 {background-color:yellow;}
ようこそ〇〇のページへ　

　　下線等の設定【text-decoration】
　　　（値）　none (設定すべて解除）/underline（下線）/overline（上線）/line-through(取り消し線)
　　　　　　　solid実線）/double（二重線）/dotted（点線）/dashed（破線）/wavy（波線）
　　　　　　　色も指定できる
　　　（例）　div.A1 {text-decoration:underline dotted red;}
ようこそ〇〇のページへ　

　　下付き、上付き文字【vertical-align】
　　　（値）super(上付き文字）/sub(下付き文字)
　　　（例）span.B1 {font-siz:10px; vertical-align:super;}
ようこそ〇〇のページへ　

【５】段落のスタイル

　　横方向位置【text-align】
　　　（値）left(左）/right(右）/center(中央）/justify（均等)
　　　（例）　div.A1 {text-align:center;}
ようこそ〇〇のページへ　

　　行の高さ（行間）【line-height】
　　　（値）数値px　，数値のみ（フォントサイズの何倍か）
　　　（例）　div.A1 {line-height:1.2;}
ようこそ〇〇のページへ　

　　幅（高さ）の指定【width(height)】
　　　（値）数値px
　　　（例）　div.A1 {width:100px;}
ようこそ〇〇のページへ　

　　線で囲む【border】
　　　（値）none(なし)/solid(1本線)/double(2本線)/groove(立体的1)/ridge(立体的2)/inset(立体的3)/outset(立体的4)/dashed(破線)/dotted(点線)
　　　　　　太さ　px　で指定可能、色も指定可能　また　border-radius:　を追加すると　角丸の線が引ける。
　　　（例）　div.A1 {width:100px; border: groove 2px red; 　border-radius:15px;}
ようこそ〇〇のページへ　

【関連資料】
　【HTML＆CSS　マニュアルサンプル】
　　　　HTMLクイックリファレンス　　　　TAG index　　　 MDNWeb　Docs　チュートリアル