## basic
インラインボックスであるa要素を文中に配置
余白のリセット
a要素の設置
配置の確認
“`html
こんにちは！こんにちは！こんにちは！
こんにちは！こんにちは！こんにちは！
“`
“`css
@charset “utf-8”;
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
}
a {
background-color: skyblue;
}
“`
## インラインボックスの挙動
インラインボックスの要素がサポートするプロパティ、サポートしないプロパティ
width / height
border
padding
margin
marginのautoキーワード
border/paddingは効くが他の要素には干渉しないので、意図しない 表示になる
“`css
a {
background-color: skyblue;
width: 80px;
height: 32px;
border: 8px solid blue;
padding: 8px;
/* margin: 8px; */
margin: 0 auto;
}
“`
## display
“`css
a {
background-color: skyblue;
width: 80px;
height: 32px;
border: 8px solid blue;
padding: 8px;
/* margin: 8px; */
margin: 0 auto;
/* display: block; */
/* display: inline; */
display: inline-block;
}
“`
## 置換要素の挙動
imgは挙動が少し違う
“`html
こんにちは！こんにちは！こんにちは！
こんにちは！
こんにちは！
こんにちは！こんにちは！こんにちは！
“`
“`css
@charset “utf-8”;
body {
margin: 0;
}
p {
background-color: pink;
margin: 0;
}
“`
## クラスセレクタ
“`html
“`
“`css
@charset “utf-8”;
body {
margin: 0;
}
.container {
width: 400px;
margin: 32px auto 0;
border: 8px solid blue;
}
.box-1 {
width: 100px;
height: 100px;
background-color: pink;
}
.box-2 {
width: 100px;
height: 50px;
background-color: skyblue;
}
.box-3 {
width: 100px;
height: 100px;
background-color: orange;
}
“`
### position
positionプロパティが取りうる値と、それらを指定したときの挙動について見ていきます。
position: static
position: relative;
position: absolute;
position: fixed;
relativeは、box-3の要素に影響をあたえない
“`css
.box-2 {
width: 100px;
height: 50px;
background-color: skyblue;
position: relative;
/* top: 16px; */
top: -16px;
left: 16px;
}
“`
`absolute` は、親要素が`static`な場合は、`body`要素基準になるが通常親要素`relative`で使うことがほとんど。
`fixed` は、ブラウザー表示領域基準なので、常に表示位置は固定される
“`css
.container {
width: 400px;
margin: 32px auto 0;
border: 8px solid blue;
/* position: relative; */
}
.box-1 {
width: 100px;
height: 100px;
background-color: pink;
}
.box-2 {
width: 100px;
height: 50px;
background-color: skyblue;
/* position: absolute; */
position: fixed;
top: 16px;
right: 16px;
}
“`
## Z-index
“`css
.container {
width: 400px;
margin: 32px auto 0;
border: 8px solid blue;
position: relative;
}
.box-1 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.box-2 {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
.box-3 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 40px;
left: 40px;
z-index: 1;
}
“`
## object-fit, opacity
“`html
“`
“`css
p {
background-color: pink;
}
img {
width: 80px;
height: 80px;
object-fit: cover;
}
“`
## float
現在はあまりつかわれていないが、文章をまわりこませるときには使う
“`html
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
“`
“`css
img {
width: 80px;
height: 80px;
float: right;
}
.p-1 {
display: flow-root;
}
.p-2 {
/* clear: right; */
}
“`
## 背景画像
“`css
header {
height: 160px;
background-color: pink;
background-image: url(img/logo.png);
/* background-size:contain; */
background-size: cover;
background-position: center;
}
h1 {
margin: 0;
font-size: 22px;
text-align: center;
line-height: 160px;
}
“`
“`html
dotInstall
“`
## リンク
“`css
a {
display: inline-block;
width: 160px;
height: 32px;
border: 1px solid black;
border-radius: 8px;
text-align: center;
text-decoration: none;
line-height: 32px;
color: inherit;
}
“`
“`html
“`
## ボタン
“`css
button {
all: unset;
width: 160px;
height: 32px;
border: 1px solid black;
border-radius: 8px;
text-align: center;
line-height: 32px;
color: inherit;
cursor: pointer;
}
“`
“`html
“`
## テーブル
“`html
| 年 | 出来事 |
|---|---|
| 2011 | サービス開始 |
| 2022 | 256times開始 |
“`
“`css
table{
width: 400px;
border-collapse: collapse;
margin: 32px auto;
}
th {
border: 1px solid black;
background: lightgray;
padding: 8px;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
“`
## リストのスタイリング
“`html
- Item 1
- Item 2
- Item 3
“`
“`css
ul {
/* all: unset; */
margin:0;
padding: 0;
list-style: none;
width: 360px;
margin: 32px auto;
}
li {
background: lightgray;
padding: 8px;
border-radius: 8px;
margin-bottom: 8px;
/* width: 320px; */
}
“`
## calc
“`html
ドットインストール
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
“`
“`css
section {
background: pink;
max-width: 600px;
margin: 32px auto;
width: calc(100% – 16px – 16px);
}
h1 {
margin: 0;
padding: 8px;
}
p {
margin: 0;
padding: 8px;
}
“`
## em, rem
“`css
@charset “utf-8”;
body {
margin: 0;
}
section {
background: pink;
max-width: 600px;
margin: 0 auto;
width: calc(100% – 16px – 16px);
}
h1 {
margin: 0;
background: skyblue;
/* width: 500px; */
/* width: 6em; */
width: 10rem;
}#
p {
margin: 0;
background: orange;
/* width: 50%; */
/* width: 6em; */
width: 10rem;
}
“`
## 色の指定
色を指定するための、さまざまな方法について見ていきます。
キーワード
RGB
HSL
HWB
不透明度の指定
## css変数
“`css
@charset “utf-8”;
:root {
/* –brand-color: orange; */
–brand-color: skyblue;
}
body {
margin: 0;
}
section {
max-width: 600px;
margin: 0 auto;
width: calc(100% – 16px – 16px);
}
h1 {
margin: 0;
color: var(–brand-color);
border-bottom: 2px solid var(–brand-color);
}
p {
margin: 0;
}
“`