• ベストアンサー

<h1>タグを使うとレイアウトが

初歩的なことで申し訳ありません HTMLをはじめ他ばかりで右も左も解らない状態です ヘッダー枠の中に<h1>タグを入れタイトルを表示させるとヘッダー枠のマージンがおかしくなりレイアウトが微妙におかしくなります <h>系のタグでは全ておかしくなるのですが、どうしてでしょうか? 改善するにはどうしたらいいでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

#3です。お礼受け取りました。よく見たら訂正があります。 例 <H1 style="margin: 10px 11px 12px 13px; padding: 10px 11px 12px 13px;"> が正しいです┐(´ー`)┌ 前項の数値px列をコピペしたら間違っちゃったw

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

ブラウザやHTMLのバージョンでも違うようです・・・ 見出しH1やH2は、外周と内周の幅が作られます。 見出しって目立ちますよね? だから見出しだと思います。 私も最初苦労しました(T_T)(CSSも知らない時) CSSは、見た目を調整する役割が多いのでtekito-MAXさんには丁度良いでしょう。 回答者のみなさんが書いたCSSですが、使い方が3通りあります。 一番簡単な方法が、HEAD内に <meta http-equiv="Content-Style-Type" content="text/css"> を入れておいて 例 <H1 style="margin: 10px 11px 12px 13px; padding: margin: 10px 11px 12px 13px;"> 見出し</H1> これで1個1個毎に100pxとかに試しに大きく調整してみて下さい。 違いがわかりますよ。 解説は、margin 外側の幅 padding 内側の幅 左の数値から 上幅 右幅 下幅 左幅 マウスカーソウルでなぞると色が反転しますので見えない幅がわかります。 font-size: 1.5em; とかで大きさも調整できます。 慣れてきたらCSSファイルを作ってHTMLにリンクさせると良いです。

tekito-MAX
質問者

お礼

回答ありがとうございました。 <h>は外周が勝手に入っているんですか、納得です

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

><h>系のタグでは全ておかしくなるのです おかしくなるのではありません。 見出しとして機能しているのです。 >改善するにはどうしたらいいでしょうか? 変更することはできても改善ではないですね(ある意味改悪) スタイルシートという仕組みで調整します。 具体的にどうしたいかによりますがたとえば、ページの頭の方に <style> h1{ margin:0px; paddgin:0px; } </style> などと書いておく、だいぶ見え方がかわると思います

tekito-MAX
質問者

お礼

回答ありがとうございました

全文を見る
すると、全ての回答が全文表示されます。
  • mochitora
  • ベストアンサー率28% (78/272)
回答No.1

ブラウザ(の種類/バージョン)によって、 マージン/パディングの出方が違ってきますので、 なにもしないと、思うようにレイアウトできない、 ということがよくあります。 気になる場合はスタイルシートで「0(px)」にしてしまうと良いです。 1ファイル1ファイル、 いちいちHTMLファイルに0pxと書き込むのも大変なので、 外部スタイルシートを別につくり、 まとめて調節するのが簡単です。

tekito-MAX
質問者

お礼

回答ありがとうございました

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • H1タグについて教えてください

    私は今、「お小遣い天国(仮称)」というサイトを作っているとします。 そして、そのサイトにH1タグを埋め込もうとしています。 トップページのH1タグは、当然「お小遣い天国」でOKなのは分かります。 問題は、下位ディレクトリのページです。 そのサイトの全てのページのH1タグを「お小遣い天国」としてしまうと、何かSEO上で不都合なことが起こりえますか? 他のページのH1タグはどうしたらいいんでしょう? もうひとつ質問です。 ヘッダファイルにはタイトルを記入しますよね? そのタイトル文字は、全てのページで同じでいいんですか? 私の場合だと、全てのページタイトルに「お小遣い天国」とだけ書いてればいいんでしょうか? それとも「お小遣い天国 メールで稼ぐ」など、2フレーズを入れたほうがいいんでしょうか。 それとも、メールで稼ぐコーナーだったら、メールで稼ぐというフレーズだけのタイトルでいいんでしょうか?

    • ベストアンサー
    • HTML
  • ホームページビルダー9でタグの入れ方 がわからない

    小生、以前はバージョン6でしたので そのときのHTMLタグの挿入は、 以下の方法でできました。 ◆タグの入れ方 ビルダー画面最上部の 挿入⇒その他⇒HTMLタグ で書き込む窓が現われます バージョン9で同様にすると、 左と右に枠が出てきて、 それぞれ、どう使えばいいか、わかりません、 お願いします、バージョン6と同じやり方は ありませんか? おねがいします。

  • HTMLレイアウトのことについて教えてください

    HTML初心者で右も左も解らないのでよろしくお願いします CSSで左がメニュー、右がコンテンツ部分の2カラムのテンプレートを作成しています、フレームを使用したときのようにメニューを押したら左の部分だけを変えることはできますか? 通常は同じレイアウトにしたい場合はメニューの数だけ同じテンプレートのHTMLを作成する物ですか? そうした場合メニューや同一レイアウトの部分に変更があった場合全てのHTMLを書き直さなければいけないという事ですよね? メニューの数が多い場合や変更がこまめにある場合はは大変になりますよね? 何か良い方法はありますか? 普通はこういった使い方はしないものでしょうか? よろしくお願いします。

  • 【SEO対策】Hタグの使い方(H1,H2~)教えて下さい。

    ↓今、作ろうとしているHPのレイアウトです。 わかるかなぁ・・・、 --------------------    <h1>ヘッダー</h1> -------------------- <h2>メニュー1</h2>|<h3>メニュー4</h3> <h2>メニュー2</h2>| <h2>メニュー3</h2>|<P>ここに詳細</P> <h2>メニュー4</h2>| <h2>メニュー5</h2>| <h2>メニュー6</h2>| <h2>メニュー7</h2>| <h2>メニュー8</h2>| -------------------- 上記のように「h2タグ」を連発するのはSEO対策として 問題ないのでしょうか?(スパム?) もし問題があれば上記以外にどの様にレイアウト すれば良いですか? 教えて下さい。よろしくお願い致します。

  • cssの段組レイアウトについての質問です

    かなり初歩的なことだと思うのですがこのことばかりがひっかかっています ブックオフの立ち読みでcssの本を読んでいたら 段組レイアウトというのを目にしました。 それはまず下敷きにマージン次にパディング、その上に内容を書く・・・というものでした。 一方ネットで調べてみたら、段組レイアウトのやり方のサイトをよんでみると 「ボックスを左と右にわけたり、上と下にわけたりする」だけで、マージン、パディングのことは書かれてなかったんですよね。(そもそも書くまでもないのかもしれませんが) よく3段組レイアウト2段組レイアウトと聞きますがそれは、立体的にとらえて領域をミルフィーユみたいに入れ子させて乗っけてくからなのでしょうか? それともボックスを平面的に並べることが段組レイアウトなのでしょうか? 理解力が足りずどうもよくわからなくて へんな質問ですいません。回答お願いします。

  • H1タグの色を変えたい。

    H1タグの色をCSSで変更したいのですが、上手くいきません。 どこの設定を間違えているのでしょうか? 大変申し訳ございません。ご教授よろしくお願いいたします。 以下にソースを記述します。 /*--- HTMLソース ---*/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title>H1タグ色変更</title> </head> <body> <h1>大見出し</h1> </body> </html> /*--- CSSソース(外部ファイル:index.cssとする) ---*/ @charset "utf-8" h1 {color: #0000ff;}

    • ベストアンサー
    • CSS
  • webのレイアウトについて

    webのレイアウトについての質問です。 フレームを使わずにサイトの一部分のみを一元的に管理するにはどうすればよいでしょうか。 例えば、ヘッダー(上のタイトル部分)、メニュー(左)、コンテンツ(右)という感じにサイト全体が構成されているとしたら、ヘッダーとメニューは全てのサイトに活用し、コンテンツのみページ毎に変えていくようにしたいんです。 その際メニューを更新する時、全てのページを一度に変更できればいいなぁ…と。 今までは全てのページにソースを書いて、メニューが変わったら全てのページのソースを変更してきたのですが、これは決して効率いいとは思えません。 どなたかおわかりになる方、宜しくお願いします。

    • ベストアンサー
    • HTML
  • ライブドアブログの「h1」タグについて。

    ライブドアでブログに作り、CSSをカスタマイズ中です。 カスタマイズ中疑問に思うことがあったので質問させて頂きます。 記事タイトルのタグは標準で「h1」になっていますが、 CSSでカスタム可能な「見出し」にも「h1」が存在します。 HTML4ではh1は一つの記事に1コ?という決まりが 合ったそうですが、HTML5から何個使っても問題ない という仕様になった、という記事を読ませて頂きました。 機能的には問題のないことだと思いますが、SEO的に 記事のタイトルと見出しのタグがかぶることは 何か問題があるのでしょうか? 恐れ入りますが、どなたかご教授の程 宜しく御願い板wします。

    • ベストアンサー
    • SEO
  • ブログカスタマイズ:hタグ変更がうまくできません

    お世話になります。 現在、さくらのブログを利用しているのですが、表題の通り、 hタグの変更が何度やってもうまくできません。 さくらブログのカスタマイズ方法詳細ページがあまりないので、 HTML・CSSの構造が酷似しているseesaaブログのカスタマイズなどを参考にしています。 さくらブログは、ライブドアブログのように、 日時にh2タグが置かれています。 このh2をdivにするなり、spanにするなり、そのまま日時自体を 消してしまうなりすれば、日時にh2がくることはないはずで、 さらに、デフォルトでは記事タイトルにh3タグが置かれているので、 日時のh2をなくすかわりに、記事タイトルをh2に変えたいのですが、 この2つの作業を何度繰り返し再構築しても、 HTML編集画面ではきちんと変更されているものの、 ソースの表示で確認すると、日時がh2、記事タイトルはh3のままで 全くかわっていません。 また、HTML編集画面では、h1タグすら設定されていないに関わらず、 ソースをみると、タイトルがh1タグに自動設定(?)されているのを みる限り、(タイトルがh1になることはありがたいのでこの部分は 全く問題ありませんが)なんらかの形で、自動的にタグがおかれる 仕組みが組み込んであるのではないかと読んでいるのですが… もうお手上げ状態なので、さくらインターネットに問い合わせしていますが、ブログの問い合わせは受けないそうです。。 どなたかご存知の方・・・ ご回答宜しくお願い致しますm(__)m

  • <H>タグの見出しと<P>タグの本文の間隔について

    初めてのホームページ作成に挑戦してます。 スタイルシートでデザインを調整しているのですが、 <H>タグの見出しと<P>タグの本文の間隔をCSSで二つの要素のマージンを0、パディング0にしても文字一つ分の間隔が空きます。ある一定の間隔以上縮めることができません。 また<H>タグと<TABLE>タグの間隔も<P>タグ以上に大きく間隔が開いてしまいそれ以上縮めることができなくて困ってます。 こういうものなんでしょうか? <DIV>タグなら間隔を好きなように調節でます。全て<DIV>タグで見出しも本文も書きたいくらいです。表は無理ですが・・・。

    • ベストアンサー
    • HTML