• ベストアンサー

CSSでのセンタリング

いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml">​ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。

  • HTML
  • 回答数4
  • ありがとう数3

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

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.3

No.2です。 確認し忘れましたが、質問者様のコンテンツは標準準拠モード／後方置換モード、のどちらでしょうか。 #box { width: 700px; border-right: 1px solid #000000; border-left: 1px solid #000000; } 上記の指定は、ボックスモデルにおいて、前者であれば「borderの太さはそのボックスに指定されたwidthの値の外側に」描画されるので、<div id="box">内包するコンテンツ部分（仮に【B】とします）</div>の、【B】が700pxの幅で描画され、左右ボーダーはその外に1pxづつで描画されます。 しかし後者であれば「borderの太さはそのボックスに指定されたwidthの値の中に含まれて」描画されるので、<div id="box">【B】</div>では左右ボーダーが700pxの左右両端に1pxづつで描画され、【B】はボーダーの値を引いた残りの698pxの幅で描画されます。 また、背景画像【A】に置き換えた場合、ボーダーと違って【B】は【A】の”上に”描画されますので、重ならない様にボックスの内側に左右余白（padding）を設けてやる必要があります。そして、ボックスモデルにおけるpaddingの値の扱いもborderと全く同様です。 なので、正確には： ■標準準拠モードで描画するなら【B】の描画領域は700pxになるので、 (1)用意する背景画像【A】の幅はNo.2での通り702px (2)#boxに指定する幅は700px (3)ボックスの両端の背景画像部分と内包要素が重ならない様に#boxには新たに左右パディングを1pxづつ指定 ■後方置換モードで描画するなら【B】の描画領域は698pxになるので、 (1)用意する背景画像【A】の幅は700px（透過もしくは背景色と同じ部分が698px） (2)同上 (3)同上 となるので、いずれの場合もCSSの指定は #box { width: 700px; height: 500px; margin: 0 auto; padding: 0 1px; background: url(【A】のパス) repeat-y; } となります。

beginner_w
質問者

お礼

お返事が遅くなりまして申し訳ありませんm(__)m 標準準拠モード／後方置換モードということは学習しておりませんでした。前者後者において用意する画像の幅が違うようなので、興味もあるしちょっと調べてみたいと思います。 質問のほうは無事解決いたしまして感謝しております。 これからもまたアドバイスしてください！ こちらとしては初めての専門用語なども出てくると、その分難しくて初心者のわたしには中々理解できませんが、知的好奇心が刺激されてますます興味が湧きます。 これからもよろしくお願いします(^^)v

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

その他の回答 (3)

  • abril
  • ベストアンサー率69% (388/560)
回答No.4

No.2-3です。 No.2へのお礼と行き違いになってしまいましたので、またまた連続投稿ですみません。 > 自分は元々電算写植の職人だったということもありまして、どうも細かいところまで考えてしまうクセが残ってるようです。 奇遇ですね。実は…私もです。大昔の事ですが。 > HPはもっとアバウトな考えでやったほうがいいのかもしれませんね。 いえ、計算方法に関してはNo.3で追記した事でもおわかり頂けると思いますが、こちらの世界も本来は厳密なものですよ。1pxの計算の解釈違いでカラム落ちが発生する事もままありますから。 ただ、画像のクオリティや細かさをどこまで追求するか…に関しては何せ印刷物とスクリーンではメディアの性質が違いますから、考え方の切り替えが必要なところはあると思います。

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

現在、 #box { （省略） border-right: 1px solid #000000; border-left: 1px solid #000000; } と左右borderのプロパティで指定している部分を「img（gif）で格好のいい縦ライン」に置き換えたスタイルで描画される様にする、というご希望でしょうか。 であれば、W702px×H適当（#boxで指定されている高さが500pxなのでそれ以下。通常は50～100pxぐらいでしょうか。）、の画像を用意します。画像の内容は左右両端の1pxだけが「格好のいい縦ライン」を配置し残りの700px分は透過もしくは<div id="box">～</div>の背景色と同じものを配置します。 あとは、#boxから左右borderの指定を削除し、替わりにその画像【A】をbackgroundプロパティで #box { （省略） background: url(【A】のパス) repeat-y; } としてやれば済みますが。 ＃ただ、幅1pxだと「格好のいい縦ライン」もborderプロパティによる単色のラインもなんか大して区別付かない様な気もしますが…

beginner_w
質問者

お礼

早速やってみます！ 専門家のご意見ありがとうございます＾＾ ＞＃ただ、幅1pxだと「格好のいい縦ライン」もborderプロパティによる単色のラインもなんか大して区別付かない様な気もしますが… たしかにｗｗｗ 自分は元々電算写植の職人だったということもありまして、どうも細かいところまで考えてしまうクセが残ってるようです。HPはもっとアバウトな考えでやったほうがいいのかもしれませんね。 ありがとうございました。

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

単純に・・・ #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; background-image: url("幅700pxの画像.gif"); background-repeat: repeat-y; } ・・・ではダメでしょうか？

beginner_w
質問者

お礼

早速やってみます。 なるほどバックグラウンドに配置してリピートという手がありましたね・・　いま思い出しました＾＾； ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • cssに関して

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSがうまく読み込まれません

    いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css初心者です。プラウザの表示について

    以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • XHTML+CSS IE5.5で見ると崩れる

    皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。

    • ベストアンサー
    • CSS
  • ホームページの上下の隙間を消すには

    左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>

  • CSSーfloatについて

    divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>

  • CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう

    DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }

  • xhtml+cssのfloatの使い方、センタリングの方法

    xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 　　(下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に 　　さらにfloatさせてleft、lightの２つ横並びのボックスを 　　配置することは可能でしょうか？ 　　また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。

  • CSSでの背景色の指定について

    以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }

    • ベストアンサー
    • CSS
  • スタイルシートでテーブル

    とても基本的な事なのですが、 以下のコードを実行すると IE6 で見た時に セルの下に隙間が出来てしまいます。 Firefox 2.0 で確認した場合すっきり表示されてるのですが、 なにかアドバイスありますでしょうか？ ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>[ Picture ]</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #container { width: 750px; border: 1px solid #ccc; background: #fff; margin: 0 auto; } #section1 { text-align: center; background: blue; } #section2 { text-align: center; background: red; } --> </style> </head> <body> <div id="container"> <div id="section1"> <img src="images/picture01.jpg" /> </div> <div id="section2"> <img src="images/picture02.jpg" /> </div> </div> </body></html> -------------------------------------------------------------

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する