【HTML入門者向け】文章を作成する方法を解説 | WEBCAMP NAVI
【5月の受講枠も残りわずか】

【HTML入門者向け】文章を作成する方法を解説

みなさんはHTMLの学習をしていませんか?

HTMLで文章を書くとき、気を付けたいのは、通常のテキストファイルで挿入した改行や段落などが反映されません。

今回の記事では文章を作成する方法を解説します!

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

概要

HTMLファイルにしてしまった時点で、改行や段落もタグを使う必要がでます。テキストファイルと同じように文章を書いて改行して、段落分けしてもブラウザで見るとすべて1行の文(画面端で切れたり、自動改行される)になっています。HTMLファイルで思うように文章を書くために必要なタグを認識しましょう。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。


HTML・CSS」をマスターして、ホームページWEBアプリを作成できるよう になりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験者!
スキマ時間で効率よくスキルアップしたい方におすすめ!
基礎から確実に身に付く充実のカリキュラム!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

見出し

見出しを指定するためのタグは、タグです。しかし、タグと書いていますが、タグというタグが存在するわけではありません。これは便宜(べんぎ)的な、総称として表記しています。 実際には、

というように、数字を付けます。そしてタグは、

まであり、6段階のタグが存在します。それぞれ、次のように記述します。

タグが大見出しで、

タグは最小の見出しを表します。数字が小さいほど、大きい見出しということになります。しかし、タグと言うのは、見出しがあれば付ければ良いし、無ければ付けなくても問題ありません。自由です。例えば、小説のような形式では、見出しで区切らない場合もあります。それは、見出しによって、せっかくの話の流れを止めてしまうことがあるからだと思います。その文章の性質によって、見出しの有無は書き手が決めなければいけません。 ただ、一般的な文書は、見出しで区切っておけば、読み手が、読みやすいというメリットの方が多いように思います。 ・見出しだけを飛ばし読みして、興味のある箇所だけ読むことが出来る。 ・見出しによって、区切りができるので、どこまで読んだかが把握しやすい。 ・起承転結などで分ければ、リズムが発生するので読みやすい。 ・大中小の見出しがあれば、内容を構造的に理解しやすい。 さらに人間だけでなく、検索エンジンからも、そのページの内容が把握しやすくなるため好まれます。 タグを使う場合の留意点ですが、

タグが使えるのは、1ページに1回だけです。見出しタグは、飛ばして使ってはいけません。例えば、

タグが無いのに、

タグを書くのは誤りです。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

文章

1.段落タグ( タグ)

タグは、ひとつの段落を指定するためのタグです。次のように記述します。 ~ つまり、文章のひと段落を、 ~ で囲めば良いわけです。ちなみに、どうして、「p」かと言えば、「Paragraph(段落)」の頭文字「p」です。 タグを使うだけで、次のメリットがあります。 ・自動的に、改行される。 ・自動的に、段落と段落の間に適度なスペースができる。 ・インデントさせることができる。 ・行間を、指定できる。 ・文字間隔を、指定できる。

2.改行タグ( タグ)

文字を改行します。 タグで改行した場合は タグと違い、行間は広がりません。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

サンプル

では実際に、次のようなHTMLコードを作成して、ブラウザで表示させてみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>
<h1>第一章 入門編</h1>
<h2>1.1 ブラウザとは</h2>
ブラウザとはさまざまなWEB情報を表示するための
クライアント用の閲覧ソフトです。さまざまな・・・
<h2>1.2 HTMLとは</h2>
HTML とは HyperText Markup Language の略で・・・
</body>
</html>


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート!
手厚いサポート付きで質問し放題!
✔未経験者のために開発された独自のカリキュラムを用意!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

補足

改行や段落わけはできませんが、文章自体はタグなどつかわなくても書けます。特に必要ないのでは?と思うかもしれませんが、今後デザインを行っていく段階で、HTML+CSSという環境が必要になっていきます。

その際に、CSSはHTMLタグに記載します。つまりどういうことかというと、「タグに囲まれていない文章はデザイン対象にならない」ということです。今後ページデザインを行っていくときに覚えておいてもいいかもしれません。

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ○選!を参考にしてみてください。

まとめ

初心者の方向けに文章を作成する方法を紹介していきましたが、いかがでしたか?

文章の見出しを変更することはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!