HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
    1. 段落を作る
    2. 改行する
    3. 見出しの設定
    4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
    5. 箇条書き
    6. 表を配置する
    7. 画像を配置する
    8. リンクを設定する
    9. 特殊文字を表示する
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

基礎的なタグをマスターしよう

ここでは，基本的なタグの使い方をマスターします．なお以降のサンプルコードは抜粋で表示しているので index.html 等の <body> ... </body> の中に記述するようにしてください．

段落を作る

HTML文書の本文は <body> ... </body> の中に直接記述することが可能ですが，通常は段落ごとに <p> ... </p> で囲います．<p> タグで囲うことで，その内容が本文であるという意味付けが明確になります．それとともに段落後に改行され，段落の行間が広がってスクリーンで本文が読みやすくなります． 

index.html（抜粋）
<p>
  本文は段落 (paragraph) を意味する p タグで囲います．
  改行をしてもブラウザの表示では改行しません．
  本文は段落 (paragraph) を意味する p タグで囲います．
  改行をしてもブラウザの表示では改行しません．
</p>

<p>
  新たな p タグを配置すれば，新たな段落になるので，
  改行されて，行間も若干広がります．
  新たな p タグを配置すれば，新たな段落になるので，
  改行されて，行間も若干広がります．
</p>

ブラウザでの表示結果

本文は段落 (paragraph) を意味する p タグで囲います． 改行をしてもブラウザの表示では改行しません． 本文は段落 (paragraph) を意味する p タグで囲います． 改行をしてもブラウザの表示では改行しません．

新たな p タグを配置すれば，新たな段落になるので， 改行されて，行間も若干広がります． 新たな p タグを配置すれば，新たな段落になるので， 改行されて，行間も若干広がります．

なお，Visual Studio Code では Emmet による省略形が利用できます．例えば p{本文です} と入力して Tab または Enter を押すことで，<p>本文です</p> のように展開されます．

« 戻る 次へ »