CSSについて教えて下さい。

WordPressのブログを使用しています。テキストエリア内の文章に対する色々な指定(margin-bottomなど)をCSSで行っているのですが、テキストエリア内文章の、div要素で囲んだ部分に対しては、margin-bottomが無効化され、行ピッチが詰まった状態になってしまいます。
これはCSSでの指定の仕方がおかしいのでしょうか?
それともWordPressの仕様なのでしょうか(ちなみにテ-マは「Coraline」というものを使っています)
いずれにしろ対策を講じたく、対処法を教えていただけませんでしょうか。

また別問題として、自動改行されたところも行ピッチが詰まってしまいます(div要素で囲んでいなくても)。
こちらの対策も教えていただければありがたいです。

ズバリな回答をいただいた方には高ポイントを差し上げます。
なにとぞよろしくお願いいたします。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/29 07:59:23
  • 終了:2011/07/31 07:56:09

ベストアンサー

id:Lhankor_Mhy No.4

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/07/29 18:51:51

ポイント200pt

ご提示いただきましたCSSを、

http://coralinedemo.wordpress.com/

のページに適用してテストしてみましたが、改行は一致しました。

また、coralineのデフォルトCSSでも、p{margin:0 auto}とすることによって望む効果を確認しております。

これは、私の推測が間違っていて、HTMLの方にも原因があるのかもしれません。そうであれば、CSSだけではいかんともし難いのかもしれません。

 

 

 

あと、一応念のための質問ですのでお気をを悪くなされないで頂きたいのですが、アップしていただいたCSSファイルはこれそのものではないですよね? HTMLファイルになっているのは私が見やすいように変換していただいたと理解していますが、よろしいですか?

id:anglgm

追記

デフォルト状態で同様の事をやってみました。しかしうまくいかず・・。

自動改行と、「シフトキ-を押しながらの改行」は、同じ行ピッチなのですが、普通にエンタ-を押しただけの改行だったらやはり大きく行ピッチが空いてしまうのです。

この単純な、「エンタ-のみを押すだけの改行」も自動改行と同じ行ピッチにしたいのですが。。

Lhankor_Mhyさんのやり方と何が違うのか考え込んでおります。


*****************************


え!?わざわざ検証していただいたのですか!!

それはなんとも恐れ入ります!

私の方でも一度、デフォルト状態で同様の事をしてみます。

Lhankor_Mhyさんのおっしゃるとおり、htmlの方に問題があるのかもしれません。

なにはともあれ、申し訳ないやら恐れ入るやらです。必ずご報告させていただきますので少々お待ちください。本当にお世話さまでした。


確認していただきやすいかと思い、HTML形式でCSSファイルの中身をアップさせていただきました。細心の注意を払っていただきありがとうございます。


【上に追記しました】

2011/07/30 01:39:12

その他の回答(3件)

id:km1981 No.1

km1981回答回数429ベストアンサー獲得回数492011/07/29 08:16:06

ポイント50pt

何か誤解があると思います


行ピッチを指定するのはmargin-bottomではなくline-heightです

http://www.htmq.com/style/line-height.shtml


その観点でCSSを見直してみてください

id:anglgm

追記

km1981さんとLhankor_Mhyさんのおかげさまで、行ピッチがゼロという現象は解決できました。ありがとうございます。

あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ-トの指定などで改善できないものでしょうか?


自動改行でできた行ピッチを通常改行でできた行ピッチに合わせるか、逆に通常改行でできた行ピッチを自動改行の行ピッチに合わせるか、どちらかにできれば嬉しいです。

例えば現在、記入しているこのフォ-ムでも自動改行と通常改行で行ピッチは同じですよね。

こういう風にしたいのです。

お知恵を拝借したく、引き続き質問させていただきます。


************************************

あっごめんなさい、そうですね。

ただ、文章作成時に普通に書く分には指定した通りの気に入ったスタイルなのですが、質問にあるとおり、その文章をdivで囲むと行ピッチがなくなるのです。

質問はこのまま続行します。ご指摘の段、ありがとうございました。


追記:使用ブラウザは、Chrome(最新バ-ジョン)です。

2011/07/29 15:01:10
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/07/29 09:12:21

サンプルを書きました。

↓こういうことでしょうか?

http://jsfiddle.net/Z3U4b/

このような現象が起きてしまっているのであれば、id:km1981のご指摘の通りです。

おそらく、p要素に対してmargin-bottomを設定しているのだと思いますが、これは本来「段落の下マージン」を設定するものですから、以下のような状況では思い通りの改行になりません。

・段落内にボックスが存在する。

・段落内に改行が存在する。

・段落内に折り返しが存在する。

ですので、いちばんよい解決法はline-heightで書き直すことです。

 

 

 

以下にとりあえずの解決法を示します。

 

・「divで囲んだ部分」の解決方法

divで囲む時は以下のように書いて下さい。

<div style="margin-bottom:xxx"></div>

xxxの部分は、ご自分の設定と合わせて下さい。

またはクラスを設定して書いてもかまいません。

 

・「自動改行されたところ」の解決方法

折り返しされない長さで書いて下さい。

あるいは、pre要素で書くか、CSSでwhite-spaceをnowrapにしておくと折り返しがされなくなります。はみでますけど。

id:anglgm

Lhankor_Mhyさんとkm1981さんのおかげさまで、行ピッチがゼロという現象は解決できました。

ありがとうございます。

あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ-トの指定などで改善できないものでしょうか?


自動改行でできた行ピッチを通常改行でできた行ピッチに合わせるか、逆に通常改行でできた行ピッチを自動改行の行ピッチに合わせるか、どちらかにできれば嬉しいです。

例えば現在、記入しているこのフォ-ムでも自動改行と通常改行で行ピッチは同じですよね。

こういう風にしたいのです。

お知恵を拝借したく、引き続き質問させていただきます。

2011/07/29 15:01:34
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/07/29 15:09:09

>あとは自分で改行した部分と、自動改行になった時の行ピッチが全然ちがう、という問題で困っています。自動改行に対するスタイルシ-トの指定などで改善できないものでしょうか?

 

できれば現物を見せていただきたいのですが、難しいのですよね?

推測ですが原因は、

・line-height設定で行の高さを調整したが、p要素に対するマージンがあるので、段落間に隙間ができている

だと思います。

 

対処としては、

p{margin:0 auto}

をCSSに加えることでしょうか。

 

http://jsfiddle.net/Z3U4b/1/

id:anglgm

返信いただきありがとうございます。

先ほども、今回もご親切にご指摘いただいておりますこと感謝しております。

さっそく

p{margin:0 auto;}

をスタイルシ-トに加えたのですが、変わりなしです。

現物のスタイルシ-トを無料HPスペ-スにあげてみました。

(WordPressのスタイルシ-トは長いので恐縮なのですが)下記URLから見ていただけるようにいたしました。


http://kawaii4japan.web.fc2.com/


4分の1ほど下がったところにある、

/* =Typography---------------- */から下が問題かなと思っております。


もしこのスタイルシ-トからなにかおわかりでしたら教えていただけると嬉しいです。

親切なご返信、誠にありがとうございました。

2011/07/29 17:59:41
id:Lhankor_Mhy No.4

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/07/29 18:51:51ここでベストアンサー

ポイント200pt

ご提示いただきましたCSSを、

http://coralinedemo.wordpress.com/

のページに適用してテストしてみましたが、改行は一致しました。

また、coralineのデフォルトCSSでも、p{margin:0 auto}とすることによって望む効果を確認しております。

これは、私の推測が間違っていて、HTMLの方にも原因があるのかもしれません。そうであれば、CSSだけではいかんともし難いのかもしれません。

 

 

 

あと、一応念のための質問ですのでお気をを悪くなされないで頂きたいのですが、アップしていただいたCSSファイルはこれそのものではないですよね? HTMLファイルになっているのは私が見やすいように変換していただいたと理解していますが、よろしいですか?

id:anglgm

追記

デフォルト状態で同様の事をやってみました。しかしうまくいかず・・。

自動改行と、「シフトキ-を押しながらの改行」は、同じ行ピッチなのですが、普通にエンタ-を押しただけの改行だったらやはり大きく行ピッチが空いてしまうのです。

この単純な、「エンタ-のみを押すだけの改行」も自動改行と同じ行ピッチにしたいのですが。。

Lhankor_Mhyさんのやり方と何が違うのか考え込んでおります。


*****************************


え!?わざわざ検証していただいたのですか!!

それはなんとも恐れ入ります!

私の方でも一度、デフォルト状態で同様の事をしてみます。

Lhankor_Mhyさんのおっしゃるとおり、htmlの方に問題があるのかもしれません。

なにはともあれ、申し訳ないやら恐れ入るやらです。必ずご報告させていただきますので少々お待ちください。本当にお世話さまでした。


確認していただきやすいかと思い、HTML形式でCSSファイルの中身をアップさせていただきました。細心の注意を払っていただきありがとうございます。


【上に追記しました】

2011/07/30 01:39:12
  • id:km1981
    >その文章を
    >で囲むと行ピッチがなくなるのです。
    何が書いてあるかわかりませんが
    繰り返しになりますがmargin-bottomは行ピッチじゃないですよ
    下方向の余白です

    margin-bottomの継承についてはブラウザによる仕様の違いがあるので
    まずはお使いのブラウザを明らかにしてから
    確認してみてください
    http://adp.daa.jp/archives/000574.html
  • id:Lhankor_Mhy
    うーん……、wordpressのshift+enterって、<br/>改行ですよね。
     
    Chromeでご覧になってるということでしたが、WebInspectorで見たときに、p要素のマージン・パディング・行高さはどうなっていますでしょうか?
  • id:anglgm
    ありがとうございます、理由が判明いたしました!
    WPのプラグイン「brbrbr」というやつの働きのせいでおかしくなっていたようです。
    これを停止させると、Lhankor_Mhyさんのおっしゃるようになりました!

    なにより嬉しかったのは、わざわざWordpressで当方のテ-マをインスト-ルしてまで検証していただいた事です。感激いたしました。


    素晴らしい回答に感謝しています。
    本当にありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません