ｃｓｓでborderを2重に表記

.maincontentstop {
margin-top:15px;
border:3px solid lightgray;
outline:2px solid lightgray;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;
}

上記のコードは、borderとoutlineで、線を２重に表示したいのですが、
出来ませんでした。
marginの設定などが必要なのでしょうか。

kei344

2017/01/21 12:47

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答3件

このようにするといけるとおもいます。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        div {
13            width: 100px;
14            height: 100px;
15        }
16
17        .maincontentstop {
18            font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
19            margin-top: 15px;
20            padding: 10px -20px 5px 10px;
21            border: 3px double lightgray;
22            outline: 2px solid lightgray;
23        }
24    </style>
25</head>
26<body>
27<div class="maincontentstop">
28
29</div>
30</body>
31</html>

投稿2017/01/21 12:24

s8_chu

総合スコア14731

ベストアンサー

こんばんは

単純に二重線にするなら
.maincontentstop {
margin-top:15px;
outline:2px lightgray double;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;
}
でいいと思います。

投稿2017/01/21 11:44

bybalsender

総合スコア33

tidavest

2017/01/21 11:52

2重線になりませんでした。何か、相性みたいなものからでしょうか。

yamato_hikawa

2017/01/21 15:57

3px以上じゃないと二重線にはならないかなと。

tidavest

2017/01/22 00:05

ありがとうございます。解決いたしました。

行動規範の内容に同意します

またはこちら

.maincontentstop {
margin-top:15px;
border:3px lightgray double;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;
}

投稿2017/01/21 11:47

bybalsender

総合スコア33