[6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
最終更新日：2019年03月22日 （初回投稿日：2010年10月08日）
今回は、段落を表す要素 <p> を使います。
「p」は「paragraph」の略。パラグラフ。段落という意味です。
| 使用する要素 | <p> 〜 </p>
|
|---|
本文テキストは必ず<p>要素で囲もう
前回 [5] テキストを改行（<br>）してみよう のHTMLコードをもう一度見てみますと。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
本日は晴天なり〜！
<h1>本日は晴天なり〜！</h1>
<h2>本日は晴天なり〜！</h2>
<h3>本日は晴天なり〜！</h3>
<h4>本日は晴天なり〜！</h4>
<h5>本日は晴天なり〜！</h5>
<h6>本日は晴天なり〜！</h6>
本日は晴天なり〜！<br>
本日は晴天なり〜！
本日は<br>晴天なり〜！
</body>
</html>
青バックの部分（7行目と14〜16行目）は、何の要素にも囲まれていません。
実はこれ 非っ常にマズイ状態 なんです。HTMLの文法的にもスタイル指定の面でも。
（前回までは要素の紹介のために、このマズイ状態のままでやっていました）
ブラウザは一応（他にやりようがないので）本文テキストとして表示していますが、HTMLの文法的にはこのテキストは 役割がわからない部品になっています。
スタイル的にも問題あり。
これらのテキストの親要素は <body>要素ですので、これらのテキストのサイズを大きくしたい、または小さくしたいときは <body>要素のスタイルシートを変更するしかない。すると同じ兄弟の <h1> 〜 <h6> の大きさも相対的に変わってしまい、それをまた修正するという負のスパイラル。めっちゃ面倒くさいです。
ですので、本文テキストは必ず <p>要素で囲もう。
（本文ではないテキストで、役割を何にすればわからないものは <div>要素で囲みましょう）
とにかく、裸のまま（親要素が <body>のまま）の部品は置かない のが鉄則です。
p要素はひとまとまりのブロックとして表示されます
では今回は、下のちょっと長い文章をコピペして、段落にしたいところを <p> 〜 </p> で囲んでみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
（島崎藤村「夜明け前」序の章より）
</p>
</body>
</html>
これを保存してブラウザでプレビューします。
下記のように <p>要素で囲んだ部分が ひとまとまりのブロックとして表示されますね。
p要素にスタイルシート（CSS）を指定してみよう
上で作ったものを、ブラウザのウィンドウの大きさを変えて見てみましょう。
ウィンドウの幅に合わせて、段落の幅も変わりますね。
ウィンドウの幅が広いときは文字が左端から右端までいっぱいに書かれて、けっこう読みにくいです。
そこで、段落の幅を固定してみましょう。
これは HTML要素ではなく、スタイルシート（CSS）というものを使います。
下のブルーバックの部分がスタイルシートの指定です。
<head> 〜 </head>の中に入れています。コピペで同じところに貼ってみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
<style>
p {
color: #666666;
width: 80%;
}
</style>
</head>
<body>
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
（島崎藤村「夜明け前」序の章より）
</p>
</body>
</html>
再び保存してブラウザでプレビューしてみます。
<p>要素は ブラウザウィンドウの幅の80％になりました。
ついでに文字色も指定したので、本文の文字がグレーになっています。
今回は簡単に「スタイルはCSSでやる」ことを説明したかったので、<head> 〜 </head>の中にCSSを書く方法を使いました。
が、CSSは HTML上に書かずに 独立したCSSファイル にして読み込む方法が標準です。
CSS（カスケーディング スタイルシート）については、本サイトで「はじめてのCSS」として記事をアップしています。インデックスはこちら。すぐに勉強したいってかたは見てみてください。
はじめてのCSS INDEX
ただ、HTMLのほうは わりと単純明快だけど、CSSはけっこう複雑（ルールは単純だけど覚えることが多い！）ので、HTMLをそこそこ理解してからCSSやったほうが、たぶん効率いいよ。
次回予告
今回は <p>要素の説明のついでに CSSの話もしたので、ちょっと混乱したかもですね。
HTMLとCSSは切っても切れない関係なので、今後もときどき一緒に説明することもあると思います。まあ今は「一緒に使うんだなあ」くらいの気持ちで見ていてください。
さて次回は、今回もチラッと出てきた <div>要素と、もうひとつ <span>要素の話をする予定です。
- 関連記事
-
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
- [10] 絶対URL と 相対URL（絶対パス と 相対パス）
- [9-2] 画像にテキストを回り込ませよう（CSS使用）
- [9-1] 画像を表示しよう img要素
- [8]コメントを入れよう
- [7] ＜div＞や＜span＞で特定の範囲を指定しよう
- [6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
- [5] テキストを改行（＜br＞）してみよう
- [4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
- [3] !DOCTYPE宣言をしよう
- [2] タイトル（title要素）を設定しよう
- [1] テキストエディタで書いてみよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
Re: No title
No title
のリンクが切れてるよ。
いつもありがとう。
Re: No title
今、コメントいただいているのに気付きました。遅くてスミマセン。
リンク、大丈夫みたいなんですが、ご確認ください。
