人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページの記述について。左寄せを解除する場合。<p style="clear:right;"></p>と, <div style="clear: both;"></div>の違いは? 初歩的な質問にて失礼します。

●質問者: torimaki
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

スタイルの "clear: both;" は、"float: left;" と "float: right;" の両方を解除します。
スタイルの "clear: right;" は、"float: right;" を解除します。"float: left;" を解除しません。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear
http://msdn.microsoft.com/en-us/library/ie/ms530747.aspx



clear スタイルは、ブロック要素で有効に働くので、float の解除という意味では、<div> につけても <p> につけても効果は同じです。
ただ、中身(content)が空の <div> と <p> を比べると、デフォルトのスタイルの場合、<p> には margin がついてて、<div> にはついていないのが普通なので、<p style="clear: right;"></p> を使うと、空行が挿入されたように見えます。

http://jsfiddle.net/k9jbzjcy/


torimakiさんのコメント
a-kuma3さん、ご回答、ありがとうございます。 "clear:both;"は両側が、"clear:right;"は右側が解除される件、 ものは試し、ということで、実際にページを作ってみました。 http://tsurumaki-office.com/2014/10/06/style_clear_both_or_left/ おっしゃる通りでしたっ! 貼っていただいたURLのウェッブサイトですが、 ボーダーやマージンの概念がつかみ切れていないため、 こちらの理解は、ちょっと右に置いておきます。宿題です。 最後の<P>系の空行挿入の件、 上記の拙ウェッブサイトでは、<P><div>両方とも、同じような感じであります。 「中身(content)が空の」という前提を理解していない所から来る、 当方の誤解のような気がしていますです。はい。

a-kuma3さんのコメント
id:torimaki さんのサイトでは、p タグのマージンは、以下のように指定されています。 http://tsurumaki-office.com/wp/wp-content/plugins/biz-vektor-neat/css/neat.css margin: 0px; ――― 138 行目 margin-bottom: 20px; ――― 334 行目 試された記事では、 >|html| <p style="clear: left;">このように、写真に対して、文章は右側にレイアウトされる。<br /> (スマホでご覧のばあい、その限りではなりません。<br /> したがって、文意が伝わりにくくなっています。す、すみませんっ!)</p> ||< のような書き方になっているので、「す、すみませんっ!)」の下に、20px の空きができます。 これを、中身が空の p タグに clear の指定をすると、 >|html| <p style="clear: left;"></p>このように、写真に対して.. ||< 「このように、」の上に 20px の空きができます。 div タグの方は、 >|html| <div style="clear: both;">吾輩は猫である。<br /> ... 自分勝手で、おせっかいな生き物である。</div> <p>&nbsp;</p> ||< clear を指定した div を閉じた後に、&lt;p>&amp;nbsp;&lt;/p> があって、それが行の高さ line-height と margin-bottom 分の空き(ほぼ、2行くらいに見える)を作り、次の「その外に、左寄せを解除するためには、」の文に続きます。

torimakiさんのコメント
a-kuma3さん、 おかげさまで、P 空 /P による、スペースの空きの理解が進みました。 こういうことだったのですね。 http://tsurumaki-office.com/2014/10/08/p_tagu_kara/ line height、margin bottom云々については、 まだ、知識が不足しております。これから、勉強してみまーす。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ