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

ブロックレベル要素の行揃え

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんブロックレベル要素の行揃え
asked 5年 ago

P159のtext-alignプロパティでロゴ画像を中央に配置させようとしたところ
うまくいきません(左側のままです)。
IE11を使っています。
中央に配置するには、どうしたらよいかご教授ください。

7 Answers
狩野 祐東 Staff answered 5年 ago

まず、ロゴの部分のHTMLが、

<h1><a href="index.html"><img src="..."></a></h1>

になっていることを確認してください(上記ソースは一部省略。P.67あたりを見ながら、タグの順番が合っているかどうかをチェックしてください)。

その上で、もう一度、CSSの記述が正しいかどうか確かめてみてください。たとえば、スペースを空けようと思って全角スペースを入れていたり、途中のコロンや行末のセミコロンが抜けていないかどうか確認します。

それでもうまくいかないようであれば、もう一度ご連絡ください。

answered 5年 ago

お返事ありがとうございます
確認しましたが、うまくいきません。

狩野 祐東 Staff answered 5年 ago

P.157くらいまではできていますか? もしどうしてもだめなようなら、該当部分のソースを見せてください。このコメントフォームの「code」ボタンをクリックしてからソースをはりつけ、終わりの部分でもう一度「code」をクリックしてください(セキュリティの関係上、通常のHTMLソースのままでは送信できないので)。

answered 5年 ago

フォーラムシステムの調子が悪いため、ソースコードは削除させていただきました。

answered 5年 ago

フォーラムシステムの調子が悪いため、ソースコードは削除させていただきました。

以上、よろしくお願いします

狩野 祐東 Staff answered 5年 ago

HTML

  • フォームにはりつけたときに変わった可能性がありますが、見る限りでは、かなりの数のダブルクオートが全角または違う字になっているようです(たとえば:<meta charset=”UTF-8″>)。必ず半角で入力します。
  • すべてのコメント文が<!––>になっているようですが、正しくはハイフンが2つで、<!---->です。
    また、ハイフンが全角のようです。<!-すべて半角で入力します。
  • <div class=”wrapper>のダブルクオート、「wrapper」の前が全角、後ろがありません。

CSS

  • 1行目、@charset “utf-8″;のダブルクオートが全角または違う字になっているようです。CSSも必ず半角で入力します。
  • h2の{}内、14〜16行目、margin-right: 0px, margin-bottom: 20px, margin-left: 0pxの終了セミコロンがありません。「;」がないと、多くの場合CSSは正常に動いてくれません。

はじめのうちは、入力したソースの間違いを探すのは難しいと思います。正しく表示されないなと思ったら、HTMLやCSSの検証サービスを使うと、わりと簡単に間違いを見つけられます。

HTMLの検証(英語ですが間違い探しには使えると思います。日本語のHTMLも検証できます)
http://validator.w3.org

CSSの検証(こちらは日本語です。結果が分かりづらいですが、指摘された行数をたよりに直し、間違いがなくなるまで検証を繰り返すとよいでしょう)
http://jigsaw.w3.org/css-validator/

answered 5年 ago

お騒がせしました
HTMLの
<div class="wrapper>のダブルクオートをつけたら、解決しました
今後とも少しずつ勉強していきます
ありがとうございました