文章を書く 【<p>タグ】:HTML入門

ブログが作りたい!HTML入門 > 文章を書く 【<p>タグ】:HTML入門

文章を書く 【<p>タグ】:HTML入門

文章を書く 【<p>タグ】:HTML入門

HTML入門(4)

記事「見出しを付ける 【<h>タグ】」にて、見出しの付け方が分かりました。

そうしたらもう、今回は、文章を書くしかないのであります。「ピーピーピーですよ。(長渕)」

お話は、次の順番で進みます。

▲ページの先頭に戻る

段落タグ(<p>タグ)とは?

<p>タグは、ひとつの段落を指定するためのタグです。

次のように記述します。

<p>~</p>

つまり、文章のひと段落を、<p>~</p>で囲めば良いわけです。

ちなみに、どうして、「p」かと言えば、「Paragraph(段落)」の頭文字「p」です。

▲ページの先頭に戻る

本にたとえてイメージする

それでは、本を手に取って、開いてみてください。

見出しがあって、文章が続いていると思います。今回は、この文章のお話です。

大見出し(<h1>タグ)

それでは、梅田さんの本『ウェブ時代 5つの定理』の「まえがき」の冒頭を引用させていただいて説明することにします。(以下、引用です)

未来を見通すことなど誰にもできないが、こうすればクリアに想像できるのか。世界の成り立ちなど誰にもわからないけれど、こうすれば見晴らしがよくなるのか。

この文章は、2つ段落があるので、HTMLコードでは、次のように記述します。(画面上で見難い場合は、テキストエディタに貼り付けて見てくださいね)

それぞれの段落を、<p>~</p>で囲むわけです。

<p>タグを使うだけで、次のメリットがあります。便利ですよ。

  • 自動的に、改行される。
  • 自動的に、段落と段落の間に適度なスペースができる。

などなど。

ひと様の文章を引用する場合は、また別途、引用タグというものが存在します。ここでは、仮に~というお話です。

▲ページの先頭に戻る

実習 <p>タグ

1:<p>タグを使ってみる

それでは、次の文章を、<p>タグで区切って、HTML文にしてみましょう。(好きな文章を使って構いませんよ)

むかし、むかし、あるところに、おじいさんと、おばあさんが住んでいました。おじいさんは、山へ柴咲コウとピクニック。おばあさんは、川へ千と千尋の神隠し。おばあさんが、川で「ハクはそんなことしっこない!優しい人だもん!」と叫んでいるうちに、川の向こうから、どんぶらこっこ、どんぶらこっこと桃が川下へ流れて行ってしまいました。お終い。

出来上がったら、以下のHTML文に組み込んで、ブラウザで表示してみてください。

ブラウザで表示すると、次のようになります。

ブラウザで表示

ブラウザで表示させる方法は、記事「HTMLを表示させてみよう」が参考になります。

▲ページの先頭に戻る

2:遊ぶ

時間に余裕がある人は、好きなように文章を作って、遊んでみましょう。覚えようとするよりも、慣れることが大切です。

▲ページの先頭に戻る

<p>タグの必要性

1:<p>タグなんているの?

とても熱心に読んでくれている人は、「ん?<p>タグなんているの?」と、疑問に感じていらっしゃるのではないでしょうか。

たしかに、記事「HTML文を表示させてみよう」でも、次のように HTML文を書きました。

「文章が、書けているではないか!おのれ~、わたしを愚弄する気か!成敗してくれる!」などと怒ってはいけません。

これは、単に HTML文が融通の利く言語であり、またブラウザも多少のミスは目をつぶって表示してくれるためです。

絶対にダメということでもないのですが、世の中は、「Web標準」の方向へむかっているので、好まれない書き方と言えます。

「それでは、嘘をついていたのか!おのれ~、わたしを謀(たばか)りよったな!成敗してくれる!」などと怒ってはいけません。

説明には、段階というものがあるのです。

▲ページの先頭に戻る

2:<p>タグのメリット

「それにしたって、わざわざ <p>タグなんて書くの面倒くさいよ、いらなくね?くねくね?」と感じるかもしれません。

しかし、<p>タグを使えば、次のようなバラ色の世界が待っているのです。

  • インデントさせることができる。
  • 行間を、指定できる。
  • 文字間隔を、指定できる。

などなど。

これらは、CSSによって行います。タグで囲んでいるからこそ、CSSの効果を付けることができるのです。

そして、ボーナスポイントとして、SEOの効果もあると言われています。繰り返して申し上げます。

「タグで囲んでいるからこそです」

まだ、CSSの話をしていないので、納得しかねるかもしれませんが、<p>タグを使う方が、圧倒的にメリットがあることは、Web制作について学べば学ぶほど理解できるものと思います。

▲ページの先頭に戻る

次回予告

次回は、画像を使うための<img>タグについて書きます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/18 更新日:2008/03/18

« 「見出しを付ける 【<h>タグ】」|「画像を使う 【<img>タグ】」 »

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

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

くねくね?

こんばんは!
Pタグ、昔は使わなくていいやんと思い、まさに文中の「くねくね?」だったのですが、
最近やっとその大切さがわかってきました。

しかもSEO効果に繋がるなんて!しらなんだ!
hタグや、キーワードだけではなく、いろいろなSEOの方法があるんですね。

前の記事のブクマボタンの設置を読んで、とてもおもしろそう!と思ったので
自分のブログにも設置してみました!
ありがとうございました^^

SEO効果

ひろこさん、こんばんは。

直接的なSEO効果は少ないと思います。

ただ、pタグを使わない場合のことを考えると、
自ずと軍配は、はっきりとしそうです。

例えば、行間を空ける場合、pタグを使わないとすると、
brタグを使うことになると思うのだけれど、

brタグを5個も6個も入れるようなソースコードは、
美しくないです。

また、Web標準で推奨されないfontタグも、
使わざるを得ない状況も発生しそうです。

pタグを使えば、CSSで操作しやすくなるから、
何しろ、きれいなコードが書けます。
ゆえに検索エンジンの覚えは良くなると思うんだ。

おっ、ブクマボタン付けたんですか。
しかし、おもしろいサービスを考えつくものですよね。
アイディアが、すごいなぁって思うんだ。

スッキリ

ですねー、Pタグを使わないとKumaCrowさんが仰ってる事が起こってきますよね。
文字の大きさ、色、また行間とかも。

htmlに直接それらを指定してもいいけど、やはりゴチャゴチャするのは
避けられないですね。
なるほどなるほど
やっぱりロボも人も見やすいのが一番ですね。

ブクマつけてみました。
でも、どうもページの表示が遅くなってしまって。
とっちゃうかもorz
はてぶは登録してみたので、これからたくさん利用したいと思ってます!

こんばんは!

なるほど~
最後まで読んでまたトップに戻ってから気がつきました!
長淵のピーピーピーは<p>タグにかけてたんですね(笑)^^

つい改行してすましてしまう癖があるんですが、<p>タグを使えば
SEO効果に繋がるんですね。なるほど!
とても参考になります。

次回の「imgタグについて」楽しみにしています^^

やすきよ

ひろこさん、こんにちは。

「SEOの効果の小さいことなどに、こだわってられんわ!」
という人もいらっしゃるようですが、

内部的なSEOは、
小さなことの積み重ねで組み立てられていると思うんだ。
やっておいて損はしないと思う。

それに、コードが簡潔になれば、サイトの表示も速くなります。

また、ひとりで作っているうちはいいけれど、
チームで作ったり、コードを再利用することを考えると、
ごちゃごちゃしていない方が良い。

いいことばかりなんだなぁ。(・∀・)

ただ、言うはやすしきよし、行なうは難しなんですよね。
完全にHTMLとCSSで分けて出来ているかというと、まだまだッス。

「小さなことからコツコツとー」です。

AddClipsは、何ででしょうね。
確かに表示動作が不安定な感じになっています。
不思議だ。

あれ?今日はそうでもないかな。
ちょっとemoのデータ待ちが長いみたいだけれども、
何でしょうねぇ???(´Д`;)

ぴーぴーぴー

ichimarugo-いちまるごさん、こんにちは。

そ、そうです。(〃▽〃)てへっ

「あれ?文章のタグって何だったかしら?」と忘れてしまったときに、
長渕剛さんの「ぴーぴーぴー」がどこからともなく聴こえてきて、
思い出せるんじゃないかと考えて書いておきました。

記憶への道(シナプス?)は、
何本かあった方が良いと思うんだ。(・∀・)

改行タグは、強制改行と考えた方が良いかもしれません。
(どうしても、ここで改行せざるを得ない場合にだけ使う)

次回imgタグは、すんごい長くなるかも・・・。(´Д`)

No title

「おじいさんは柴咲コウと・・・」。
爆笑モノです。

Terapadもダウンロードできたし
ここまで面白く理解できて
Go,Go Woman 、楽しいです。



Go! Go! Woman!

sachiさん、こんばんは。
コメントありがとうございます。

柴刈りと柴咲コウじゃあ違いすぎますよね。
何を書いてんだか・・・困ったものです。(´Д`;)ハハハ

どうやら、楽しめているようで、何よりでございます。
良かったわん。▼・ェ・▼ワンワン

素朴な疑問。

僕もそろそろHTML&CSSの知識を0から1にグレードアップしようと思い、
クマクロさんのレクチャーを読み始めたのですが、ある疑問があります。

クマクロさんの書かれている通り、毎回pタグで囲んで文章を書くと
自動改行等のメリットがあり、ソースも非常に綺麗に表示されており、
後にCSSを弄る時にも有利になります。

ですが、見る側のモニターサイズやブラウザーのフォント設定によっては、
改行される箇所が変わってしまい、場合によっては読みづらい文章になって
しまう事もあるかと思います。

かと言って、brを多用し、任意に改行操作した場合、ソースは
ぐちゃぐちゃになるし、後にCSSも弄りづらくなりますが、(僕はなっていますw)
個々の環境依存による、文章の表示崩れは、書く側の意識で
かなり減らす事が出来ると思うんですね。

そこで思ったのが、pタグのメリットを活かしつつ任意の改行位置に
出来ないものなんでしょうか?
素人の質問ですみません(。´-д-)

改行位置を揃えたい話

まっこりーにさん、こんばんは!( ・∀・)ノぐいさた
コメントありがとうございます。

そうなんですよねー。きれいに揃えたいです私も。(;´Д`)

一番困るのは、英単語ですかね。
長い英単語だと、ぶりーんってなりますからね、次の行へ。

えらい右側があいちゃってみっともない。


で、いちおう「均等割付け」という
改行位置を揃える方法なんてのはあるざますよ。
 →http://kumacrow.blog111.fc2.com/blog-entry-287.html#p-justify

ただ、完全にうまいこといくかというとそうでもないので、
微妙なんすこれ。よけい見にくい場合もあるし。(´Д`;)

この辺の技術が進歩してくれると、いいんですけどね~。
私はそれ待ちです。それまちたかしです。


これじゃあ嫌よ、あたし待ってなんかいらんないんだからね!
と言う場合は、pタグの中で、brタグを使うしかないかも。

ちょっと他に方法は思い当たらないです。
すんません、ほんますんまっせん。

回答ありがとうございます

やはり、自分の任意の位置で改行するにはbrを入れるしかなさそうですね。
方法がハッキリと分かってすっきりしました^^

ブログを書き始めた頃、メイリオフォントがXP向けに出ている事を知らなくて
もちろんPタグも使ってなかったので(現在もまだ使っていませんが)いざメイリオで
表示されてみるとMSPゴシックで何の考えもなく書いてた記事は、
全て酷い表示崩れになった苦い思い出があります・・・w

それから、どのフォントで読んでも、改行が同じになる様に
記事を地道に修正して、最終的には、一番行間の広いメイリオに
最適化した編集方法を取って、CSSの指定フォントもメイリオ優先に
したんですけどね、今度は逆にMSPゴシック等の行間の狭いフォントで
表示すると、余白が目立つ様になってしまい、それが悩みの種です(。´-д-)

しかもソースを表示したら、みっともないったらありゃしない><
裏側を見られてもキレイなサイトで居たいもんです(。-_-。)ポッ

こだわり

まっこりーにさん、こんばんは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

こだわるのねー。
職人気質なんですかね。(´▽`)♪ねー

それが成長につながるのでしょうね。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/243-61175a58
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて