• ベストアンサー

cssを使ってHPを作っているのですが。

ＨＰを作り始めてまだ何日かという段階なのですが、ひとつ悩みがあり、御質問させていただきました。 知ったばかりのCSSを使ってつくっているのですが、<h2></h2>でカテゴリーへのリンクをつくり、その真下に<body>によるカテゴリーの簡単な説明を入れたいのですが、<p>や<br>など何も入れてないのに、スペースが出来てしまいます。また<h2></h2>で囲んだリンクを<table>で囲もうと思ったのですが、それもやはりリンクだけをうまく囲まずに、リンクの下に空白のスペースを作り、正方形のように囲まれてしまいます。 これはどうにかしたら解決できるのでしょうか？ わかりにくくて申し訳ないですが、御回答お願いします。

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

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

再び#1です。 間違えた。 ><p></p>でくくると当たり前ですが、スペースが出来てしまいます。 ブロックレベル要素pにもmarginやpaddingが設定されているからです >これは文法違反ですよね？ ISO-HTML,HTML 4.01 Strict,XHTML 1.0 Strict,XHTML 1.1ではbody要素直下にはブロックレベル要素しか置けないから文法違反です。(TransitionalやFramesetでは許容されているが、これは過去との互換性のために残されているだけなので推奨しません) >また<dl></dl>を使ってないのに、いきなり<dd></dd>でくくるのもやはりおかしいですよね？このような場合はどうすればいいのでしょうか？ くくってみたらいかがでしょう？ <h1>見出し</h1> <dl> <dt>カテゴリ1</dt> <dd>カテゴリ1の説明</dd> <dtカテゴリ2</dt> <dd>カテゴリ2の説明</dd> </dl> と言う感じで。

shinshins
質問者

お礼

ありがとうございます。何度も御丁寧に。教えて頂いたサイトなどを参考に色々と試していたら、自分の思っている形にできました。 ソースも簡潔で観やすいサイトを作りたいとおもいます！

その他の回答 (3)

noname#20378
noname#20378
回答No.3

#1です。 書き方や継承・カスケーディングについては習得済みだと仮定します。 3.1 ボックスモデル http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-01.htm も一応読んでおくといいでしょう。 さて、h2要素はブロックレベル要素であり、通常FirefoxやIE等のデフォルトスタイルシートではおそらくdisplay:block;が掛かり、marginやpaddingもそれなりの値に設定されているために行がスペースが開いて見えています。 もちろんこれらは製作者スタイルシートによって上書きすることが出来ますから margin:0; padding:0; を指定することで実現できることになります

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

CSS で h2 { margin:0; } としてみたらどうでしょうか？ 蛇足ですが、<body> は、使いどころを確かめた方がよろしいかと思います。

shinshins
質問者

お礼

御回答ありがとうございました。 試してみたらこの問題については一応解決出来ました。 そうですね、今は極力<body></body>ではなく、CSS部に書くようにしています。

noname#20378
noname#20378
回答No.1

できたらソースを掲示してもらえないでしょうか？ 場合によってはHTMLの文法をきちんと学びなおすことから始めた方がいいかもしれません 少し時間がかかってもいいなら 良質なテキストサイトの爲のISO-HTML入門 http://kaz.topaz.ne.jp/well/www/isohtml/ 口が悪くてもいいから簡潔に終わらせたいなら 1ページで騙（かた）るホームページ作成 http://www6.plala.or.jp/go_west/beginner/poison/instantpage.htm を勧めます。 html文書内にbody要素は一回しか現れることが出来ず、親や子になる要素にはそれぞれ制約がある、ということは重要なので解ってほしいです。すればおのずと原因も解ってくると思います

shinshins
質問者

補足

御回答ありがとうございます。こんなルールがあったとは全く知らなかったです。本にも書いてなかったので。 さらにひとつ質問なのですが、簡単に書くと、 ～省略～ <body> <h1>見出し</h1> <h2>それぞれのカテゴリー名</h2> とあって、その真下にこの簡単な説明を説明を入れたいのですあ、<p></p>でくくると当たり前ですが、スペースが出来てしまいます。何も付けずに書き始めると上手く表示されるのですが、これは文法違反ですよね？また<dl></dl>を使ってないのに、いきなり<dd></dd>でくくるのもやはりおかしいですよね？このような場合はどうすればいいのでしょうか？

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • htmlとcssがリンクしません

    htmlを独学で学んでいます。いま、cssを作ってhtmlとリンクさせようとしているのですが、できません。もうひとつ他に簡単なhtmlをかいて、そこに簡単なcssをリンクさせようとしたのですがそれでもうまくいきません。以下がぼくが作った簡単なhtmlとcssです。 【html】 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title> aaa </title> <link ret=“stylesheet” href=“style3.css”> </head> <body> <h1> 壁 </h1> <p> htmlとcssがうまくリンクしなくてこまっている。 </p> </body> </html> 【css】 h1{color: #ff0000;} h1のところを赤い文字にしたいのですがブラウザで開いても黒文字のままです。 なにか原因が分かる方はご指摘お願いします。

    • ベストアンサー
    • HTML
  • HPのCSSについて

    超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { 　height:100%; } body { 　margin:0px; 　height:100%; } #body { 　width:700px; 　margin:0px auto; } #header { 　background:#ccffcc; 　height:100px; /*　width:100%;*/ 　width:700px; 　position:fixed; } #main { 　padding-top:100px; 　background:#ffff99; } #footer { 　background:#ffcc99; 　height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>

  • CSSでフォントの大きさを指定するとき

    CSSでフォントの大きさを相対指定したいのですが、Bodyでフォントサイズを８０％にすると、テーブルの中はもとのままの１００％の大きさです。そこで、Tableのフォントサイズも８０％にすると、0.8*0.8したようにさらに小さくなってしまいます。 たとえば、下のようなページだと ----------------------------- <BODY> あいうえお<BR> <TABLE> <TR> <TD>アイウエオ<BR> <TABLE> <TR> <TD>aiueo<BR> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> ----------------------------- 「あいうえお」が８０％の大きさで、「アイウエオ」はさらに小さく、「aiueo」はゴミのように小さくなってしまいます。 どのように指定すれば良いのでしょうか？よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。　尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSが反映されません。

    当方html＋cssの練習中の者です。 いままでは、WindowsXPのメモ帳でhtmlとcssを手打ちして、chromeとIE8で開いて確認していました。 そして今週、Windows7に乗り換え、練習で作成したhtmlを開いたところ、 デフォルトスタイルシートの状態で表示されました。 ・　htmlとcssは同じフォルダに収めてあります。 ・　ファイル名は、「○○.html」と、「style.css」で、エンコードはどちらもUTF-8です。 ・　ブラウザはIE10で、設定は何もいじってない、デフォルトの状態です。 ・　chromeでも試しましたが、同じくCSSは反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝↓htmlです↓＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8> <title>あきまん - プロの画力向上法まとめ</title> <Link rel="stylesheet" href="style.css"/> </head> <body> <header> <h1>プロの画力向上法まとめ</h1> </header> <article> <h1>あきまん</h1> <h3>方法論：量　長期戦 <br>出自：東京デザイナー学院中退　→　アニメーター　→　株式会社カプコン入社　→　イラストレーター</h3> <h2>どうすれば絵が上手くなりますか？</h2> <p> 本心にうまくなりたかったら <br>～以下省略～</p> </article> <footer> <small>Copyright &copy; WATASHI no NAMAE, all right reserved.</small> </footer> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝↓CSS↓＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ body {font-family: 'メイリオ', 'hiragino kaku Gothic pro', sans-serif; background-color: lightgray} h1 {font-size: 38px} h2 {font-size: 29px} h3 {font-size: 21px} p {line-height: 1.15} ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 手打ちなのでミスがあるかとも思って インターネットでhtmlやcssの解説をしているサイトからコピー＆ペーストしたりしましたが、 結果は同じでした。 仕事でhtml使わなきゃいけないので、こんな最初の段階で止まってるわけにいきません。 ご回答をよろしくお願いします。

    • ベストアンサー
    • CSS
  • css　classとidの使い方

    あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> 　</BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }

    • ベストアンサー
    • HTML
  • CSSでの記述についてです。

    CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 １、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 ２、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 ３、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。（それを保ちたいのです） ４、しかしひとつ階層が上の（フォルダ外）のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- ＜間隔がきちんとある方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br> 　　　<a href="torikago1.html">戻る</a> 　　　<a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- ＜間隔が狭くなる方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート＞文書フォルダ　となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか？ 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。

  • cssが読み込まれません。

    VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }

    • ベストアンサー
    • HTML
  • 外部CSSがうまく表示されません

    下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }

  • 適用されているはずの外部cssが適用されない。。

    すみませんが教えてください！ dreamweaver8でテーブルとcssでサイトをつくっているんですが、 ある一部分だけ全くcssが効きません。 <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="menu_page.css" rel="stylesheet" type="text/css" /> ↑このページで使っているcss 　　#2f-txt { 　　margin-top: 20px; 　　margin-right: 10px; 　　margin-bottom: 20px; 　　margin-left: 0px; 　　} 　　#2f-txt p { 　　font-size: 13px; 　　color: #FFFFFF; 　　text-align: right; 　　} ↑menu_page.cssの方に書かれてます。 <table width="390" border="0" cellspacing="0" cellpadding="0"> <tr> <td ><h2></h2></td> </tr> <tr> <td> 　　　　　　　　　　<table width="390" id="2f-txt"> 　　<tr> 　　　<td> 　　　　　　　　　　　　　<h3><p>ここのテキスト</p></h3> 　　　　　　　　　　　　</td> 　　　　　　　　　　　</tr> 　　</table> </td> </tr> </table> ↑id="2f-txt"のテーブル・テキスト等にかけたい ※見にくくてすみません・・・ dreamweaverのデザインビュー上ではしっかり効いているんですが、 ブラウザで見るとmenu_page.cssに書いてある#2f-txt ・#2f-txt p が全く効いていません。 他のページでも同じような使い方をしている箇所があるんですが、 そこは問題ありません。いろいろと試してはみたんですが、全くだめで、どういうことか全く分かりません。 まだレベルが低いんで、簡単なミスかもしれませんが、 すみませんが、どなたか分かる方いらっしゃいますでしょうか？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する