回答編集履歴
10
修正
answer
CHANGED
|
@@ -57,4 +57,4 @@
|
|
|
57
57
|
|
|
58
58
|
異なる単位の数字を計算するようなシチュエーションで便利なことがよくあります。
|
|
59
59
|
|
|
60
|
-
「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときに数字の根拠が持てないですが、calc()を使って指定していると
|
|
60
|
+
「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときや、デザインラフがない状況でレスポンシブ対応をしなければならないときに数字の根拠が持てないのですが、calc()を使って指定していると、悩まずに済む場合もあります。
|
9
修正
answer
CHANGED
|
@@ -57,4 +57,4 @@
|
|
|
57
57
|
|
|
58
58
|
異なる単位の数字を計算するようなシチュエーションで便利なことがよくあります。
|
|
59
59
|
|
|
60
|
-
「
|
|
60
|
+
「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときに数字の根拠が持てないですが、calc()を使って指定していると文字サイズだけ変えたり、余白分のpx数だけ変更することで悩まずに済むので楽な場合もあります。
|
8
修正
answer
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
.container {
|
|
46
46
|
margin: 0 auto;
|
|
47
47
|
width: 640px;
|
|
48
|
-
max-width: calc(
|
|
48
|
+
max-width: calc(100vw - 15px - 15px); /* 15pxは左右の余白 */
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
51
|
|
7
ラッパー要素での活用方法を追記しました。
answer
CHANGED
|
@@ -41,6 +41,15 @@
|
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
```CSS
|
|
44
|
+
/* .containerなどラッパー要素について、ブレークポイントを使わなくてもこの記述だけでOKかもしれません。 */
|
|
45
|
+
.container {
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
width: 640px;
|
|
48
|
+
max-width: calc(100% - 15px - 15px); /* 15pxは左右の余白 */
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
```CSS
|
|
44
53
|
/* 無理やり感がありますが.. */
|
|
45
54
|
/* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */
|
|
46
55
|
top: calc(-1 * ((1em + 5px) * 3 + 20px + 20px) / 2);
|
6
修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
例を挙げると以下です。
|
|
7
7
|
|
|
8
8
|
```CSS
|
|
9
|
-
/* line-heightのルールを指定 */
|
|
9
|
+
/* line-heightのルールを指定。SCSSの場合は「calc(...)」の記述を変数化しています。 */
|
|
10
10
|
line-height: calc(1em + 10px);
|
|
11
11
|
```
|
|
12
12
|
|
5
修正
answer
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
```CSS
|
|
14
|
-
/* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが) */
|
|
14
|
+
/* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが、IE11では専用の記述が必要なので) */
|
|
15
15
|
flex-grow: 0;
|
|
16
16
|
flex-shrink: 0;
|
|
17
17
|
flex-basis: calc((100% - 20px - 20px) / 3);
|
4
修正
answer
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
```CSS
|
|
21
21
|
/* 円の中にフォントアイコンがあるような場合。 */
|
|
22
|
-
/*
|
|
22
|
+
/* paddingで内側の余白を指定すると若干上にズレる場合があるのでdisplay: flex;で上下左右中央配置をしたい */
|
|
23
23
|
.btn-circle {
|
|
24
24
|
/* 子要素を上下左右中央配置 */
|
|
25
25
|
display: flex;
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
border-radius: 50%;
|
|
33
33
|
|
|
34
34
|
/* 文字サイズ (=アイコンのサイズ) + 左右の余白 */
|
|
35
|
-
width: calc(1em +
|
|
35
|
+
width: calc(1em + 0.75em + 0.75em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
|
|
36
|
-
height: calc(1em +
|
|
36
|
+
height: calc(1em + 0.75em + 0.75em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
|
|
37
37
|
}
|
|
38
38
|
.btn-circle > .icon {
|
|
39
39
|
/* フォントアイコン */
|
3
円の中にフォントアイコンがあるシチュエーションを追記しました。
answer
CHANGED
|
@@ -18,6 +18,29 @@
|
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
```CSS
|
|
21
|
+
/* 円の中にフォントアイコンがあるような場合。 */
|
|
22
|
+
/* 「padding: 1.25em」で指定すると若干上にズレる場合があるのでflexで上下左右中央配置をしたい */
|
|
23
|
+
.btn-circle {
|
|
24
|
+
/* 子要素を上下左右中央配置 */
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
|
|
29
|
+
/* 余計な余白が生じないようにする + 角丸の指定 */
|
|
30
|
+
line-height: 1;
|
|
31
|
+
letter-spacing: 0;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
|
|
34
|
+
/* 文字サイズ (=アイコンのサイズ) + 左右の余白 */
|
|
35
|
+
width: calc(1em + 1.25em + 1.25em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
|
|
36
|
+
height: calc(1em + 1.25em + 1.25em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
|
|
37
|
+
}
|
|
38
|
+
.btn-circle > .icon {
|
|
39
|
+
/* フォントアイコン */
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```CSS
|
|
21
44
|
/* 無理やり感がありますが.. */
|
|
22
45
|
/* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */
|
|
23
46
|
top: calc(-1 * ((1em + 5px) * 3 + 20px + 20px) / 2);
|
2
修正
answer
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
書籍については「便利な使い方」という形で紹介しているものはまだ見たことがないです。
|
|
2
|
+
が、私はよく使うので、以下に例を挙げてみます。
|
|
3
|
+
|
|
1
4
|
> ネットで検索はしましたが、思ったほど使いみちは少ないですね。
|
|
2
5
|
|
|
3
6
|
例を挙げると以下です。
|
|
@@ -15,8 +18,9 @@
|
|
|
15
18
|
```
|
|
16
19
|
|
|
17
20
|
```CSS
|
|
18
|
-
/*
|
|
21
|
+
/* 無理やり感がありますが.. */
|
|
22
|
+
/* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */
|
|
19
|
-
|
|
23
|
+
top: calc(-1 * ((1em + 5px) * 3 + 20px + 20px) / 2);
|
|
20
24
|
```
|
|
21
25
|
|
|
22
26
|
異なる単位の数字を計算するようなシチュエーションで便利なことがよくあります。
|
1
修正
answer
CHANGED
|
@@ -2,16 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
例を挙げると以下です。
|
|
4
4
|
|
|
5
|
+
```CSS
|
|
5
6
|
/* line-heightのルールを指定 */
|
|
6
7
|
line-height: calc(1em + 10px);
|
|
8
|
+
```
|
|
7
9
|
|
|
10
|
+
```CSS
|
|
8
11
|
/* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが) */
|
|
9
12
|
flex-grow: 0;
|
|
10
13
|
flex-shrink: 0;
|
|
11
14
|
flex-basis: calc((100% - 20px - 20px) / 3);
|
|
15
|
+
```
|
|
12
16
|
|
|
17
|
+
```CSS
|
|
13
18
|
/* 要素の高さを算出しheightに指定するような場合 */
|
|
14
19
|
height: calc(1em + 10px + 20px + 20px);
|
|
20
|
+
```
|
|
15
21
|
|
|
16
22
|
異なる単位の数字を計算するようなシチュエーションで便利なことがよくあります。
|
|
17
23
|
|