【CSS】学習メモ（文字・背景・padding・margin・float）

タグの記述方法で迷ったら、リファレンスを読む↓
CSSクイックリファレンス

基本的な構造

sample.css

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}

.header-list li {
  float: left;
  padding: 33px 20px;
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a;
}

.contents {
  height: 500px;
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.contents-item {
  float: left;
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

.contact-form {
  padding-top: 100px;
}

/* inputとtextareaのCSSを指定してください */
input, textarea{
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding:20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

/* contact-submitのCSSを指定してください */
.contact-submit{
  background-color: #dee7ec;
  color: #889eab;
}

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}

基本文法

タグを指定する際には点はつけない
body { font-family: "Avenir Next"; }

クラスを指定する際には点をつける
.footer-list { float: right; }

文字・背景

font-size : 文字の大きさ
color: 文字の色
background-color: 背景の色
font-family:　フォントの種類

サイズ

height :高さ
width: 横の長さ

padding・margin

引用；https://www.webprofessional.jp/set-css-margins-padding-cool-layout-tricks/

padding: ボーダーの内側
border: paddingとmarginの間
margin: ボーダーの外側

padding: 10px（上） 10px（右） 10px（下） 10px（左）;
margin: 10px（上下） 10px（左右）;
padding-top(１箇所指定): 10px ;
border: 1px(太さ) solid（線の種類） #dee7ec（色）;

float

縦に並んでいるものを一列に横に並べるときに使う

float: right;
float: left;

指定方法

クラス「footer-list」の直後のリスト
.footer-list li { }