- ベストアンサー
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> ※回答の際には上記タグを改良してお答え願います。
- beginner_w
- お礼率55% (91/164)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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; } となります。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
No.2-3です。 No.2へのお礼と行き違いになってしまいましたので、またまた連続投稿ですみません。 > 自分は元々電算写植の職人だったということもありまして、どうも細かいところまで考えてしまうクセが残ってるようです。 奇遇ですね。実は…私もです。大昔の事ですが。 > HPはもっとアバウトな考えでやったほうがいいのかもしれませんね。 いえ、計算方法に関してはNo.3で追記した事でもおわかり頂けると思いますが、こちらの世界も本来は厳密なものですよ。1pxの計算の解釈違いでカラム落ちが発生する事もままありますから。 ただ、画像のクオリティや細かさをどこまで追求するか…に関しては何せ印刷物とスクリーンではメディアの性質が違いますから、考え方の切り替えが必要なところはあると思います。
- abril
- ベストアンサー率69% (388/560)
現在、 #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プロパティによる単色のラインもなんか大して区別付かない様な気もしますが…
お礼
早速やってみます！ 専門家のご意見ありがとうございます＾＾ ＞＃ただ、幅1pxだと「格好のいい縦ライン」もborderプロパティによる単色のラインもなんか大して区別付かない様な気もしますが… たしかにｗｗｗ 自分は元々電算写植の職人だったということもありまして、どうも細かいところまで考えてしまうクセが残ってるようです。HPはもっとアバウトな考えでやったほうがいいのかもしれませんね。 ありがとうございました。
- TanakaHiro
- ベストアンサー率62% (247/396)
単純に・・・ #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; background-image: url("幅700pxの画像.gif"); background-repeat: repeat-y; } ・・・ではダメでしょうか？
お礼
早速やってみます。 なるほどバックグラウンドに配置してリピートという手がありましたね・・ いま思い出しました＾＾； ありがとうございます。
お礼
お返事が遅くなりまして申し訳ありませんm(__)m 標準準拠モード／後方置換モードということは学習しておりませんでした。前者後者において用意する画像の幅が違うようなので、興味もあるしちょっと調べてみたいと思います。 質問のほうは無事解決いたしまして感謝しております。 これからもまたアドバイスしてください！ こちらとしては初めての専門用語なども出てくると、その分難しくて初心者のわたしには中々理解できませんが、知的好奇心が刺激されてますます興味が湧きます。 これからもよろしくお願いします(^^)v