六回目ーー実践、なろうホームページ参考、CSSファイルーー
プログラムの書く順番なのですが、悩みながら書いている為かなりバラバラです。
次回からはfloat、横幅、高さ、文字の大きさ、色、padding、margin、borderの順に書いていこうと思います。
* {
padding: 0px;
margin: 0px;
}
body {
font-family: sans-serif;
width: 900px;
}
li {
list-style: none;
}
.header {
height: 90px;
}
.header-logo {
float: left;
}
.header-logo img {
width: 300px;
height: 70px;
margin-right: 5px;
}
.keitai {
float: right;
font-size: 13px;
}
.setumei {
font-size: 14px;
float: right;
width: 590px;
margin-top: 10px;
}
.header-list {
font-size: 13px;
height: 40px;
width: 900px;
float: left;
border-top: 1px solid #63C1F0;
border-bottom: 1px solid #63C1F0;
}
.header-list li {
float: left;
padding: 10px 10px;
margin-bottom: 10px;
}
.header-list span {
color: #ff0000;
}
.koukoku {
float: left;
padding: 10px;
margin-left: 200px;
margin-right: 200px;
}
.sub-zentai {
float: left;
width: 180px;
padding-top: 5px;
margin-right: 10px;
}
.sub-box {
float: left;
width: 175px;
padding: 5px;
margin-bottom: 20px;
border: 1px solid #63C1F0;
}
.jikkou-title {
font-size: 17px;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 5px;
border-bottom: 3px solid #63C1F0;
}
.link-list li {
font-size: 13px;
margin-top: 5px;
margin-bottom: 5px;
}
.search {
float:left;
font-size: 13px;
}
input.keyword-nyuuryoku{
width: 180px;
font-size: 13px;
border: 1px solid #dee7ec;
margin-top: 5px;
margin-bottom: 5px;
}
input.genre {
width: 140px;
font-size: 10px;
border: 1px solid #dee7ec;
margin-top: 5px;
margin-bottom: 5px;
}
input.syubetu {
width: 160px;
font-size: 10px;
border: 1px solid #dee7ec;
margin-top: 5px;
margin-bottom: 5px;
}
input.button {
width: 50px;
height: 30px;
margin-left: 50px;
}
.QR {
font-size: 12px;
margin: 5px;
}
.QR img {
width: 110px;
height: 140px;
}
.center {
float: left;
width: 700px;
}
.main-ue {
float: left;
}
.keyword {
float: left;
width: 695px;
height: 280px;
padding: 5px;
margin: 5px;
border: 1px solid #63C1F0;
}
.sonota {
font-size: 13px;
margin: 5px;
}
.keyword-list {
font-size: 13px;
margin: 5px;
}
.keyword-list a {
margin: 5px;
}
.koukoku-naka {
float: left;
width: 700px;
height: 75px;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.koukoku-sita {
float: left;
width: 350px;
height: 90px;
padding-left: 20px;
margin-bottom: 10px;
}
.main-box {
float: left;
width: 485px;
padding: 5px;
margin: 5px;
border: 1px solid #63C1F0;
}
.main-box li {
font-size: 13px;
padding-bottom: 10px;
margin-top: 5px;
border-top: 1px solid #63C1F0;
border-bottom: 1px solid #63C1F0;
}
.program-title1 {
font-size: 17px;
color: black;
margin-top: 10px;
margin-bottom: 5px;
}
.main-box p {
color: black;
font-size: 13px
}
.naiyou {
font-size: 13px;
color:chocolate;
}
.pickup-log {
font-size: 13px;
float: right;
}
.sougou-kikaku {
float: right;
width: 200px;
}
.jikkou-box {
float: right;
width: 190px;
padding: 5px;
margin-left: 10px;
margin-bottom: 20px;
border: 1px solid #63C1F0;
}
.koumoku-kikaku {
font-size: 13px;
padding:5px;
}
.koumoku-kikaku li {
padding-top: 3px;
}
.kako-kikaku {
float: right;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-right: 5px;
border-top: 1px solid #63C1F0;
}
.houkoku {
float: right;
}
.review {
margin-left: 10px;
}
.jikan {
font-size: 13px;
}
.kansou {
font-size: 15px;
color: chocolate;
}
.review-nusi {
font-size: 13px;
}
.title {
font-size: 13px;
}
.title span {
color: orange;
margin-left: 3px;
}
.itiran {
float: right;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-right: 5px;
border-top: 1px solid black;
}
.zentai {
font-size: 13px;
}
.box {
border-left: 3px solid #63C1F0;
margin-bottom: 10px;
}
.group img {
width: 150px;
height: 30px;
margin: 10px 20px;
}
.footer {
float: left;
}
.footer-list {
font-size: 13px;
height: 70px;
width: 900px;
padding-left: 10px;
margin: 5px;
}
.footer-list li {
float: left;
color: darkgray;
margin: 10px 5px;
}
.footer-list p {
margin-left: 400px;
}
