HTML入門トレーニング

段落を使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中で、最も基本的な書式を設定するタグであり、段落を設定するタグでもあるpタグについて学びます。
講師:
06:49

字幕

このレッスンでは HTML の中で 最も基本的な書式を設定するタグである p タグ 段落を設定するタグについて 学びます ほとんどのブラウザーでは 何もマークアップしていない テキストについては 段落として扱われます 現在 コードエディターでサンプルファイルの HTML を開いているところです コードの中身を見てみると body タグの中身に いくつかの見出しが定義されています またこれらの見出しの間には 何もマークアップされていないテキストが いくつか存在します この HTML をブラウザーで プレビューしてみましょう ブラウザーに切り替えました ブラウザーで見ると 何もマークアップされていない箇所は 通常の段落のように表示されています HTML は 非常に寛容に作られている言語です そのため このように 何もマークアップされていない テキストがあったとしても それより後ろにある HTML が 表示されない ということはありません 何もマークアップされていない箇所も ひとまず 通常の段落として レンダリングしておいて マークアップされている箇所は そのマークアップで表示する というようになっています これにより タグを書き忘れた場所についても とりあえず表示をすることはできる といったメリットはあります これには反対の効果もあります 通常の段落として表示されている箇所は まだ何もマークアップをしていない箇所 という風に考えることもできます そのため このように HTML で表示して 通常の段落として表示されている箇所は 正しく段落として マークアップされているかどうか 確認する必要があるでしょう ここではコードエディターに戻って それぞれの箇所を 段落としてマークアップしていきましょう コードエディターに戻り 該当の箇所に p タグ 段落を示す のタグを入力します タグは 開始タグと終了タグで そのコンテンツを囲みます 開始タグと終了タグを 忘れないでください 同じようにページの下まで 全ての段落を マークアップしていきます ここでも p タグを使って 開始タグと終了タグで囲います 同じように p タグでテキストを 囲みます ページの一番下には 3 つの段落があります このように複数の段落がある場合 一つの開始タグと終了タグで 全体をくくるのではなく それぞれの段落ごとに p タグでマークアップしていく必要があります ここでは 3 つの段落がありますので p タグもそれに合わせて 3 つのタグでマークアップを このように設定していきます 段落のマークアップが完了しました ブラウザーでプレビューしてみましょう 再読込みをすると このように 先ほどは行間がなかった場所に 行間が発生しました これは一つ一つの段落を p タグによって別々の段落という風に 設定したためです この時 見出しと段落の間 あるいは 段落と段落の間の この行間 スペースについては HTML で設定することはできません この間の間隔をもっと開けたり 狭めたりするには CSS を用います あるいは こういう風に考える方も いらっしゃるかもしれません エディターに戻り このような処理を書いてみましょう 通常の段落と段落の間に もう一つ段落を設けて 中身に空の要素が入っているようにします この 「 」 という文字列は 少し変わった文字列ですが ここでは 何か空のものが この p タグの中に入っている という風に考えてください 保存しブラウザーに切り替えて リロードをすると このように 一つの空の段落が 段落と段落の間に入ったため スペースが広がりました しかし このようなやり方は 適切ではありません この段落とこの段落の間 この部分の間隔を広げるためには このように HTML で記述するのではなく あくまで CSS で見栄え 視覚表現を 設定してください コードエディターに戻りましょう 先ほど追加した部分を 削除しておきます さて ここまで 段落を設定する p タグを設定する時 開始タグと終了タグで 設定したい箇所を囲む という風に説明してきました しかし 実際には p タグの終了タグは 省略することもできます 例えばこの部分 p タグの終了タグを 3カ所 削除してみます これで保存し ブラウザーをリロードしても 特に問題なく表示されているように見えます これは p タグの終了タグが あくまでオプションとしての扱いで 必ず必要ではない という仕様によるためです しかし 実際のところは HTML を見た時に この p タグがどこで始まり どこで終わっているのか ということを見た目にわかりやすくするために 全ての p 要素には終了タグを 付けておくことを お勧めします 先ほどのように 終了タグを戻しておきましょう こうすることでこの p タグが ここで終わっている ということが 一目見てわかります このように段落を設定したい箇所に p タグを用いることで 段落を設定することができました このレッスンでは HTML の中で 最も基本的な書式を設定するタグである p タグ 段落を設定するタグについて 学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。