BOOK Studio947
狩野祐東・狩野さやか著書

中央配置ができない(P.171)

書籍Q&ACategory: スラスラわかるHTML&CSSのきほん中央配置ができない(P.171)
asked 6年 ago

こんにちは。先日本書を購入し、毎日PCに向かって勉強しています。
とてもわかりやすくて楽しいです。(こういう本を待っていました。)
実習で作成するHPもキレイでオシャレで♪
…が、先程つまづきました…。
p171の中央配置なのですが、できません。IE8だからでしょうか?
それが理由なのでしたら、解決方法を教えて下さい。
それから、私が最終的にしたいのは、ヘッダーとフッターの一括管理です。
どのWebページにも共通のヘッダーとフッターを、更新毎に一括置換?したいのです。
それもCSSでできるのでしょうか?できるかできないかだけでかまいませんので教えて下さい。
お忙しいとは存じますが、どうぞよろしくお願いします。

5 Answers
狩野 祐東 Staff answered 6年 ago

リエコさん、ご愛読ありがとうございます。

ページ全体の中央配置ができない
ページ全体の中央配置はIE8でもできます。できない原因はいくつか考えられますが、P.171のスタイルで肝心なことは、
1) margin right , leftにautoを指定すること(margin: 0 auto 0 auto; となっていること)
2) 中央配置したいボックスのwidthを指定すること
3) 適切なブロックにCSSが適用されていること
です。
1、2については、まずはお書きになったstyle.cssが間違っていないかどうかもう一度確認してみてください。
3については、本書では<div class="wrapper">というdivタグのボックスにP.171のスタイルを適用しています。HTMLの該当部分の記述が正しいか、とくにclass名が間違っていないかなどを確認してみてください(P.76、79)。

ヘッダー/フッターを一括管理したい
おそらく、ヘッダー/フッター各ページ共通する部分のHTMLを一括管理したいということだと思いますが、これはHTML、CSSだけではできません。一括管理をするには、古くからあるSSIというサーバーの仕組みを使うか、CMSと呼ばれるシステムを使う、などの方法があります。SSIのほうが手軽ですが、最近は使えないサーバーも多く、あまり利用しているのを聞きません。主流なのはWordPressというCMSを使う方法です。HTML、CSSをある程度習得して、その次の一歩ですね。

answered 6年 ago

狩野 様
こんばんは。早速の回答をありがとうございます。(感動!)
一字一句確認したのですが…。再度確認してみます。
一括管理の件の回答もありがとうございました。まずはHTMLとCSSを習得しなくては…ですね。

answered 4年 ago

はじめまして。私もこの投稿と同じく中央配置がされません!何度も何度も見直して入力は間違っていないのですが、それでも反映されない時は他に考えられることはありますか?
ちなみにmacを使っています。ほんとにしょうもない質問で心苦しいですがお返事頂けたらうれしいです。

狩野 祐東 Staff answered 4年 ago

ケサコさん、はじめまして。

中央揃えは、ブラウザやOSによって正しく表示されないようなことはないので、もう穴があくほど見たと思いますが、もう一度、HTMLとCSSがきちんと書かれているか調べてみてもらえますか。重点チェックポイントは、このページの「#返信1167」と書かれているわたしの投稿の前半部分です。

また、チェックする場所を特定するポイントとして、次の順序でチェックするとよいでしょう。

1. 中央揃えのためのCSSは正しく書かれていますか(p.172のstyle.css)?
2. HTML、CSSともに、クラス名(wrapper)のつづりは合っていますか?
3. 1、2が正しければ、ほかの箇所が間違っている可能性があります。間違いを探すには、バリデータを使うと簡単です。バリデータのURLを紹介しておきます(英語のページですがチェックはできると思います)。

HTMLのバリデータ
https://validator.w3.org
「Validate by File Upload」タブをクリック→「File:」のボタンをクリックしてHTMLファイルを選択→「Check」ボタンをクリック

CSSのバリデータ(こちらは日本語)
https://jigsaw.w3.org/css-validator/

それでもどうしても直らない場合は、HTMLとCSSをこの掲示板に貼り付けてください。確認します。

answered 4年 ago

狩野 様

早速お返事頂いて感激しました。この本を買ってよかった。
そして解決しました!

入力は間違ってなかったのですが、バリデータというのをして変な記号に気づきまして。
<div class="wrapper">のdivとclassの間のスペースがなぜか□←これの縦長版になっていました。
他のスペースはちゃんと下カッコみたいな記号だったのですがなぜかココだけ・・。

それだけが問題のようでした。
こういう少しのつまづきってやる気なくしてしまうんですけどこういう質問できる場があって助かりました。
もっとがんばってみようと思います。
ありがとうございました。