今回は、テキスト要素を表示するためのHTMLコードである『h1〜h6、p、a、span、br』を紹介します。
目次
テキスト要素を表示するためのHTMLコード集[h1〜h6、p、a、span、br]
見出しに使うh1〜h6
h1〜h6は、テキストの見出しに使うコードになります。
百聞は一見にしかずということで、
以下のデモをご覧ください。
See the Pen JjXBRmG by ryu (@ryu-no-sss) on CodePen.
このように、h1が一番大きく、数字が増えるごとに文字が小さくなっています。
これは、h1が一番重要なテキストであるためです。
また、h1を使用するのは、サイト内で一度だけにしましょう！
なぜなら、googleの検索エンジンは、h1要素をサイト内で重要なテキストと認識するからです。
しかし、最近では、h1は複数使っても問題はないと言われています。
これは、googleの検索エンジンが日々進化しているためです。
詳しいことは省きますが、気になる方は、『h1 seo』で検索しましょう！
話を戻します。
h2以降に関しては、回数の制限はありませんが、
階層を意識して、h2〜h6を使用しましょう！
長文のテキストに使うp
こちらは、見出しのあとの長文テキストや説明文などに使うことが多いコードです。
使用例は、以下のデモをご覧ください。
See the Pen YzqjpGY by ryu (@ryu-no-sss) on CodePen.
デモでは、見出しの後に、p要素を使っています。
p要素に関しては、長文に限らず文に使えばいいと覚えておけば大丈夫です。
ここまで、HTMLコードについて解説してきました。
ここからは、テキストに色や余白をつけて見やすくさせるCSSコードについて解説します。
プロゲートやドットインストールで理解できている！という方も、
これから紹介するCSSは、実戦でもよく使うコードですので、
流し読みで気になるところを復習しましょう！
他サイトのリンクを貼るためのa
a要素は、サイトの中に、他サイトのリンクを貼るためのHTMLコードです。
簡単にいうと、以下のようなリンクにa要素が使われています。
使用例は、以下のデモをご覧ください。
See the Pen xxVJRzL by ryu (@ryu-no-sss) on CodePen.
デモのように、a要素のhrefに、移動先のサイトのURLを貼りましょう。
URLの取得方法は、
①サイトを検索
②以下の画像の赤く囲ったところをコピーしてhrefに貼る
ここからは、a要素でよく使うCSSをご紹介します。
display: inline-block;などの使い方は、
理解しておくようにしましょう！
よく使います！！
テキストの一部の色やサイズを変える方法[span]
spanは、テキスト中の一部の文字の色や大きさを、
変えたい場合によく使うHTMLコードです。
使用例は、以下のデモをご覧ください。
See the Pen gOrjgYJ by ryu (@ryu-no-sss) on CodePen.
このように、spanで囲んだテキストの色やサイズを変更することができます。
また、span要素は、サイトにアクセントをつけたい場合によく使うので、
使い方を覚えておきましょう！
以下のデモをご覧ください。
See the Pen YzqjNpg by ryu (@ryu-no-sss) on CodePen.
このように、アイコンを作ることも可能です。
テキストの段落を変える時に使うbr
brは、見出しの通りテキストの段落を変えたいときに使用します。
See the Pen RwaBKZX by ryu (@ryu-no-sss) on CodePen.
このように、段落を変えたいところに、<br>を使うことで改行されます。
br以外の方法で改行する方法として、以下の例があります。
See the Pen oNxMBom by ryu (@ryu-no-sss) on CodePen.
p要素を複数使い改行する方法の利点として、
1行ごとのレイアウト（色やテキストサイズの変更など）がしやすいという点があります。
ですので、1行ごとにレイアウトを変えたい場合は<p>で改行し、
特にレイアウトしない場合は、brで問題ないです。
まとめ
・h1は、一番重要なテキスト（見出し）に使う
・h2以降は、回数制限はないが階層を意識して使う
・pは、長文などテキストに使う
・aは、他のサイトのリンクを貼りたい場合に使用する
・spanは、テキスト中の一部の文のレイアウトを変えたい場合に使う
・brは、テキストを改行したい場合に使う
※pを複数使って改行することもできる
今回は、テキスト要素を表示するためのHTMLコード集を紹介しました。
それでは、最後まで読んでいただきありがとうございました。
