回答編集履歴
1
コメント質問への回答を追記：flexにしたp要素のテキスト位置について
answer
CHANGED
|
@@ -41,6 +41,9 @@
|
|
|
41
41
|
|
|
42
42
|
.name {
|
|
43
43
|
flex-grow: 1;
|
|
44
|
+
flex-shrink: 1;
|
|
45
|
+
min-width: calc(50% + 1px);
|
|
46
|
+
max-width: calc(50% + 1px);
|
|
44
47
|
margin: 0;
|
|
45
48
|
padding: 0 1px 0 0;
|
|
46
49
|
background-image: linear-gradient(#C4C4C4, #C4C4C4);
|
|
@@ -51,15 +54,18 @@
|
|
|
51
54
|
|
|
52
55
|
.item {
|
|
53
56
|
flex-grow: 1;
|
|
57
|
+
flex-shrink: 1;
|
|
54
58
|
}
|
|
55
59
|
```
|
|
56
60
|
|
|
57
|
-
これですと、仮にユーザーがブラウザのウィンドウサイズを変更し、`info`クラス`div`要素の幅が変わったとしても、区切り線は中央位置のままです。
|
|
61
|
+
これですと、仮にユーザーがブラウザのウィンドウサイズを変更し、`info`クラス`div`要素の幅が変わったとしても、区切り線は（ほぼ）中央位置のままです。
|
|
58
62
|
|
|
59
63
|
なお、`name`クラス`p`要素の範囲内で背景として線を描くため、そのままですと、この区切り線は完全な中心線ではなく、`name`クラス`p`要素に`1px`分寄った線になります。
|
|
60
64
|
|
|
61
65
|
その対策として、`name`クラスに`padding-right: 1px;`を設定し、`name`クラスの幅を`item`クラスより`1px`分大きくして、区切り線が中心にくるように調整しています。
|
|
62
66
|
|
|
67
|
+
とはいえ、今回は`width`関連の値に`%`を用いたため、描画時に値が算出される際に小数点以下がどう処理されるかによって、若干中央からズレる可能性はあります。
|
|
68
|
+
|
|
63
69
|
---
|
|
64
70
|
|
|
65
71
|
ちなみに、`background-image`には`linear-gradient`を複数設定できますので、区切り線を２本線や３本線にカスタマイズすることも可能です。
|
|
@@ -77,4 +83,49 @@
|
|
|
77
83
|
background-size: 1px 80%, 1px 80%;
|
|
78
84
|
background-position: right center, calc(100% - 4px) center;
|
|
79
85
|
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
#####追記：flexにしたp要素のテキスト位置について
|
|
91
|
+
|
|
92
|
+
`p`要素の内容物であるテキストは、それ自体は要素ではありませんが、独自の表示範囲を持っています。`p`要素を`flex`にすると、`p`要素のテキストと（存在する場合は）擬似要素の`before`と`after`の内容が、`flex`設定通りに表示されます。
|
|
93
|
+
|
|
94
|
+
上のコードの一部を、以下のように変更して、どう表示されるか試してみてください。
|
|
95
|
+
|
|
96
|
+
```HTML
|
|
97
|
+
<p class="name">データ<br>デー<br>デ</p>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
```CSS
|
|
101
|
+
/* 既存の.nameに追加で */
|
|
102
|
+
.name {
|
|
103
|
+
text-align: left;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.name::before {
|
|
107
|
+
content: 'before';
|
|
108
|
+
background-color: gold;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.name::after {
|
|
112
|
+
content: 'after';
|
|
113
|
+
background-color: lightskyblue;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
`p`要素の`before`、テキスト、`after`が、`flex`設定により`center`に`row`並びで表示され、テキスト自体はテキスト範囲内で左揃えに表示されているのが確認できるかと思います。
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
`.name`の`text-align`を`right`や`center`に変更してみると、テキスト枠内で文字が整列されるのがより明確に分かるでしょう。
|
|
122
|
+
|
|
123
|
+
なおテキストは、このように要素の設定で位置を制御することも可能ですが、テキスト自体は要素ではないため直接制御することはできません。
|
|
124
|
+
|
|
125
|
+
テキストを個別に装飾したい場合は、`span`タグ等で囲み、要素化する必要があります。
|
|
126
|
+
|
|
127
|
+
一度、以下のようなシンプルなテストコードを使って、デフォルトの`p`要素とテキストの背景に色を付けて`text-align`が`left`、`center`、`right`の時の各位置を見ておくと、flex設定時との違いがよく分かるかもしれません。
|
|
128
|
+
|
|
129
|
+
```HTML
|
|
130
|
+
<p style="background-color: mistyrose; text-align: center;"><span style="background-color: lightskyblue;">テキスト</span></p>
|
|
80
131
|
```
|