[6] 段落に<p>要素を使おう(ついでにCSSで整えてみよう)

最終更新日:2017年09月14日  (初回投稿日:2010年10月08日)

今回は、段落を表す要素 <p> を使います。
「p」は「paragraph」の略。パラグラフ。段落という意味です。

使用する要素 <p> 〜 </p>

本文テキストは必ず<p>要素で囲もう

前回 [5] テキストを改行(<br>)してみよう のHTMLコードをもう一度見てみますと。

<!DOCTYPE html>
<html>
<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>
<head>
〜省略〜
</head>
<body>
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
(島崎藤村「夜明け前」序の章より)
</p>
</body>
</html>

これを保存してブラウザでプレビューします。
下記のように <p>要素で囲んだ部分が ひとまとまりのブロックとして表示されますね。

p要素にスタイルシート(CSS)を指定してみよう

上で作ったものを、ブラウザのウィンドウの大きさを変えて見てみましょう。
ウィンドウの幅に合わせて、段落の幅も変わりますね。
ウィンドウの幅が広いときは文字が左端から右端までいっぱいに書かれて、けっこう読みにくいです。
そこで、段落の幅を固定してみましょう。
これは HTML要素ではなく、スタイルシート(CSS)というものを使います。

下のブルーバックの部分がスタイルシートの指定です。
<head> 〜 </head>の中に入れています。コピペで同じところに貼ってみてください。

<!DOCTYPE html>
<html>
<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>要素の話をする予定です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTMLソース p要素

スポンサーリンク

コメントの投稿

No title

勉強させていただいてまーす

Re: No title

コメントありがとうございまーす

No title

The Ultimate CSS3 Generator | Web Code Tools(CSS3コードを簡単に生成してくれる)

のリンクが切れてるよ。

いつもありがとう。

Re: No title

matsuさん、ありがとうございます!
今、コメントいただいているのに気付きました。遅くてスミマセン。
リンク、大丈夫みたいなんですが、ご確認ください。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.