修正予定 まだ準備
レスポンシブサイトの書き方
cssの上書きができないため、出来たらIDでは書かない方が良いが仕様のため記載してしまった。
IE9以下用にcss3を対応させるソース
``
``
スマートフォンの幅に合わせるソース
<meta name="viewport" content="width=device-width, intial-scale=1.0">
メディアクエリを記載
``
css
``
@charset"utf-8";
/* common /
/
@media以外の所は全てのサイズで読み込まれます。
*/
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* word-break: break-all; */
}
html {
height: 100%;
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
line-height: 1.6;
margin: 0;
padding: 0;
color: #424242;
background-color: #fff;
text-rendering: optimizeLegibility;
letter-spacing:0.05em;
height: 100%;
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
margin-left:5%;
}
h2 {
font-size: 22px;
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5;
}
p {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.5;
}
dl,dt,dd {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
.contact {
display: inline-block;
padding-left: 40px;
background: url(../img/icon_free.png) no-repeat left 9px;
background-size: 33px;
}
wrap {
width: 100%;
margin: 0 auto;
text-align: center;
}
Head {
border-bottom: 1px solid #d2d2d2;
}
Head .inner {
padding: 0 20px;
}
.inner {
margin: 0 auto;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Head #logo {
padding: 17px 0;
float: left;
}
Head #logo img {
width: auto;
height: 18px;
vertical-align: baseline;
}
.clearfix {
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.mbL {
margin-bottom: 40px;
}
.mbM {
margin-bottom: 30px;
}
.b {font-weight: bold;}
.innerbox {
display:block;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
border: 2px solid #eeeeee;
width: 100%;
}
.main_container {
padding: 0 20px;
display: inline-block;
text-align: left;
}
.ls005 {
letter-spacing: 0.05em;
}
.ptb20 {
padding-top: 20px;
padding-bottom: 20px;
}
.psL {
font-size: 26px;
font-size: 2.6rem;
}
.lsTell {
letter-spacing: 0.1em;
}
.ps16 {
font-size: 16px;
font-size: 1.6rem;
}
.fsM {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.5;
}
.fb {
font-weight: bold;
}
.caution {
font-size: 12px;
font-size: 1.2rem;
}
.copyright {
background: #a50f23;
text-align: center;
color: #fff;
padding: 5px 0;
font-size: 16px;
font-size: 1.6rem;
}
.mblast {
margin-bottom: 26px;
}
/* small iPhone5 */
@media screen and (min-width: 320px) {
h2 {
font-size: 19px;
font-size: 1.9rem;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5;
}
.lead {
margin-top:2.3em;
margin-bottom:2.3em;
}
p {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.5;
}
.mbM {
margin-bottom: 1em;
}
.fsM {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: 0.00em;
}
.lineb{
margin-bottom: 2em;
display: inline-block;
line-height: 1.5;
}
.contact {
display: inline-block;
padding-left: 42px;
background: url(../img/icon_free.png) no-repeat left 4px;
background-size: 40px;
}
.psL {
font-size: 24px;
font-size: 2.4rem;
}
.lsTell {
letter-spacing: 0.1em;
}
}
/* small iPhone6*/
@media screen and (min-width: 375px) {
h2 {
font-size: 20px;
font-size: 2.0rem;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5;
}
.lead {
margin-top:3em;
margin-bottom: 3em;
}
p {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
.mbM {
margin-bottom: 1em;
}
.fsM {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
.lineb{
margin-bottom: 2em;
display: inline-block;
line-height: 1.5;
}
}
/* medium iPhone6 Plus Nexus 6P*/
@media screen and (min-width: 412px) {
.mblast {
margin-bottom: 40px;
}
.lead {
margin-top:3em;
margin-bottom: 4em;
}
.lineb{
margin-bottom: 2em;
display: inline-block;
line-height: 1.5;
}
.mbM {
margin-bottom: 1em;
}
.fsM {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
p {
font-size: 17px;
font-size: 1.7rem;
line-height: 1.5;
}
h2 {
font-size: 21px;
font-size: 2.1rem;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5;
}
}
/* large PC IPAD IPAD PRO*/
@media screen and (min-width: 415px) {
.main_container {
margin: 0 auto;
width: 95%;
text-align: center;
}
.mbL {
margin-bottom: 132px;
}
.lead {
height: 300px;
position:relative;
display:block;
}
.lead h2 {
position:absolute;
top: 50%;
left: 0;
right: 0;
letter-spacing:0em;
line-height: 1.5em;
margin-top: -1.5em; /* 2行の場合 */
}
.lineb {
margin-bottom: 2em;
display:block;
line-height: 1.5;
}
.mbM {
margin-bottom: 22px;
}
.innerbox {
display:block;
text-align: center;
padding: 50px 10px;
border-radius: 4px;
border: 2px solid #eeeeee;
width: 80%;
margin:0 auto;
}
.fsM {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.5;
}
.psL {
font-size: 48px;
font-size: 4.8rem;
}
.contact {
display: inline-block;
padding-left: 70px;
background: url(../img/icon_free.png) no-repeat left 16px;
background-size: 62px;
}
.caution {
font-size: 15px;
font-size: 1.5rem;
line-height: 1.5;
letter-spacing:-0.04em;
}
.innerbox {
display:inline-block;
text-align: center;
padding: 50px 10px;
border-radius: 4px;
border: 2px solid #eeeeee;
width: 80%;
margin:0 auto;
position: relative;
}
dl {
line-height: 1.5;
text-align: left;
margin: 0 auto;
}
.tc {
text-align: center;
display:inline-block;
}
.txtL {
text-align: left;
}
Head #logo img {
width: auto;
height: 30px;
vertical-align: baseline;
}
}
``
``
タイトル ``