スクロールボックス内の文字の左側の部分に少し隙間を開けたいです。上の部分と、スクロールバーのある、右側の部分の隙間は自然な感じに空いているのですが、文字の左側の隙間が全く空いていなく、少し不自然な感じがします。付属画像の緑色のスクロールボックス内の文字の左側に少し隙間を開けたいです。付属画像の青いスクロールボックスの左側のように隙間を開けたいです。ちなみに緑と青のスクロールボックスの大きさと文字の大きさも同じです。画像の青いボックスの文字は他社のサイトなので隠しています。どうしたらよいでしょうか？困っています。コードは下にあります。 ○○HTMLコード名前：利用規約 (以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。第1条 (定義) 入力画面へ戻る ○○○CSSのコード「kiyaku CSS」 /*スクロール内のボックスの指定*/ .main{ width:550px; height:350px; border: 2px solid #63e02d; overflow: auto; margin: 30px auto; 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; }

スクロールボックス内の文字の左側の部分に少し隙間を開けたいです。上の部分と、スクロールバーのある、右

解決済

質問者：pjdmgam
質問日時：2021/04/26 08:29
回答数：1件

スクロールボックス内の文字の左側の部分に少し隙間を開けたいです。上の部分と、スクロールバーのある、右側の部分の隙間は自然な感じに空いているのですが、文字の左側の隙間が全く空いていなく、少し不自然な感じがします。付属画像の緑色のスクロールボックス内の文字の左側に少し隙間を開けたいです。付属画像の青いスクロールボックスの左側のように隙間を開けたいです。ちなみに緑と青のスクロールボックスの大きさと文字の大きさも同じです。画像の青いボックスの文字は他社のサイトなので隠しています。

どうしたらよいでしょうか？困っています。

コードは下にあります。

○○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{
width:550px;
height:350px;
border: 2px solid #63e02d;
overflow: auto;
margin: 30px auto;
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;
}