タグ・デザイン掲示板

記事 1 へのレス：
>>0
>>▼カラーコード（「#」+「英数字」で色を表すコード）
有彩色は
🔹#ff7b5a　（オレンジ色）
🔹#bbbcde　（濃い紫）
🔹#e6e6fa　（薄い紫）
の3種類ですね。

ついでに、3ケタのカラーコードは全部無彩色で
『#fff（白）』『#eee（薄いグレー）』『#555（濃いグレー）』
です。

ちなみにカラーコードをGoogleで検索すると、一番上にそのコードが表す色を表示してくれるので、ご参考までに。（→添付画像）

一応、>>0の各有彩色に目印を付けたCSSを置いときます。

━━━━━━━━━━

<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Pacifico|Varela+Round ');

@font-face
{
font-family: IPAex明朝;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff2')
format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。

http://ipafont.ipa.go.jp/ipa_font_license_v1.html

-------------------------------------------------*/

body {
background: #fff;
color: #555;
font-size: 12px;
font-family: 'Varela Round', 'メイリオ', sans-serif;
line-height: 200%;
letter-spacing: 2px;
margin:0;
padding:0;
text-align: center;
}

a, a:hover {
color: #ff7b5a/* オレンジ色 */;
text-decoration: none;
}


h1 {
color: #555;
font-size: 16px;
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
line-height: 100%;
letter-spacing: 0;
margin: 70px auto 20px;
padding: 0;
font-weight: 200;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
letter-spacing: 5px;
line-height: 200%;
}

h2 {
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
font-size: 14px;
position: relative;
color: #555;
display: inline-block;
margin: 23px 0;
}

h2:before {
content: "";
position: absolute;
background: #e6e6fa/* 薄い紫 */;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

input[type] {
font-size: 12px;
color: #555;
background: #eee;
padding: 2px 3px;
margin: 20px 3px 0;
border: none;
width: 60px;
line-height: 180%;
letter-spacing: 2px;
height: auto;
-webkit-appearance: none;
box-shadow: none;
text-shadow: none;
text-align: center;
}

input[type=submit] {
width: 60px;
color: #fff;
background: #bbbcde/* 濃い紫 */;
border: solid 1px #fff;
border-radius: 3px;
cursor: pointer;
}

.wrp {
max-width:600px;
margin:10px auto;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.top {
position: relative;
padding: 10px 20px;
margin: 30px auto 30px;
background: #e6e6fa/* 薄い紫 */;
width: 250px;
border: solid 1px #fff;
box-shadow: 0 0 0 3px #e6e6fa/* 薄い紫 */;
text-align: left;
}

.top:before, .top:after, .top p:before, .top p:after{
width:22px;
height:22px;
background:#fff;
border-radius:50%;
position:absolute;
content:"";
}

.top:before{
top:-14px;
left:-13px;
position:absolute;
content:"";
}

.top:after{
top:-14px;
right:-13px;
position:absolute;
content:"";
}

.top p:before{
bottom:-13px;
left:-14px;
position:absolute;
content:"";
}

.top p:after{
bottom:-13px;
right:-14px;
position:absolute;
content:"";
}

.list {
margin: 20px 20px;
width:250px;
}

.list a {
padding: 3px;
margin: 3px;
display: block;
border-bottom: solid 1px #eee;
color: #555;
}

.text {
max-width:600px;
margin: 70px auto 10px;
padding: 20px 25px;
font-size: 13px;
line-height: 250%;
text-align: left;
}

.ft {
max-width: 600px;
text-align: center;
margin: 10px auto 20px;
border-top: 3px double #e6e6fa/* 薄い紫 */;
padding-top: 10px;
}

</style>