質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1218閲覧

スクロールボックスを中央に配置できない。

ghtew2

総合スコア245

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/25 03:20

実現したいこと

スクロールボックスを中央に配置したい。

試してみたこと。

下記のURLを参考に

https://h110.info/html_box_size/

cssのスタイルシートに
margin-left: auto;
margin-right: auto;
追加してみても変化がありませんでした。

何か私のやり方が間違っているのでしょうか?Visual Studio CodeでGo Liveで観覧してみても、スクロールボックスが中央に配置されていません。

どうしたらよいでしょうか?途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。

**画像も付属しておきます。**ボックス内の文字一部消しています。

環境
プログラミングソフトVisual Studio Code
windows10

イメージ説明

html

1<!DOCTYPE html> 2 <html> 3 <head> 4<meta charset ="utf-8"> 5<link rel="stylesheet" href="kiyaku.css"> 6<title></title> 7 8 9</head> 10 <body> 11<form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false"> 12<p></p> 13<div class="row"> 14<label class="col-sm-2 control-label" for="name">名前:<?php echo $name; ?></label> 15</div> 16<p></p> 17<label class="title2" for="title2">利用規約</label> 18</div> 19<p></p> 20 21<div class="main"> 22 23<p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br> 24すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p> 25 26<h4>第1条 (定義)</h4> 27 28 </div> 29 30</form> 31<p><a href="form1.php?action=edit">入力画面へ戻る</a></p> 32 </body> 33</html>

(◎◎kiyaku.css)

css

1/*スクロールのボックスの位置*/ 2.main { 3 4 margin-left: auto; /* 中央寄せにするため */ 5 margin-right: auto; /* 中央寄せにするため */ 6 } 7 8 9 10 11/*スクロール内のボックスの指定*/ 12.main{ 13 width:550px; 14 height:350px; 15 border: 2px solid #63e02d; 16 overflow: auto; 17 margin: 30px; 18 color: #63e02d; 19 20 21} 22 23/*スクロールの幅の指定*/ 24.main::-webkit-scrollbar{ 25 width: 10px; 26 height: 10px; 27 28} 29/*スクロールの背景の指定*/ 30.main::-webkit-scrollbar-track 31{ 32 border-radius:5px; 33 box-shadow: 004px #63e02d; 34} 35/*スクロールのつまみ部分の指定*/ 36.main::-webkit-scrollbar-thumb 37{ 38 border-radius: 5px; 39 background: #63e02d; 40} 41

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決出来ました解決出来ました

投稿2021/04/25 05:03

ghtew2

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問