サンプルサイトのCSS。解説はコードの中にコメントアウトで記入した。
@charset "utf-8";
/* font
------------------------------------------------------------*/
body{
font-size: 90%;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
-webkit-text-size-adjust: 100%;
}
/* link
------------------------------------------------------------*/
a{
color: #333;
text-decoration: none;
}
a:hover{
color: #999;
}
a:link{}
a:visited{}
a:active{}
/* webfont
------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
font-family: 'Noto Sans Japanese', sans-serif;
}
/* body
------------------------------------------------------------*/
body{
background: #fff url("images/home_body_bg001.jpg") no-repeat top left;
background-size: 100%;
}
/*---- header ----*/
header{
background: #ffffff;
}
header h1{text-align: center;}
/*インライン要素を中央揃えはこれ！画像はインライン要素含むさらに、boxを真ん中にするにはwidth指定して左右auto*/
header h1 a{}
header h1 a:hover{}
header h1 img{
width: 420px;
height: auto;
}
header ul{
position: absolute;
top: 25px;
right: 10px;
background: #fff url("images/pict_tel_001.png") no-repeat top left;
background-size: 70px;/*電話の横幅、70pxの由来はデザインラフをスライスツールで切ったときのサイズを参考にした*/
padding: 5px 0 5px 80px;/*80pxは同上*/
}
header ul li{
font-size: 140%;
line-height: 1.4;
}
header ul li span{
font-size: 63%;/*電話番号と横幅揃えたかったので。サイズの調整方法は適当に見ながら数字上げ下げする*/
}
/*---- main ----*/
main{
width: 960px;
margin: 0 auto 5%;
/* background: #ccc; */
padding: 400px 0 0 0;
}
main section{}
main section.mainbox001{
background: rgba(255 255 255 / 70%);
padding: 2%;
margin: 0 0 50px;
}
main section.mainbox001 h2{
text-align: center;
font-size: 300%;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: bold;
}
main section.mainbox001 table{
margin: 0 auto;
width: auto;/*テーブルは中央揃えになるので書かなくても効くけど、margin autoとセットで書くのが通例なので記入。*/
font-size: 140%;
}
main section.mainbox001 table tr{}
main section.mainbox001 table tr th{
padding: 0 5px;
}
main section.mainbox001 table tr td{
padding: 0 5px;
}
main section.mainbox002{
background: #fadcdc;
padding: 2%;
margin: 0 0 50px;
}
main section.mainbox002 h3{
font-size: 160%;
border-bottom: dotted 1px #333;
margin: 0 0 1%;
}
main section.mainbox002 ul{}
main section.mainbox002 ul li{}
main section.mainbox003{
margin: 0 0 50px;
}
main section.mainbox003 h3{
text-align: center;
font-size: 160%;
}
main section.mainbox003 div.mainbox003_boder{border: solid 1px #ccc;padding: 2%;overflow: hidden;}
main section.mainbox003 ol{
float: left;
width: 700px;/*％にしない理由はPCだから決め打ち。スマホ対応のときは％でOK*/
}
main section.mainbox003 ol li{}
main section.mainbox003 ol li h4{
font-size: 140%;
padding: 20px 0 0;
}
main section.mainbox003 ol li h4.pr_txt001{
padding: 0;
color: #1d4b9f;
}
main section.mainbox003 ol li h4.pr_txt002{
color: #52b332;
}
main section.mainbox003 ol li h4.pr_txt003{
color: #cc880d;
}
main section.mainbox003 ol li p{
float: none;
}
main section.mainbox003 p{
float: right;
}
main section.mainbox003 p img{}
/*こっちにfloat書いたら上でnone書かなくてもいいとはならない。同格の関係でfloatの左右は指定するから。同様にoverfloa hiddenも親で打ち消し。おばあちゃんでは打ち消せないｗ*/
main section.mainbox004{
border: solid 1px #ccc;
padding: 2%;
display: flex;
flex-wrap: wrap;
}
main section.mainbox004 div.mainbox004_l{
width: 600px;
}
main section.mainbox004 h3{
font-size: 160%;
}
main section.mainbox004 h4{
font-size: 120%;
}
main section.mainbox004 h4:before{
font-size: 120%;
content:"◆";
}
main section.mainbox004 ul{}
main section.mainbox004 ul li{}
main section.mainbox004 p{
width: 315px;/*pのエリアとしてまず、幅指定*/
}
main section.mainbox004 p img{
width: 315px;/*ここで書かないと、元サイズの画像が表示されてしまう。外枠でpサイズ指定してあるにも関わらず！これ、私は忘れがちなので注意。*/
height: auto;
}
/*---- footer ----*/
footer{
background: #000;
}
footer p{
text-align: center;
color: #fff;
padding: 1%;
}
footer p small{}
