Help us understand the problem. What is going on with this article?

【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

1495194943_image2.jpeg

引用;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(1箇所指定): 10px ;
border: 1px(太さ) solid(線の種類) #dee7ec(色);

float

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

float: right;
float: left;

指定方法

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away