• ベストアンサー

cssの記述方法について

よろしくお願いします 現在、HTMlとcssで構成したホームページの勉強をしております。 私は、参考書を見ながら作成しているのですが、もしかすると所々に 不要な記述などがあるかもしれません。よろしければご指導頂けませんでしょうか? まずは下記のサイトをご覧頂けませんでしょうか? ​http://technocompany.web.fc2.com​ ソース内の様々なところに<div id="header">や<div id="fontcolor5"> <div id="photo3">と設定をしておりますが、このまま作成を進めていくと、<div id="ooooo>等がどんどん増えていきますが、その点は特別問題は無いものなのでしょうか? 私は、もっとまとめて設定が出来ないものかと考えていたのですが、それは難しいものでしょうか? 現在、困っている内容と致しましては中央揃えしたい画像に対して<div>~</div>で囲んでtext-align: centerを指定しても 完全に中央に寄らないようです。右のほうが余白が多く空いているように見えます。 例えば画像は全て中央揃えとか、文字はwidthを設定して700pxとか 一部の文字についてはwidth800px等・・・まとめて設定するのは難しいものでしょうか? また、前回、他の方に御指導いただいたのですがcssの記述なのですが、marginやpaddingは余白だと思いますが、 その他の部分が何を意味しているのかが分かりません。 今後のためによろしければご指導頂けませんでしょうか? 【CSS】 ul.hoge { list-style: none; margin: 0; padding: 0; } ul.hoge li { min-height: 20px; _height: 20px; margin: 0 0 1em 0; padding: 0 0 0 25px; background: url(img/ANI_059.gif) left top no-repeat; }

  • pcckit
  • お礼率76% (472/621)

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

  • ベストアンサー
  • kuroizell
  • ベストアンサー率55% (95/170)
回答No.2

div { margin: 0px padding: 0px } .center { text-align: center } .W700 { width: 700px } .W800 { width: 800px; text-align: left } <div class="center">  <img src="./foo.gif">  <div class="W700">これはfooです。</div>  <img src="./bar.gif">  <div class="W800">こっちのbarは、文章だけ左寄せです。</div> </div> こんなカンジ? あまり恣意的に増やさず、事前にどのようなスタイルが必要かある程度まとめておいた方が良いと思います。

pcckit
質問者

補足

ご回答ありがとう御座いました。大変恐縮ですが再度ご指導頂けませんでしょうか? 以下のようなcssを書いてみました。 <ul style="list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); list-style-position: outside"> <li>テスト</li> 上記のようにしたところ、■テスト と表示はされたのですが■の部分が、右側によってしまい左側に余白が出来てしまいました。 padding: 0pxとしてみたのですが全く換わりません。 また、IEとfirefoxでの表示を同じにすることは出来ないのでしょうか? Firefoxでは枠ごと中央揃えになるのですがIEでは枠が左に寄ってしまいます。 何か良き方法御座いましたらご指導の程よろしくお願いします。

その他の回答 (1)

  • atsushifx
  • ベストアンサー率50% (9/18)
回答No.1

まずはボックスモデルとcssの意味を理解する必要があります。 cssの基礎なので、これを理解することが上達の早道です。 ボックスモデルを簡単に説明すると、文章をいくつかのブロックの塊として考えるのがブロックモデルです。 <div id="xxx"> が、典型的なボックスですが、<ul>,<table>などもボックスとして扱われます。 このボックスを修飾するのがcssです。 あとはcssリファレンスを見ながら試してみるのがよいでしょう 参考としては、 ThinkIt 【即実践!HTML+CSS】 http://www.thinkit.co.jp/article/39/1/ スタイルシートリファレンス http://www.htmq.com/style/index.shtml があります。 読んでみてください

pcckit
質問者

補足

ご回答ありがとう御座いました。大変恐縮ですが再度ご指導頂けませんでしょうか? 以下のようなcssを書いてみました。 <ul style="list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); list-style-position: outside"> <li>テスト</li> 上記のようにしたところ、■テスト と表示はされたのですが■の部分が、右側によってしまい左側に余白が出来てしまいました。 padding: 0pxとしてみたのですが全く換わりません。 また、IEとfirefoxでの表示を同じにすることは出来ないのでしょうか? Firefoxでは枠ごと中央揃えになるのですがIEでは枠が左に寄ってしまいます。 何か良き方法御座いましたらご指導の程よろしくお願いします。

関連するQ&A

  • javascript cssの値を取得、変更

    タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか? 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例: <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか?少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか?よろしくお願いします。

  • CSSの左横に隙間ができてしまいます。

    画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->

    • ベストアンサー
    • CSS
  • CSSについて 入力フォームの上下揃い

    CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう?

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • テキストの揃え方について

    CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

    • ベストアンサー
    • CSS
  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか? テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" />  <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" />  <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい

    cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします

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

    CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。 どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------

    • 締切済み
    • CSS
  • 【css】marginについて質問です。

    現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 (一部だけ抜粋しています) 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all>    <div id=container>    </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか?教えてください。

  • CSS、width100%でもできる余白

    CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか? また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}

    • ベストアンサー
    • CSS