質問板

スレッド一覧  

      

css初心者  

拙文ではございますが何方かご相談させてください。Googleフォントをようやく使用出来るになったのですが、どうも親記事にコードを入力すると(文字サイズ指定も含む)親記事のみ中央寄せ+文字サイズが気持ち大きく表示されてしまいます。text-alignで左寄せを指定しても効かず...。私としては親記事とレスの文字サイズを統一、デフォルトの左寄せが希望なのですがご教授頂けますと嬉しいです。

no name
04/16 10:32    

1  no name

文字列見ないとわかりませんよ

04/16 13:53    

2  no name

こんにちは。
ここの親記事ではGoogle fontを使用していないようですね。
こういった「前提Aのとき、状態Bとなる」問題があるとき、「私はAをした(つもりだ)」という不正確な情報だけでは正しい答に辿り着けないかもしれません。
なぜなら、そのときあなたは「Aをしただけでなく、気づかぬうちにCをしていて、Dをしていなかった」ことが十分あり得るからです。
できるなら、親記事内の独創的な文章部分については伏せたうえでCSS・htmlタグを残らず書き写した方が、正しい答を導く手掛かりになると思いますよ。

さて……
Google fontのembedコードをその利用方法に従うなら、headタグ内に収めていることだと思います。
同様に、styleタグも用いていて、件のフォントの利用を含めた種々の修飾をその内に収めていることだと思います。
これらがしっかりと閉じているということは疑い無いのですが……(そうでないと親記事の本文以下総てがheadやstyle内に収まってしまいますからね)

……それだけで終わっているのでしょうか?

おそらく、そうではないのでしょう。
metaカテゴリに属するhead・style要素は表面に記述されないというその特性上、他の要素の修飾を妨げることはありません。
これを閉じ終えた後、レスごとに自動生成されるp.main(text-align:leftであり、font-size:0.88emである…これの修飾がされていない=親記事本文がp.mainに含まれていないと考えるのが最も自然です)へと入るその前に、別の要素が付け加えられているのではないでしょうか。

新規に立てたばかりの(親記事内やタイトルが空だとみなします)ソースを「text-align:center」で検索すると、その修飾を施した要素は7つ見付かります。
ソースの記述順に列挙すると……
・div#box
・h1
・p.next
・p.cate
・p.center1
・address
・body
です。
これらのいずれかが/headと本文との間に顔を出していると考えられます。
(text-align:leftの修飾を施しているのは
・div#wrapper
・p.left
・p.main
の3つ、加えて、標準的な日本語ブラウザであれば既定値も(leftとはいまどき記述されないでしょうが)そうです)

04/16 15:01    

3  no name

(1)div#boxが出ている
div#boxは元々記述されていて、bodyの直下にあります。
メタデータ・コンテンツを除いた殆ど全てのコンテンツを内含した大きなブロックですが、text-align:center以外に何の修飾がされているわけでもありません。
なお、この直下にはdiv#wrapperがあり、#wrapper外・#box内には一切コンテンツは置かれていません。
そのため、通常であればtext-align:leftが優先されるはずです。

親記事本文が置かれる前にも幾つかのdivが存在していますが(たとえばdiv.sticker……画面右上に記事タイトルを貼り付けている部分です)、これらはいずれも閉じています。
親記事は(その他の記事も)全てdiv#wrapperの直下に書かれていることになります。
つまり、ここで</div>を書き入れれば、その後は全てdiv#wrapper外・div#box内=中央寄せになってしまうはずです。

試してみましょう。
さて、どうでしょうか?できているでしょうか?
中央寄せで、少し大きな文字になっていますね。
このままの状態で残しても構わないのですが……idは二度使えませんから、この後の文章を再びdiv#wrapper内に含めることもできなくなってしまいます。
そのため、ここでは一度編集によって</div>の記述を削除することで、状態を元へと戻すことにします。
(後で見ても「何も起きてない」ようにしか見えませんけどね)

04/16 15:04    

4  no name

(2)次に検証するのはh1です。
ですが、これはまずあり得ないでしょう……
なぜなら、このタグは酷い修飾が施されていて……見た方が早いかな?

これがh1です。
笑っちゃいますよね。これが混ざってて気付かない筈がない。
ちなみに、これ何処で使ってるかパッと思い出せた方は凄いと思いますよ。
暇な方は探してみてくださいね。


ちょっと読みづらいので改行を入れますね。



このくらいかな?
h1を閉じた後はフォントサイズが大きめにはなっているものの、左寄せにはなっているようです。
h1(ヘディング・コンテンツ)はフレージング・コンテンツと入れ子になりませんから、この開始によってp.mainは終了し、h1の終了と共にdiv#wrapperの直下になっている状態だからですね。

04/16 15:12    

5  no name

(3)p.next .cate .centerが置かれている
p要素同士は入れ子になりませんから(本来の役割はパラグラフ≒段落を示すため)、p.mainが自動生成されるため、他のp要素がここまで出てくることはまず無いでしょう。
わざわざpを置いたなら気付きそうなものです……
ですがこれらはクラスのため、クラスの並立で気付かずに使ってしまっている可能性があります。
親記事の一部を修飾する目的で近い・似た・クラス名を含むクラス名を使っていませんか?
たとえば、p class="communicate"とするところに誤って空白が入り込み、p class="communi cate"となっていたりすると、このp要素はクラスcommuniとクラスcateの両方に属していると宣言していることになります。

と言うわけで、試してみましょう。
これが.communi+.cateの部分です。
.communiはcssの記述がありませんから、実質的にcateだけが働いている状態ですね。cateはフォントサイズを小さく設定しているため、これでは無さそうです。


そして、それを終えた後がこちら。左詰めだけど少し大きなサイズ……前述の「div#wrapper直下」の状態ですね。

p要素を使っているなら全てのクラス名を一度精査してみてください。

04/16 15:22    

6  no name

(4)addressを使っている
address要素は本来ならば、そのコンテンツの連絡先……つまり、そのスレッドを立てた人ではなく、その掲示板の所有者・管理者の連絡先などを記述するための要素です。
これを勝手に使うのは「私が責任者でござい」と騙るに等しい行為なので、実験とはいえ実演は控えさせていただきます。
なお、このスレッドでは一番下の……(C)i-edenと記された部分がそれに当たります。フォントサイズは小さめですから、これも違うのでしょう。

04/16 15:43    

7  no name

>>1 >>2 ご返答有難うございます、お二人からご指摘いただいた通りまず初めに文字列を掲載しておくべきでしたね、失礼いたしました。また>>2様におかれましてはこちらの不手際にも関わらず、解決への手引きとして幾つかの予測を立てていただき感謝です。修正箇所が無いか見直してみた所、仰る通り(1)で挙げていただいた< /div>で括ってしまっていたのが原因でした。

04/16 15:49    

8  no name

(5)body要素が……?
まあ、これは試した方が早いでしょうね。
どうでしょう?なにか変化がありましたか?
body要素が示すのはhtmlのうち表示部分…ということなのですが、これを何度入れ子にしようが、何度終了させようが、特に何の変化もないのです。

04/16 15:49    

9  no name

はい!無事に中央寄せから解放されました、有難うございます。色々と記述していただいたものに関しましてはまだまだ勉強不足な為、ぜひ参考にさせていただければ幸いです。

04/16 15:54    

10  no name

おおっと、遊んでいる内にお返事が来てましたね。無事解決したようでなによりです。

04/16 15:56    

11  no name

自在に貴方様のように使いこなされてる方を見るとやはり楽しそうでつい手を出したく‥。笑 それでは今件につきましては誠に有難うございました!

04/16 16:04    

12  no name

spanクラスだけで作成でいいんじゃないの?

04/17 09:58    

13  no name

確かに、やろうと思えばそれだけでもそれなりのものはできると思います。
たとえば、spanだけでさえ中央寄せすることだってできるでしょう……
たとえば、このような方法で。
それとも、このような?
先の問題解決に当たっても、原因の究明を放棄して「p.mainをもう一度作る」、あるいは「望む修飾に合わせたp.○○を新たに作る」ことでも表面上は対処できたはずです。

ですが、それでは結局問題の原因を解決できていません。
先の例で言えば「div#wrapperを閉じてしまっていた」ことに気付かないままだと言うことですね。
それでは再びp.mainが途切れる度に、つまり、details要素やdiv要素を使う度に、以後のコンテンツの属する要素がdiv#wrapper【左寄せ】ではなく、div#box【中央寄せ】になってしまいます。

原因を見極めた上で正しく対処する方が後々になって思いもしない影響が出ることを抑えられますし、不要・無用な要素や修飾を省くことにも繋がります。

04/17 11:47    

    

スレッド一覧  

雑談趣味別なりきりアダルト
全カテゴリ一覧

… ヒトリゴト …


リニューアル版

 TOP

(C)i-eden