Created
October 7, 2017 20:02
-
-
Save milk19873/89505f1065700db76fe26c4c0ecc583d to your computer and use it in GitHub Desktop.
CSS例
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 見出し用 */ | |
h2 { | |
padding: 0.5em;/*文字周りの余白*/ | |
color: #494949;/*文字色*/ | |
background: #fffaf4;/*背景色*/ | |
border-left: solid 5px #724535;/*左線(実線 太さ 色)*/ | |
} | |
.entry-content h2{ | |
position: static; | |
border-bottom: solid 0px; | |
} | |
h3 { | |
padding: 0.5em 0;/*上下の余白*/ | |
} | |
.entry-content h3{ | |
border-top: solid 3px #b25a3d;/*上線*/ | |
border-bottom: solid 3px #b25a3d;/*下線*/ | |
position: static; | |
display: block; | |
padding: 10px; | |
} | |
.entry-content h3::before{ | |
content: none; | |
} | |
.entry-content h3::after{ | |
content: none; | |
} | |
h4 { | |
border-bottom: double 5px #b25a3d; | |
display: block; | |
} | |
.entry-content h4{ | |
position: static; | |
padding: 10px; | |
border-top: 0px; | |
} | |
h5{ | |
border-bottom: double 5px #b25a3d; | |
display: block; | |
} | |
.entry-content h4{ | |
position: static; | |
padding: 10px; | |
border-top: 0px; | |
} | |
/*下線の色*/ | |
.ul { | |
background: linear-gradient(transparent 0%, #ffff66 0%); | |
} | |
.ul2 { | |
background: linear-gradient(transparent 80%, #ffc1c1 0%); | |
} | |
/*-------------------------------------- | |
ヨメレバ・カエレバ・トマレバ | |
--------------------------------------*/ | |
.booklink-box, .kaerebalink-box, .tomarebalink-box{ | |
box-sizing: border-box; | |
border: solid 1px #5d5d5d; | |
border-radius:2px; | |
font-size:small; | |
padding:10px; | |
margin-bottom: 10px; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
display: -webkit-flex; | |
display: flex; | |
-webkit-align-items: center; | |
align-items: center; | |
} | |
.booklink-image, .kaerebalink-image, .tomarebalink-image{ | |
margin:0 15px 0 0; | |
width: 160px; | |
text-align: center; | |
-webkit-flex: 0.6; | |
flex: 0.6; | |
} | |
.cstmreba img{ | |
margin:0 auto; | |
text-align:center; | |
} | |
.booklink-info, .kaerebalink-info, .tomarebalink-info{ | |
-webkit-flex: 2; | |
flex: 2; | |
margin:0; | |
line-height:120%; | |
overflow: hidden; | |
} | |
.booklink-name, .kaerebalink-name, .tomarebalink-name{ | |
line-height:1.5em; | |
} | |
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{ | |
text-decoration:none; | |
font-weight:800; | |
} | |
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{ | |
background-color:#DDD; | |
border-radius:2px; | |
padding:2px; | |
font-size:8px; | |
text-align:right; | |
/* font-family:verdana; */ | |
line-height:120%; | |
margin-bottom:5px | |
} | |
.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{ | |
text-decoration:none; | |
font-weight:400; | |
} | |
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{ | |
font-size: 12px; | |
} | |
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{ | |
flex-wrap: wrap; | |
display: -webkit-flex; | |
display: flex; | |
} | |
.booklink-link2 a, | |
.kaerebalink-link1 a, | |
.tomarebalink-link1 a { | |
-moz-border-radius:5px; | |
-webkit-border-radius:5px; | |
border-radius:5px; | |
display:inline-block; | |
margin:5px 2px 0 0; | |
padding:10px 1px; | |
text-align:center; | |
text-decoration:none; | |
font-weight:800; | |
font-size:12px; | |
} | |
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{ | |
color:#fff; | |
} | |
.booklink-link2 a:active, .kaerebalink-link1 a:active, .tomarebalink-link1 a:active{ | |
position:relative; | |
top:1px; | |
} | |
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan { | |
width: 48%; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-align-items: center; | |
align-items: center; | |
-webkit-justify-content: center; | |
justify-content: center; | |
} | |
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a { | |
width: 100%; | |
} | |
/* amazon */ | |
.shoplinkamazon a { | |
color: #FF9901 ; /* 文字の色 */ | |
border: solid 1px #FF9901 ; /* ボーダー色 */ | |
} | |
.shoplinkamazon a:hover { | |
background-color: #ff9901; /* カーソルを重ねた時の背景色 */ | |
} | |
/* 楽天 */ | |
.shoplinkrakuten a { | |
color: #c20004 ; /* 文字の色 */ | |
border: solid 1px #c20004 ; /* ボーダー色 */ | |
} | |
.shoplinkrakuten a:hover { | |
background-color: #c20004; /* カーソルを重ねた時の背景色 */ | |
} | |
/* kindle */ | |
.shoplinkkindle a { | |
color: #007dcd; /* 文字の色 */ | |
border: solid 1px #007dcd ; /* ボーダー色 */ | |
} | |
.shoplinkkindle a:hover { | |
background-color: #007dcd; /* カーソルを重ねた時の背景色 */ | |
} | |
/* 価格 */ | |
.shoplinkkakakucom a { | |
color: #314995; /* 文字の色 */ | |
border: solid 1px #314995 ; /* ボーダー色 */ | |
} | |
.shoplinkkakakucom a:hover { | |
background-color: #314995; /* カーソルを重ねた時の背景色 */ | |
} | |
/* kobo */ | |
.shoplinkrakukobo a { | |
color: #990000; /* 文字の色 */ | |
border: solid 1px #990000 ; /* ボーダー色 */ | |
} | |
.shoplinkrakukobo a:hover { | |
background-color: #990000; /* カーソルを重ねた時の背景色 */ | |
} | |
/* yahoo */ | |
.shoplinkyahoo a { | |
color: #7b0099; /* 文字の色 */ | |
border: solid 1px #7b0099 ; /* ボーダー色 */ | |
} | |
.shoplinkyahoo a:hover { | |
background-color: #7b0099; /* カーソルを重ねた時の背景色 */ | |
} | |
.shoplinkyahoo img { | |
display: none; | |
} | |
.shoplinkyahoo a { | |
font-size: 10px; | |
} | |
/* 7net */ | |
.shoplinkseven a { | |
color: #82c36f ; /* 文字の色 */ | |
border: solid 1px #82c36f ; /* ボーダー色 */ | |
} | |
.shoplinkseven a:hover { | |
background-color: #82c36f; /* カーソルを重ねた時の背景色 */ | |
} | |
/* jtb */ | |
.shoplinkjtb a { | |
color: #990000 ; /* 文字の色 */ | |
border: solid 1px #990000 ; /* ボーダー色 */ | |
} | |
.shoplinkjtb a:hover { | |
background-color: #990000; /* カーソルを重ねた時の背景色 */ | |
} | |
/* jalan */ | |
.shoplinkjalan a { | |
color: #FF9901 ; /* 文字の色 */ | |
border: solid 1px #FF9901 ; /* ボーダー色 */ | |
} | |
.shoplinkjalan a:hover { | |
background-color: #FF9901; /* カーソルを重ねた時の背景色 */ | |
} | |
.booklink-link2 a:hover, | |
.kaerebalink-link1 a:hover, | |
.tomarebalink-link1 a:hover{ | |
font-weight:800; | |
} | |
.booklink-footer{display: none;} | |
/* 吹き出しのCSS */ | |
.entry-content .l-fuki, | |
.entry-content .r-fuki { | |
position: relative; | |
width: 80%; | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
padding: 20px; | |
border-radius: 6px; | |
border: 2px solid #999; | |
box-shadow: 1px 1px 5px #aaa; | |
background-color: #fff; | |
z-index: 1; | |
} | |
.entry-content .l-fuki { | |
margin: 20px 20% 40px 0; | |
} | |
.entry-content .r-fuki { | |
margin: 20px 0 40px 19%; | |
} | |
.entry-content .l-fuki::before, | |
.entry-content .r-fuki::before { | |
position: absolute; | |
content: ""; | |
top: 16px; | |
width: 10px; | |
height: 10px; | |
border-right: 2px solid #999; | |
border-bottom: 2px solid #999; | |
background-color: #fff; | |
z-index: 2; | |
} | |
.entry-content .l-fuki::before { | |
right: -7px; | |
transform: rotate(-45deg); | |
-webkit-transform: rotate(-45deg); | |
} | |
.entry-content .r-fuki::before { | |
left: -7px; | |
transform: rotate(135deg); | |
-webkit-transform: rotate(135deg); | |
} | |
.entry-content .l-fuki::after, | |
.entry-content .r-fuki::after { | |
position: absolute; | |
content: ""; | |
width: 80px; | |
height: 80px; | |
top: -10px; | |
border-radius: 40px; | |
border: 3px solid #fff; | |
background-size: cover; | |
background-position: center center; | |
background-repeat: no-repeat; | |
box-shadow: 1px 1px 5px #aaa; | |
} | |
.entry-content .l-fuki::after { | |
right: -110px; | |
} | |
.entry-content .r-fuki::after { | |
left: -110px; | |
} | |
@media screen and (max-width: 620px) { | |
.entry-content .l-fuki, | |
.entry-content .r-fuki { | |
width: 70% | |
} | |
.entry-content .l-fuki { | |
margin-right: 30%; | |
} | |
.entry-content .r-fuki { | |
margin-left: 30%; | |
} | |
} | |
@media screen and (max-width: 478px) { | |
.entry-content .l-fuki::after, | |
.entry-content .r-fuki::after { | |
width: 60px; | |
height: 60px; | |
border-radius: 30px; | |
} | |
.entry-content .l-fuki::after { | |
right: -84px; | |
} | |
.entry-content .r-fuki::after { | |
left: -84px; | |
} | |
} | |
/* 吹き出し用 */ | |
.クラス名::after {background-image:url(画像のURL);} | |
.クラス名::after {background-image:url(画像のURL);} | |
.クラス名::after {background-image:url(画像のURL);} | |
.クラス名::after {background-image:url(画像のURL);} | |
.クラス名::after {background-image:url(画像のURL);} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment