東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

2.5 見出し、リスト、段落、改行

見出し、リスト、段落、改行

2.5 見出し、リスト、段落、改行

HTMLファイルの作成時によく使う要素について学習します。見出し要素やリスト要素、段落要素などの基本的な要素の記述方法と、それらがブラウザでどのように表示されるかを見ていきましょう。

2.5.1 見出し

WEBページの見出しを作成します。見出しには<h1>~<h6>まで重要度の異なる6つのタグがあります。

まずは、<h1>タグを使ってみましょう。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :header.html

➢ header.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>HTMLの基礎</title>
        </head>
        <body>
            <h1>HTMLの基礎</h1>
        </body>
        </html>
        

「HTMLの基礎」というテキストを、<h1>タグで囲みました。

2. ブラウザで表示を確認

ブラウザでどのように表示されるか、確認しましょう。

図 2.5.1

<h1>~</h1>で囲まれた文章が、見出しです。字が大きく太字で表示されているのがわかります。

◉見出しの種類

見出しを示す要素には、h1~h6までの6種類があります。
「h」に続く数字は、見出しのレベル(重要度)を示しており、h1がもっとも上位の見出し(大見出し)で、h6はもっとも下位の見出し(小見出し)となります。
一般的なブラウザでは、重要度の高い見出しほど大きく表示されます。

2.5.2 リスト

リストはいわゆる箇条書きのことで、よく使用されるタグのひとつです。リストを使って、ナビゲーションメニューの項目をリストアップします。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :list.html

➢ list.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>HTMLの基礎</title>
        </head>
        <body>
            <h1>HTMLの基礎</h1>
            <ul>
                <li>ホーム</li>
                <li>会社案内</li>
                <li>アクセス</li>
                <li>お問い合わせ</li>
            </ul>
        </body>
        </html>
        

リスト形式で表示させたいテキスト全体を囲むように<ul>タグでマークアップし、リストにしたい文字列を<li>タグでマークアップします。<ul>要素、<li>要素を指定したテキストがリスト形式で表示されます。

<ul>タグは箇条書きとしてコンテンツの本文中に使用されるほか、ナビゲーションメニューの項目を列挙するときにもよく使用されます。

<ul>タグの子要素は必ず<li>タグで、テキストやほかのタグが子要素になることはありません。

2.5.3 段落

段落には、<p>タグを使用します。HTMLタグの中でも一番よく使用されるタグです。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :paragraph.html

➢ paragraph.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>HTMLの基礎</title>
        </head>
        <body>
            <h1>HTMLの基礎</h1>
            <ul>
                <li>ホーム</li>
                <li>会社案内</li>
                <li>アクセス</li>
                <li>お問い合わせ</li>
            </ul>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
        </body>
        </html>
        

<p>~</p>で囲まれた部分がひとつの段落として表示されます。

<p>タグはparagraph(段落)の略で、それがひとつの段落であることを表します。


2.5.4 改行

テキストを強制的に改行するには<br>タグを使用します。

1. HTMLファイルにソースコードを記述

①ソース・フォルダー :webpage/ch02
②ファイル名     :break.html

➢ break.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>HTMLの基礎</title>
        </head>
        <body>
            <h1>HTMLの基礎</h1>
            <ul>
                <li>ホーム</li>
                <li>会社案内</li>
                <li>アクセス</li>
                <li>お問い合わせ</li>
            </ul>
            <p>
                HTMLの基礎を勉強しています。<br>
                HTMLの基礎を勉強しています。<br>
                HTMLの基礎を勉強しています。
            </p>
        </body>
        </html>
        

<br>タグには開始タグ・終了タグはありませんので、改行したいポイントに記述します。

<br>は、Breakの略で、改行を意味します。

NEXT>> 2.6 本章のまとめ

HTMLとCSSの入門 目次

セミナー一覧

神田ITスクールの就職・転職

HTMLとCSSの入門 目次

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.