HTMLの文書の構造を知ることでBlueGriffon(ブルーグリフォン)を使いこなそう

    BlueGriffon(ブルーグリフォン)は使い方さえわかれば、
    HTMLの知識がなくてもホームページの作成は可能です。

    しかし、HTMLの知識があればもっと便利になります。
    今回は、基本的なHTMLの勉強をしていきましょう。

    文書の構造について

    HTMLは基本的に文書の構造を記述することで成り立ちます。

    文書の構造として書籍の場合、次のような構成をよく見かけます。

    bght1

    行について

    文書の基本的な単位は、文字の集まりで構成される行です。

    HTML文書内での改行は、半角1文字分の空白として扱われます。
    また2個以上連続して空白をあける際は1個の空白として表示されます。

    HTMLでは、原則としてウィンドウの幅で自動的に折り返されて表示されます。
    ただ、強制的に改行する場合は、<br>タグを用います。

    例えば、

    2014-01-29_113559

    この文章を強制的に改行しようと思うと、HTMLではこうなります。

    bght4

    改行した部分に<br>タグを入れると、

    bght5

    強制的に改行されます。

    段落について

    ワープロ文書にも段落がありますが、HTML文書では<p>タグを使い明確に指定します。

    次のような文章に段落を付けたい場合は、

    bght6

    bght7

    段落をつけたい範囲を<p>~</p>で囲みます。そうすると、

    bgth8

    このように、<p>と</p>タグで囲まれた範囲の
    段落の前後に空白行が入って表示されます。

    見出しについて

    見出しを指定するタグは<h1>~<h6>です。

    例えば、h1はレベル1の「Heading」つまり見出しを指定します。
    前後は改行されます。

    多くのブラウザでは<h1>の見出しは大きな文字で<h6>は小さな文字で表示されますが、それは絶対的ではなく、ブラウザの解釈の問題です。

    基本的には、レベル1~レベル6までの見出しを指定しているのに過ぎません。
    このレベルは、「章」、「節」、「項目」といったレベルに対応づけて考えることが出来ます。

    例えば、HTML文書でこのように記述すると、

    bght8

    ブラウザでは次のように表示されます。

    bght9

    HTML文書では、このようにタグを使い分けて文書を作成します。
    基本的なところはきちんとマスターしておくと、BlueGriffon(ブルーグリフォン)を使う際に便利です。


      ■当ブログはWordPressテンプレート「ALPHA」を使用しています

      zenback:この記事はお役にたちましたか?

      zenback画像

      コメントを残す