回答編集履歴
2
shrink is better
answer
CHANGED
|
@@ -61,6 +61,9 @@
|
|
|
61
61
|
.text { width: calc(100% - 150px); }
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
+
**追記：**
|
|
65
|
+
他の回答者様の.image-profileに`flex-shrink: 0`をつける方法の方がスマートだと感じました…！
|
|
66
|
+
|
|
64
67
|
##### 画像エリア（画像と文字をいれるコンテイナー）の設定
|
|
65
68
|
`.image-porofile`の縦横を150pxに指定する以外に以下のことをします。
|
|
66
69
|
- `position:relative`
|
1
詳細追加
answer
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
デモページを作成しました。併せてご覧ください。
|
|
2
|
+
- [Demo on JSFiddle](https://jsfiddle.net/4tgmc07h/1)
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
### コード例
|
|
4
|
-
https://jsfiddle.net/tsgxwofj/42/
|
|
5
|
-
|
|
6
5
|
```html
|
|
7
6
|
<div class="box">
|
|
8
7
|
<div class="image-profile">
|
|
9
8
|
<img class="image" src="https://placehold.jp/150x150.png" alt="" width="100px" height="100px">
|
|
10
|
-
|
|
9
|
+
<div class="profile">男性</div>
|
|
11
10
|
</div>
|
|
12
11
|
<div class="text">ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。</div>
|
|
13
12
|
</div>
|
|
@@ -23,32 +22,70 @@
|
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
.image-profile {
|
|
26
|
-
width: 150px; /*
|
|
25
|
+
width: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
|
|
27
|
-
height: 150px; /*
|
|
26
|
+
height: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
|
|
28
|
-
margin-right: 10px; /*
|
|
27
|
+
margin-right: 10px; /* コンテイナーと文章の間の余白 */
|
|
29
|
-
position: relative; /*
|
|
28
|
+
position: relative; /* 子要素の移動の基点に設定する */
|
|
30
29
|
background-color: white;
|
|
31
30
|
border-radius: 50%;
|
|
32
|
-
overflow: hidden; /*
|
|
31
|
+
overflow: hidden; /* 子要素のはみ出た部分は非表示にする */
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
.image {
|
|
36
|
-
width: 100%; /*
|
|
35
|
+
width: 100%; /* コンテイナーの横幅いっぱい（150%） */
|
|
37
|
-
height: 100%; /*
|
|
36
|
+
height: 100%; /* コンテイナーの高さいっぱい（150%） */
|
|
38
|
-
object-fit: cover;
|
|
37
|
+
object-fit: cover; /* ↑の指定だけだと、長方形の画像の場合縦横比が崩れた形で変形されてしまうので、親要素の形状に切り抜かれるようにする */
|
|
39
38
|
/* padding: 10px; */
|
|
40
39
|
/* margin: 10px; */
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
.profile {
|
|
44
|
-
position: absolute; /*
|
|
43
|
+
position: absolute; /* 親要素の上に重ねる */
|
|
45
|
-
left: 50%; /*
|
|
44
|
+
left: 50%; /* 左から50%の位置に移動（つまり右に移動） */
|
|
46
|
-
bottom: 10px; /*
|
|
45
|
+
bottom: 10px; /* 下から10pxの位置に移動 */
|
|
47
|
-
transform: translateX(-50%); /*
|
|
46
|
+
transform: translateX(-50%); /* 右に行き過ぎているので、文字の長さの半分だけ左に移動 */
|
|
48
47
|
text-align: center;
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
.text {
|
|
52
|
-
width: calc(100% - 150px); /*
|
|
51
|
+
width: calc(100% - 150px); /* 文章エリアの横幅は、親要素全体の幅から画像の幅を引いたもの */
|
|
53
52
|
}
|
|
54
|
-
```
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 解説
|
|
56
|
+
##### 画像エリアと文章エリアの横幅を決める
|
|
57
|
+
- `.image-profile`の横幅が150pxなので、
|
|
58
|
+
- `.text`の横幅は、`.box`全体の横幅から150pxを引いたものになります。
|
|
59
|
+
これをCSSに計算させてやるために`calc()`を使用し、以下のように記述します。
|
|
60
|
+
```css
|
|
61
|
+
.text { width: calc(100% - 150px); }
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
##### 画像エリア（画像と文字をいれるコンテイナー）の設定
|
|
65
|
+
`.image-porofile`の縦横を150pxに指定する以外に以下のことをします。
|
|
66
|
+
- `position:relative`
|
|
67
|
+
- 子要素を`position: absolute`で座標による移動をする時に、画像エリアが基点となるように指定するため`position: relative`を指定します。
|
|
68
|
+
- これをかかないと、子要素はbodyを起点に座標移動してしまいます。
|
|
69
|
+
- `border-radius: 50%` & `overflow: hidden`
|
|
70
|
+
- コンテイナー自体を丸い形にし、はみ出た子要素の部分は非表示にするようにします。
|
|
71
|
+
- これにより、画像も文字もまる形からはみ出た部分は非表示にになります。
|
|
72
|
+
|
|
73
|
+
##### 画像のサイズを指定する
|
|
74
|
+
- `.image`にて縦横のサイズを100%としました。これによりコンテイナーサイズと同じサイズ（＝150px）となります。
|
|
75
|
+
- このままだと長方形の画像だと、縦横150pxに併せてぐちゃっと変形した画像になってしまいます。
|
|
76
|
+
- `object-fit: cover`をつけると、変形ではなく、指定したサイズに切り抜かれます。
|
|
77
|
+
- つまり今回の場合150px x 150pxに切り抜かれます。
|
|
78
|
+
|
|
79
|
+
##### 文字を移動させる
|
|
80
|
+
`.profile`の文字を、コンテイナーに対して水平は中央、垂直は下の方移動させます。
|
|
81
|
+
- `position: absolute`を指定すると、基点から座標移動できます。
|
|
82
|
+
- デフォルトでは基点は`<body>`なのですが、
|
|
83
|
+
- 今回は事前にコンテイナーの.image-profileに`position: relative`を書いておいたので、それが基準となります。
|
|
84
|
+
- ちなみにpositionはデフォルトでは`position: static`であり、static以外だったらrelativeに限らず何でも起点となれます。
|
|
85
|
+
- `bottom: 10px`で、コンテイナーの下から10pxの場所を指定。
|
|
86
|
+
- 水平要素を中央寄せするために以下のことをしています。
|
|
87
|
+
- `left: 50%`で文字の左端が、中央にいくようにしています。
|
|
88
|
+
- こんな感じ→`[----------|text------]`
|
|
89
|
+
- これだと行き過ぎているので、文字の長さの半分だけ左に戻してやります。
|
|
90
|
+
- こんな感じ→`[--------te|xt--------]`
|
|
91
|
+
- そのための記述が`transform: translateX(-50%)`です。
|