teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSSに関する質問calc()を利用した技術が書かれている専門書はありますでしょうか

編集履歴

回答編集履歴

10

修正

2020/06/03 07:06

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -116,4 +116,4 @@
116
116
 
117
117
 
118
118
 
119
- 「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときに数字の根拠が持てないですが、calc()を使って指定していると文字サイズだけ変えたり、余白分のpx数だけ変更することで悩まずに済むので楽な場合もあります。
119
+ 「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときや、デザインラフがない状況でレスポンシブ対応をしなければならないときに数字の根拠が持てないのですが、calc()を使って指定していると、悩まずに済む場合もあります。

9

修正

2020/06/03 07:06

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -116,4 +116,4 @@
116
116
 
117
117
 
118
118
 
119
- 「43px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときに数字の根拠が持てないですが、calc()を使って指定していると文字サイズだけ変えたり、余白分のpx数だけ変更することで悩まずに済むので楽な場合もあります。
119
+ 「44px」など数値だけ指定されていると、なぜその数値になっているのかわからずデザインを作るときに数字の根拠が持てないですが、calc()を使って指定していると文字サイズだけ変えたり、余白分のpx数だけ変更することで悩まずに済むので楽な場合もあります。

8

修正

2020/06/03 07:03

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  width: 640px;
94
94
 
95
- max-width: calc(100% - 15px - 15px); /* 15pxは左右の余白 */
95
+ max-width: calc(100vw - 15px - 15px); /* 15pxは左右の余白 */
96
96
 
97
97
  }
98
98
 

7

ラッパー要素での活用方法を追記しました。

2020/06/03 07:01

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -84,6 +84,24 @@
84
84
 
85
85
  ```CSS
86
86
 
87
+ /* .containerなどラッパー要素について、ブレークポイントを使わなくてもこの記述だけでOKかもしれません。 */
88
+
89
+ .container {
90
+
91
+ margin: 0 auto;
92
+
93
+ width: 640px;
94
+
95
+ max-width: calc(100% - 15px - 15px); /* 15pxは左右の余白 */
96
+
97
+ }
98
+
99
+ ```
100
+
101
+
102
+
103
+ ```CSS
104
+
87
105
  /* 無理やり感がありますが.. */
88
106
 
89
107
  /* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */

6

修正

2020/06/03 07:00

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ```CSS
16
16
 
17
- /* line-heightのルールを指定 */
17
+ /* line-heightのルールを指定。SCSSの場合は「calc(...)」の記述を変数化しています。 */
18
18
 
19
19
  line-height: calc(1em + 10px);
20
20
 

5

修正

2020/06/03 06:56

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  ```CSS
26
26
 
27
- /* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが) */
27
+ /* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが、IE11では専用の記述が必要なので) */
28
28
 
29
29
  flex-grow: 0;
30
30
 

4

修正

2020/06/03 06:54

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  /* 円の中にフォントアイコンがあるような場合。 */
42
42
 
43
- /* 「padding: 1.25em」で指定すると若干上にズレる場合があるのでflexで上下左右中央配置をしたい */
43
+ /* paddingで内側の余白を指定すると若干上にズレる場合があるのでdisplay: flex;で上下左右中央配置をしたい */
44
44
 
45
45
  .btn-circle {
46
46
 
@@ -66,9 +66,9 @@
66
66
 
67
67
  /* 文字サイズ (=アイコンのサイズ) + 左右の余白 */
68
68
 
69
- width: calc(1em + 1.25em + 1.25em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
69
+ width: calc(1em + 0.75em + 0.75em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
70
70
 
71
- height: calc(1em + 1.25em + 1.25em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
71
+ height: calc(1em + 0.75em + 0.75em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
72
72
 
73
73
  }
74
74
 

3

円の中にフォントアイコンがあるシチュエーションを追記しました。

2020/06/03 06:39

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -38,6 +38,52 @@
38
38
 
39
39
  ```CSS
40
40
 
41
+ /* 円の中にフォントアイコンがあるような場合。 */
42
+
43
+ /* 「padding: 1.25em」で指定すると若干上にズレる場合があるのでflexで上下左右中央配置をしたい */
44
+
45
+ .btn-circle {
46
+
47
+ /* 子要素を上下左右中央配置 */
48
+
49
+ display: flex;
50
+
51
+ align-items: center;
52
+
53
+ justify-content: center;
54
+
55
+
56
+
57
+ /* 余計な余白が生じないようにする + 角丸の指定 */
58
+
59
+ line-height: 1;
60
+
61
+ letter-spacing: 0;
62
+
63
+ border-radius: 50%;
64
+
65
+
66
+
67
+ /* 文字サイズ (=アイコンのサイズ) + 左右の余白 */
68
+
69
+ width: calc(1em + 1.25em + 1.25em); /* 文字の横幅 (=アイコンのサイズ) + 左右の余白 */
70
+
71
+ height: calc(1em + 1.25em + 1.25em); /* 文字の高さ (=アイコンのサイズ) + 左右の余白 */
72
+
73
+ }
74
+
75
+ .btn-circle > .icon {
76
+
77
+ /* フォントアイコン */
78
+
79
+ }
80
+
81
+ ```
82
+
83
+
84
+
85
+ ```CSS
86
+
41
87
  /* 無理やり感がありますが.. */
42
88
 
43
89
  /* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */

2

修正

2020/06/03 06:37

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,3 +1,9 @@
1
+ 書籍については「便利な使い方」という形で紹介しているものはまだ見たことがないです。
2
+
3
+ が、私はよく使うので、以下に例を挙げてみます。
4
+
5
+
6
+
1
7
  > ネットで検索はしましたが、思ったほど使いみちは少ないですね。
2
8
 
3
9
 
@@ -32,9 +38,11 @@
32
38
 
33
39
  ```CSS
34
40
 
35
- /* 要素の高さを算出しheightに指定するような場合 */
41
+ /* 無理やり感がありますが.. */
36
42
 
43
+ /* 3行の高さを持つ要素の高さの半分だけ上方向にはみ出すような場合 (行の高さ * 3行、上下のpaddingは20px) */
44
+
37
- height: calc(1em + 10px + 20px + 20px);
45
+ top: calc(-1 * ((1em + 5px) * 3 + 20px + 20px) / 2);
38
46
 
39
47
  ```
40
48
 

1

修正

2020/06/02 12:51

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -6,11 +6,17 @@
6
6
 
7
7
 
8
8
 
9
+ ```CSS
10
+
9
11
  /* line-heightのルールを指定 */
10
12
 
11
13
  line-height: calc(1em + 10px);
12
14
 
15
+ ```
13
16
 
17
+
18
+
19
+ ```CSS
14
20
 
15
21
  /* 余白ありの3分割の横幅を指定 (display: grid;でもいいですが) */
16
22
 
@@ -20,11 +26,17 @@
20
26
 
21
27
  flex-basis: calc((100% - 20px - 20px) / 3);
22
28
 
29
+ ```
23
30
 
31
+
32
+
33
+ ```CSS
24
34
 
25
35
  /* 要素の高さを算出しheightに指定するような場合 */
26
36
 
27
37
  height: calc(1em + 10px + 20px + 20px);
38
+
39
+ ```
28
40
 
29
41
 
30
42