수정 예정 아직 준비 안 됐어요.
응답 웹 사이트 쓰기
css는 덮어쓸 수 없기 때문에 가능하면 ID로 쓰지 않는 것이 좋겠지만 규격 때문에 기재되어 있습니다.
IE 9 이하 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/
/
4@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;

}
}
``
``


타이틀

텍스트 (c) 회사 이름 ``