キャプション文字を回転させつつ画像と横並びにする

HTML5
CSS
下記画像のようにHTMLコーディングしたいのですが、上手くいきません

↓現在試行錯誤しているHTMLとCSS

HTML
1<div class="img-box">
2    <p class="figcaption">画像のキャプション</p>
3    <div class="contents-img"><img src="img/contents/画像.jpg"></div>
4</div>

CSS
1.img-box { width: 100%; height: auto; display: table;}
2.contents-img { width: 90%; display: table-cell;}
3.contents-img img { width: 100%; }
4.figcaption { transform: rotate(-90deg); display: table-cell; }

色々試してはいるのですがどうしても実現できずにいます。
ご教示いただければ幸いです。

行動規範の内容に同意します

回答2件

※解決済みになっていますが、一応回答します。
writing-modeプロパティ、text-orientationプロパティを使うことで質問者さんが実現したいことが行えると思います。といっても、それぞれのプロパティの実装状況を見る限りではまだまだ使えるものではありませんので、あくまでも参考にとどめておくのが良いと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .img-box {
8            position: absolute;
9            left: 0;
10            display: flex;
11        }
12
13        .figcaption {
14            transform: rotate(180deg);
15            writing-mode: vertical-rl;
16            text-orientation: sideways;
17        }
18    </style>
19</head>
20<body>
21<div class="img-box">
22    <p class="figcaption">画像のキャプション</p>
23    <div class="contents-img">
24        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/contents/画像.jpg">
25    </div>
26</div>
27</body>
28</html>

投稿2017/11/27 06:34

s8_chu

総合スコア14731

Honma

2017/11/27 06:43

s8_chu 様ご回答いただきありがとうございます。とても参考になりました。

行動規範の内容に同意します

自己解決

下記のコーディングで自己解決いたしました。
ご協力いただきありがとうございました。

HTML
1    <div class="img-box">
2        <div class="figcaption"><div class="figcaption-inner">画像のキャプション</div></div>
3        <div class="contents-img"><img src="img/contents/画像.jpg"></div>
4    </div>

CSS
1    .img-box { width: 100%; }
2    .contents-img { width: 90%; float: left; }
3    .contents-img img { width: 100%; }
4    .figcaption-inner {
5        font-size: 16px;
6        -webkit-transform: rotate(-90deg); 
7        rotation-point: left bottom;
8        -moz-transform: rotate(-90deg);
9        -moz-transform-origin: 50% 50%; 
10        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
11        width: 240px;
12        height: 240px;
13    }
14    .figcaption {
15        width: 20px;
16        height: 240px;
17        overflow: hidden;
18        font-style: italic;
19        float: left;
20        text-align: right;
21    }