media query

修正予定　まだ準備

レスポンシブサイトの書き方
cssの上書きができないため、出来たらIDでは書かない方が良いが仕様のため記載してしまった。

IE9以下用にcss3を対応させるソース


<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


スマートフォンの幅に合わせるソース


<meta name="viewport" content="width=device-width, intial-scale=1.0">


メディアクエリを記載

<link rel="stylesheet" href="css/style.css"/>


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;

}

}

``

``

<!DOCTYPE html>

<!--[if lt IE 9]>

<![endif]-->




タイトル

テキスト

(c) 社名

``