<p>の使い方 - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

<p>の使い方

法人・ビジネス ホームページ・Web制作 2009/01/23 18:09

独学でHTMLを勉強していています。
<div>の中に文字と画像が入るとすると文法的に画像にも<p>を使用した方がいいのでしょうか?

1.
<div>
<p>文字文字文字文字</p>
<p><img src="img.gif" widht="" height="" alt="" /></p>
<div>

2.
<div>
<p>文字文字文字文字</p>
<img src="img.gif" widht="" height="" alt="" />
<div>

文法上、1の方が正しいような気がするのですが、色々なサイトを見てみると2が多い気がします。

ご教授頂けると幸いです。

kankichiさん ( 埼玉県 / 女性 / 26歳 )

回答:3件

伊藤 章裕

伊藤 章裕
システムエンジニア

- good

見栄えで判断してよいと思います

2009/01/26 17:41 詳細リンク
(1.0)

こんにちは
アイティーエムクリエイトの伊藤です。

<p>タグの使い方ですね。
本来の使われかたは「文章の段落」をあらわすものなので
タグから見て正しいといえばどちらかといえば2も妥当かもしれないですね

あとは、見栄えですが<p>タグを多用するとブラウザで見たとき
行間があいた状態が目立つようになります。
<p>は文章の前後に行間を作ります。

そのときの見栄えが良いものなのか悪いものかで判断して
良いと思います。

個人的には行間が多くスカスカになるのもいやなので、<p>から<br>(改行)に
修正することがよくありますので、<br>なども試しに使用し、調整してみても
良いかもしれないです。

独学での勉強大変ですが、自信に繋がると思います。

ご参考になればと幸いです。

またお気軽にご質問下さい

評価・お礼

kankichiさん

見栄えではなく、文法的にどうしたらいいのかを悩んでおりました。
行間があく等の見栄えの部分はcssで調整しています。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
松井 秀人

松井 秀人
Webプロデューサー

- good

基本はマークアップです

2009/01/27 08:48 詳細リンク
(5.0)

こんにちは、インターネットプロデュースの松井です。

<p>の使用方法でお悩みとのことですが、HTMLの基本はマークアップ、つまり、対象の原稿に対する意味付けです。

<img>にも<p>を指定するかどうか、というよりも、その<img>が原稿の中で、どのような意味合いを持っているかを考えてみて下さい。

独立した段落となるものであれば、
<p><img></p>
<p>文字</p>
のようにし、他の文章を含めて段落の一部であれば、文字と一緒に
<p>
<img>
文字
</p>
のようにすればよいでしょう。

レイアウトについてはスタイルシートの役割ですので、デザイン的な要素(画像の配置や行間など)については、それぞれのタグにスタイルを指定します。

参考になればと思います。

評価・お礼

kankichiさん

imgがもつ意味合いで決めると言うことですね。
大変参考になりました。ありがとうございました。


どちらも・・・

2009/01/25 20:45 詳細リンク
(3.0)

kankichiさん、
初めまして、ワイドハイフンの田地です。

結論から申し上げますと、1でも2でも文法上は正しいと思います。

<p>タグの意味はパラグラフ(段落)という意味ですので、
段落の意味合い的に文字とイメージを分けて説明するほうが適していましたら1を採用し、
同じ段落で意味を成すのであれば2を採用されるとよろしいかと思います。

この文字とイメージが同じ内容のものであれば;

<p>
<img src="img.gif" width="" height="" alt="" />
文字文字文字文字

</p>
・イメージタグはfloat指定するなどが多いです。

として記述することで意味合い的にも文法的にも正しく、且つ合理的になるかと思います。
また入れ子(タグ)を少なくすることで制作する際に管理も楽になりますよ。

ただ最近ではデザイン表現も以前より複雑化していることもありますので、
その時に応じて、工夫して実践してくださいね!

ご参考いただければ幸いです。

評価・お礼

kankichiさん

ありがとうございます。参考になりました。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

サイトの著作権の範囲について cooljob888さん  2009-10-03 12:15 回答5件
動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)