締切済み

コンテンツを真ん中に縦線を左右に引くには？

2022/05/20 15:23

いつもお世話になりありがとうございます。標記の件。 CSS .v_line_fix { margin-left: 100px; width: 5px; height: 150px; background-color: brown; } HTML <div class="v_line_fix"></div> だと、単独で縦線が引かれてしまいます。 https://cc.musabi.ac.jp/kenkyu/cl1/html5/css_lay03.html 上記のホームページの様に、また https://okwave.jp/question/new の様に、コンテンツを中央に区切るにはどうしたらいいでしょうか？ご回答のほど宜しくお願い申し上げます。

KOUZOU2
お礼率25% (25/100)

HTML
回答数5
ありがとう数0

みんなの回答 （5）
専門家の回答

みんなの回答

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/05/20 19:16 回答No.5

色々やり方があるので、適材適所でＣＳＳ選んでみてくださいね。どっちにしても、PC/SP対応やメディアクエリなどもやり始めると、奥はかなり深いので。人によって画面のサイズは違うので、ピクセルでは、表せない世界だってのをな～んとなく、感じてもらえたらいいかなって感じ。あと、centerタグがありましたが。これ上のdivにtext-align:center;って書くだけで省略できるなども。ちなみ、DIVじゃなくてSPANなら、CENTERタグ受け付けるので、簡単に真ん中表示できるとも言えます。あんまりきれいじゃないHTMLになるので、大抵はやらないけど。表示結果だけあえばそれでいいなら、時に別のタグを試してみるのは、全然ありですよ。なので、やり方がいくつもあるうちの一つを書いたに過ぎないので、ほかの方法も試してみてもよいかとおもいます！。なおさっきのやり方は大きく箱を書いて、両サイドを残したままで別の色でセンタリングされた箱を上に重ねてる＝つまり両サイドに線が描かれたように見える。のやり方です。なので、左側だけに、付箋のように色を付ける？って時は、右側の線を取るだけで完成。使い道は結構あるので、気が向いたら使ってみてもらえたらです。 borderを使うと「三角」になるので、今回はやめました。ってことで、今回はこれにて、失礼しますわ。

ログインすると、全ての回答が全文表示されます。

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/05/20 17:49 回答No.4

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>プログラムOffice</title> <style> .v_line_fix { margin:auto; padding-left:10px; padding-right:10px; background-color: brown; } .v_line_fix .w { margin:auto; background-color: red; white-space: pre; } body{ width: 100%; max-width: 600px; margin: auto; background-color: aquamarine; padding: 10px; text-align: center; color: purple; } div{ /*color: blueviolet; font-size: 30;*/ *} body{ margin-top: 10px; margin-bottom: 70px; } .box21{ padding: 0.5em 1em; background: -moz-linear-gradient(#ffb03c, #ff708d); background: -webkit-linear-gradient(#ffb03c, #ff708d); background: linear-gradient(to right, #ffb03c, #ff708d); color: rgb(5, 4, 4); } .box21 p { margin: 0; padding: 0; } </style> <script> function alertFunction1() { alert("粋な会社で、素敵なＷＥＢサイトを提供致します。"); } </script> </head> <body> <div class="v_line_fix"> <div class="w"> <center> <h1>プログラムOffice</h1> <h3>プログラムOfficeの強み</h3> <div class="box21"> <p> JavaScriptによる高速プログラミング<p> お客様本位で何度でも作り直します！<p> 誠実・質実剛健<p> 業界一位の安値！<p> 親切・丁寧！ </p> </div> <br> <a href="https://www.yahoo.co.jp/">Yahoo Japan</a><p> <a href="https://www.google.com/">Google 検索</a><p> <a href="https://www.apple.com/jp/iphone/">iPhone</a><p> <a href="https://www.apple.com/jp/mac/">Mac</a><p> <br> <h1><a href="https://www.shutterstock.com/ja/search/%E9%95%B7%E5%B4%8E%E5%B8%82"> 長崎画像集・ご覧ください。</a></h1><p> <img src="minato.jpg"><br><br><br><br> <img src="ryouma.jpg"><br><br><br> <h2>プログラムOfficeを一言でいうと？</h2> <p><button onclick="alertFunction1()">ボタンを押して下さい</button></p> </center> </div> </div> </body> </html> 最初の回答と同じで、セレクタで分けただけです。 padding-left:10px; padding-right:10px; background-color: brown; 左右の太さと、線の色を選択。こんだけで、OKです。なお、左右で色を変えたい！って時も、左だけのDIVを形成、その中に右だけのDIVを形成、その中に本文エリアを配置すればいい。というだけです。実際は、position使うほうが早そうですが・・・おまけ：「お客様本位で何度でも作り直します！」要件定義がしっかりできないってニュアンスを与えると思いますよ。質問者さんはいい意味で書いたつもりがマイナスになってるかと。顧客の立ち位置で、考えてみてください。「何度も作り直される」って意味で、むしろ評価は下がるかと。んま、がんばって！

ログインすると、全ての回答が全文表示されます。

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/05/20 16:52 回答No.3

[code] <div~~~~> </div> の中に既に<div></div>が存在します。中央寄せも縦線も引かれません。 [/code] CW風ですが＾＾OKWAVEは未対応先ほどのやつをセレクタで分ければいいだけではあるものの。。今、何か補足が確認中なので、後で再度確認しますが、 2度手間になるので、今どんなソースで、最終的にどうしたいのか？を書いてもらえた方が話がすぐ終わりますよ。確認終了を待つ間、これらを補足してみるのはどうでしょう？特に催促はしないので、おまかせですが。

ログインすると、全ての回答が全文表示されます。

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/05/20 15:45 回答No.2

ログインすると、全ての回答が全文表示されます。

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/05/20 15:38 回答No.1

>コンテンツを真ん中に縦線を左右に引くには？左右に引くのではなく、左右に線があるものをセンターに表示すればOK ここ、「左右に」って言ってるのに、"left"と書いてます。 margin-left: 100px; そうではなく、両サイドに対して均等なマージンを設定。 margin: auto; 後は、両サイドに線がある表示物を <div class="v_line_fix"></div> の中に作ればOK。なお、線だけでいいなら、このDIVの左右に paddingを設定してそれに色を付ければ完成だろうが、最終結果をどうしたいのかわからないので、質問の部分のみ回答。

質問者