【参考】ストロングゼロ ジェネレーター
ランディングページなどで、「画面中央にいる登場人物の周囲に吹き出しを何個か配置したいとき」などに応用できるはず。
HTMLとCSSでストロングゼロジェネレーターの画像を再現
画面幅を縮めたときに文字と人物画像が重なってしまうときは、メディアクエリで文字のサイズや位置を調整すればある程度対処できる。
HTML
- 終身雇用の崩壊
- ストレス社会
- 鬱
- 年金問題
- 政治不信
- 老後
- 低賃金
- 将来の不安
- 介護
- 就職
- 結婚
- 閉塞感
- 脂肪肝
CSS
.bg {
max-width: 700px;
margin: 0 auto;
background-image:url('man.png'); /* 人物画像を適当に用意する */
background-position: center bottom;
background-repeat: no-repeat;
border: 1px solid #cccccc; /* 分かりやすいように周囲を囲む */
}
.items {
list-style: none;
height: 300px;
position: relative;
}
.item {
position: absolute;
}
/* 横書きの文字 */
.horizontal:nth-child(1) {
top:10px;
right:50px;
}
.horizontal:nth-child(2) {
top:20px;
left:100px;
}
.horizontal:nth-child(3) {
top:70px;
right:200px;
}
.horizontal:nth-child(4) {
top:100px;
left:100px;
}
.horizontal:nth-child(5) {
top:120px;
right:100px;
}
.horizontal:nth-child(6) {
bottom:50px;
right:150px;
}
.horizontal:nth-child(7) {
bottom:50px;
left:50px;
}
/* 縦書きの文字 */
.vertical {
writing-mode: vertical-rl; /* 縦書き */
}
.vertical:nth-child(8) {
top:20px;
left:20px;
}
.vertical:nth-child(9) {
top:10px;
left:60px;
}
.vertical:nth-child(10) {
top:50%;
right:20px;
}
.vertical:nth-child(11) {
top:50%;
left:200px;
}
.vertical:nth-child(12) {
bottom:20px;
right:200px;
}
.vertical:nth-child(13) {
bottom:30px;
right:30px;
}