HTMLコードにおいて、文章を記述するタグには、見出しのh1～h6、段落のP、リスト・箇条書きのUL・OL・LI、表のTH・TD、ハイパーリンクのAタグなどがあります。
ここでは、段落を表すPタグのデザインにフォーカスを当てて話を進めていきたいと思います。
内容はHTML・CSS文書の記述に終始しますが、文章におけるスタイルの摘要について、概要が分かるようになると思います。
コーダーを目指さないまでも、ホームページやブログをご自分の好きなデザインに変更することが可能になりますので、参考にしてみてください。
クラス名を変えながら徐々に文章デザインを構築
ここでは、少しずつデザインを追加・変更すること（当該箇所は赤字）により、1つ1つのプロパティを覚えやすいようにしています。
ここから下は、実際のコードと適用後の文章です。
*************************************
このページで設定されている段落のスタイルです。
HTML
<p>このページで設定されている段落のスタイルです。</p>文字の大きさを14pxにしました。
HTML
<p class="test_p1">文字の大きさを14pxにしました。</p>
CSS
.test_p1 {font-size:14px;}文字を太くしました。
HTML
<p class="test_p2">文字を太くしました。</p>
CSS
.test_p2 {font-size:14px; font-weight:bold;}スタイルをMS明朝（ない場合は明朝で表示）にしました。
HTML
<p class="test_p3">スタイルをMS明朝（ない場合は明朝で表示）にしました。</p>
CSS
.test_p3 {font-family:'MS 明朝',serif; font-size:14px; font-weight:bold;}文字を青くしました。
HTML
<p class="test_p4">文字を青くしました。</p>
CSS
.test_p4 {font-family:'MS 明朝',serif; color:#0000ff; font-size:14px; font-weight:bold;}青い実線のアンダーラインを引きました。
HTML
<p class="test_p5">青い実線のアンダーラインを引きました。</p>
CSS
.test_p5 {font-family:'MS 明朝',serif; color:#0000ff; font-size:14px; font-weight:bold; text-decoration:underline solid #0000ff;}文字を斜体にしました。
HTML
<p class="test_p6">文字を斜体にしました。</p>
CSS
.test_p6 {font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; text-decoration:underline solid #0000ff;}文字間隔を広く（4px）しました。
HTML
<p class="test_p7">文字間隔を広く（4px）しました。</p>
CSS
.test_p7 {font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; text-decoration:underline solid #0000ff;}背景に色をを付けました。
HTML
<p class="test_p8">背景に色をを付けました。</p>
CSS
.test_p8 {font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; text-decoration:underline solid #0000ff; background:#dddddd;}行を高く（40px）しました。
HTML
<p class="test_p9">行を高く（40px）しました。</p>
CSS
.test_p9 {font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-decoration:underline solid #0000ff; background:#dddddd;}ブロック要素に変更しました。
HTML
<p class="test_p10">ブロック要素に変更しました。</p>
CSS
.test_p10 {font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-decoration:underline solid #0000ff; background:#dddddd; display:inline-block;}幅を40%にしました。
HTML
<p class="test_p11">幅を40%にしました。</p>
CSS
.test_p11 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-decoration:underline solid #0000ff; background:#dddddd; display:inline-block;}文字を中央寄せにしました。
HTML
<p class="test_p12">文字を中央寄せにしました。</p>
CSS
.test_p12 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #0000ff; background:#dddddd; display:inline-block;}角を丸めました。
HTML
<p class="test_p13">角を丸めました。</p>
CSS
.test_p13 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #0000ff; background:#dddddd; display:inline-block; border-radius:10px;}背景を画像にしました。
HTML
<p class="test_p14">背景を画像にしました。</p>
CSS
.test_p14 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#0000ff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #0000ff; background:url(https://mz-site.info/wp-content/uploads/23089344_m.jpg); display:inline-block; border-radius:10px;}文字と下線を白くしました。
HTML
<p class="test_p15">文字と下線を白くしました。</p>
CSS
.test_p15 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#ffffff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #ffffff; background:url(https://mz-site.info/wp-content/uploads/23089344_m.jpg); display:inline-block; border-radius:10px;}HTML
<a class="test_p15" href="https://mz-site.info/" title="ウェブサイト制作の小店">Aタグに適用しました。</a>
CSS
.test_p15 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#ffffff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #ffffff; background:url(https://mz-site.info/wp-content/uploads/23089344_m.jpg); display:inline-block; border-radius:10px;}HTML
<a class="test_p16" href="https://mz-site.info/" title="ウェブサイト制作の小店">マウスオーバーを追加しました。</a>
CSS
.test_p16 {width:40%; font-family:'MS 明朝',serif; font-style:italic; color:#ffffff; font-size:14px; font-weight:bold; letter-spacing:4px; line-height:40px; text-align:center; text-decoration:underline solid #ffffff; background:url(https://mz-site.info/wp-content/uploads/23089344_m.jpg); display:inline-block; border-radius:10px;}
.test_p16:hover {color:#ffffff; opacity:0.6;}この記事を読んでくださっている方へのご提案
当サイトでは会員メンバーを募集しております。
メンバーページでは、ウェブサイト作成講座などを無料で受講いただけます。
現在、講座内容の更新が滞っている状況ですが、会員様よりウェブサイトの作成などにつき、ご質問ををお受けしましたら、随時回答をしたいと思います。
現在は無料提供なので、メールのやりとりだけでも、損はないかと思います。
是非ご検討をお願いいたします。
なお講座は、コンテンツがそろい、メンバーも増えてきましたら、本格的に稼働したいと思います。
この記事のまとめ・要約
HTML・CSS文書における文章スタイルの摘要について、概要を実感できると思います。
1つ1つのプロパティ記載内容（赤字）もじっくり見ていただけると、初心者には有益となります。
コメント