[6] テキストに段落<p>を作ってみよう

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

p要素は段落を指定する要素

<p>要素の「p」は「paragraph」の略で「節」「段落」の意味です。
このタグで囲まれたテキストを段落として指定します。

今回は下のちょっと長い文章をコピペして、下のように段落にしたいところを<p> </p> で囲んでみましょう。

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

これを保存してブラウザでプレビューしてみると、下記のように、<p>要素で囲んだところが段落になっていますね。

p要素で段落を指定

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

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

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

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

これを保存してブラウザでプレビューしてみると、p要素は幅500ピクセルに固定され、
ついでに文字色も指定したので、文字がグレーになっていますね。

p要素にスタイルシートを指定

このスタイルシートについて解説しますと↓

<style>
p {
color: #666;
width: 500px;
}
</style>

まずは<style> </style>タグで囲んで、その部分はスタイルシートだと指定します。
その中に p要素の指定を { } の中に書きます。
(ちなみに「{」はleft curly bracket、「}」はright curly bracket。「巻き毛のかっこ」という可愛い名前だったんですねー)
ここでのCSSの内容は2つだけです。
「color」は文字色を表します。16進法の色指定でグレー(#666)を指定しています。
「width」は幅。500ピクセルを指定しています。

Web上の「色指定」に関しては、こちらを参考にしてください。
●[14-4] 色指定について(16進数、色名、10進数、パーセント)

今回は簡単にCSSを説明したかったので HTML文書内の<head>の中にCSSを書く方法を使いましたが、 CSSはHTML内に書かずに「独立したCSSファイル」にして HTMLに読み込む方法が便利です。というか標準です。

独立したCSSファイル(外部CSSファイル)をHTMLに読み込む方法は、[12-1] CSSを外部ファイルにしようをご覧ください。
もっと詳しく見たい方はこちら→ 【2】CSSはどうやって使うの?(基本構造とCSSを置く場所について)→「外部ファイルにして<head>内に<link>要素で読み込む」

p要素の説明のついでにCSSの話もしたので、ちょっと混乱したかもしれませんね。
ですが、HTMLとCSSは切っても切れない関係なので、時々説明することになると思います。
2つの関係は「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
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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