basic
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Basic CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>こんにちは！</p>
<p>こんにちは！</p>
</body>
</html>@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
width: 160px;
height: 160px;
}max-width, min-width
幅の最大値、最小値を設定
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
width: 50%;
/* max-width: 400px; */
min-width: 400px;
height: 160px;
}border
p {
background-color: pink;
margin: 0;
width: 160px;
height: 160px;
/* border-width: 8px; */
/* border-style: solid; */
/* border-color: blue; */
border-top-width: 8px;
border-top-style: dashed;
border-top-color: blue;
border-bottom-width: 8px;
border-bottom-style: double;
border-bottom-color: blue;
}一括指定プロパティ
@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
width: 160px;
height: 160px;
/* border-width: 8px; */
/* border-style: solid; */
/* border-color: blue; */
/* border: 8px solid blue; */
/* border-top: 8px dashed blue; */
/* border-bottom: 8px double blue; */
border-style: solid;
border: 8px none blue;
}padding
@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
/* margin: 0 0 0 16px; */
/* margin: 0; */
/* margin: 0 0 0 auto; */
margin: 0 auto;
width: 160px;
height: 160px;
border: 8px solid blue;
padding: 16px;
}マージンの相殺
縦方向のマージンは上下方向は、相殺される
@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
/* margin: 16px 0 0; */
margin: 16px 0;
}box-sizing
padding, borderを width, heightに含めて計算する
<body>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p>こんにちは！</p>
</body>p {
background-color: pink;
margin: 16px 0 0;
width: 400px;
height: 80px;
border: 8px solid blue;
padding: 8px;;
box-sizing: border-box;
}over-flow
@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
width: 160px;
height: 80px;
/* overflow: hidden; */
overflow: scroll;
}box-shadow
@charset "utf-8";
body {
margin: 0;
}
p {
background-color: pink;
margin: 16px;
width: 160px;
height: 160px;
/* box-shadow: 8px 8px gray; */
/* box-shadow: 8px 8px 8px gray; */
box-shadow: 0 0 8px gray;
}テキストのスタイリング
<body>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p>こんにちは！</p>
</body>@charset "utf-8";
body {
margin: 0;
}
h1 {
background-color: skyblue;
margin: 0;
font-size: 16px;
font-weight: normal;
text-align: center;
}
p {
background-color: pink;
margin: 0;
font-weight: bold;
text-align: right;
}line-height
単位なしで使われることが多い
p {
background-color: pink;
margin: 0;
line-height: 1.6;
}継承
@charset "utf-8";
body {
margin: 0;
color: blue;
border: 8px solid blue;
}
h1 {
background-color: skyblue;
margin: 0;
/* color: blue; */
border: inherit;
}
p {
background-color: pink;
margin: 0;
line-height: 1.6;
}font-family
body {
margin: 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}section
@charset "utf-8";
body {
margin: 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
section {
border: 1px solid lightgray;
width: 400px;
margin: 32px auto 0;
border-radius: 8px;
}
h1 {
background-color: skyblue;
margin: 0;
}
p {
background-color: pink;
margin: 0;
line-height: 1.6;
} <section>
<h1>ドットインストール</h1>
<p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p>
</section>padding, margin
section {
border: 1px solid lightgray;
width: 400px;
margin: 32px auto 0;
border-radius: 8px;
}
h1 {
background-color: skyblue;
/* margin: 0 auto; */
margin: 0;
/* margin: 8px; */
padding: 8px;
text-align: center;
}
p {
background-color: pink;
/* margin: 8px; */
margin: 0;
padding: 8px;
line-height: 1.6;
}カードのスタイリング
デフォルトのマージンのクリアは大事
@charset "utf-8";
body {
margin: 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
section {
border: 1px solid lightgray;
width: 400px;
margin: 32px auto 0;
border-radius: 8px;
}
h1 {
/* background-color: skyblue; */
/* outline: 1px solid red; */
margin: 0;
padding: 8px;
text-align: center;
border-bottom: 1px solid lightgray;
font-size: 20px;
}
p {
/* background-color: pink; */
margin: 0;
padding: 8px;
line-height: 1.6;
}