スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。
試してみたこと。
下記のURLを参考に https://h110.info/html_box_size/
cssのスタイルシートに
margin-left: auto;
margin-right: auto;
を追加してみても変化がありませんでした。
何か私のやり方が間違っているのでしょうか?
どうしたらよいでしょうか?途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。
画像も付属しておきます。ボックス内の文字一部消しています。
○HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href="kiyaku.css">
<title></title>
</head>
<body>
<form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false">
<p></p>
<div class="row">
<label class="col-sm-2 control-label" for="name">名前:<?php echo $name; ?></label>
</div>
<p></p>
<label class="title2" for="title2">利用規約</label>
</div>
<p></p>
<div class="main">
<p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br>
すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p>
<h4>第1条 (定義)</h4>
</div>
</form>
<p><a href="form1.php?action=edit">入力画面へ戻る</a></p>
</body>
</html>
○CSSのコード「kiyaku CSS」
/*スクロールのボックスの位置*/
.main {
margin-left: auto; /* 中央寄せにするため */
margin-right: auto; /* 中央寄せにするため */
}
/*スクロール内のボックスの指定*/
.main{
width:550px;
height:350px;
border: 2px solid #63e02d;
overflow: auto;
margin: 30px;
color: #63e02d;
}
/*スクロールの幅の指定*/
.main::-webkit-scrollbar{
width: 10px;
height: 10px;
}
/*スクロールの背景の指定*/
.main::-webkit-scrollbar-track
{
border-radius:5px;
box-shadow: 004px #63e02d;
}
/*スクロールのつまみ部分の指定*/
.main::-webkit-scrollbar-thumb
{
border-radius: 5px;
background: #63e02d;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
プルダウンで長い名前の選択肢...
-
【HTML&CSS】フッター下部の余...
-
【HTML】【CSS】【Swiper】 元...
-
float を使うと隙間ができる
-
<li>の黒い点を消したい。
-
CSS テキストフィールドの文字...
-
テーブル内の画像をマウスオー...
-
CSS、width100%でもできる余白
-
古いIEでレイアウト崩れます。
-
marginとナビゲーションの位置...
-
CSSのposition値の上書き(打消...
-
IEとFireFoxでの指定位置のズレ...
-
CSSの角丸での質問です。 今、C...
-
HTMLのiframeの入れ子について
-
DIVの入り子のwidthの指定方法
-
css初心者 フレックスボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報