ホームページ作成基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成HTML基礎講座 EasyStudyHTML TOP

ホームページ作成 HTML基礎講座 divタグ,pタグ

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



div,pタグ:段落文章 携帯リストマーク clear.gif
【解説】
<p>タグは上下に余白が入る為、段落の前後に余白が入ります。
<div>タグで記述した文章は一つの段落として表示されて余白(マージン)無し、前後に余白は入りません。
<div>(1)</div>
<p>(1)</p>

行揃え属性追加
<div align="(2)">(1)</div>
<p align="(2)">(1)</p>
(1)段落文章
(2)位置(left:左揃え、center:中揃え、right:右揃え、justify:均等配置)
段落文章の書体を指定
<div style ="font-family: (1)">・・・</div>
<p style ="font-family: (1)">・・・</p>
<ブロックタグ style ="font-family: (1)">・・・</ブロックタグ>
(1)書体名
段落文章の文字サイズを指定
<div style="font-size: (1)">・・・</div>
<p style="font-size: (1)">・・・</p>
<ブロックタグ style ="font-size: (1)">・・・</ブロックタグ>
(1)文字サイズ
サンプルソ−ス
<div>サンプルDIV</div>
<div>sampleDIV</div>
<hr>
<p>サンプルP</p>
<p>sampleP</p>
<hr>
<div align="center">サンプルalign-center</div>
<div align="right">サンプルalign-right</div>
<hr>
<p align="center">サンプルalign-center</p>
<p align="right">サンプルalign-right</p>
サンプルソ−ス(書体・文字サイズ)
<div style ="font-family: 'MS 明朝','細明朝体' ;font-size: 18pt">DIV書体指定</div>
<p style ="font-family: 'MS 明朝','細明朝体' ;font-size: 18pt">P書体指定</p>
※書体を二つ記述していますが第1候補と第2候補でクライアントが"MS明朝"がない場合は"細明朝体"で表示されます。
サンプルソ−ス(文字サイズ)
<div style ="font-size: 24pt">文字サイズ24pt</div>
<p style ="font-size: 24pt">文字サイズ24pt</p>
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora