写真の肩にリボン画像と文字を斜めに重ねて掲載した表示例

写真などの大きな画像の肩（左上や右上など）にリボン画像を斜めに重ねた上で、そこにキャプション的な文字列も併せて斜めに掲載するデザインの作り方を解説致します。HTMLに特段の工夫は要らないので、基本的にはCSSの書き方をちょっと工夫するだけで作れます。工夫というほどのテクニックでもなく、簡単です。

※注：大きな写真の方に何かちょっとした装飾用画像を載せるとすればたいてい「リボン画像」だろうと思ったので本記事の解説文ではすべて「リボン画像」と表記しています。が、良さげな画像がなかったので、本記事のサンプルでは、リボンではなく木目看板画像と絵の具ペイント画像の2種類を使って掲載しています。その辺は適当に頭の中で読み替えて下さい。(^_^;)

リボン画像は斜めにしない真っ直ぐな状態で用意しておき、CSSを使って任意の角度に傾ける

重ねるリボン画像自体は斜めにはせず、真っ直ぐな画像を用意しておき、「重ねて掲載したいテキスト」と一緒にCSSを使って傾けるのがポイントです。その方が、画像とテキストの傾きを完全に一致させられるので微調整の手間が省けます。もちろん文字を画像化する必要はないので、検索性も損なうことなく維持できます。

例えば、下図のような感じで画像の左上にリボン画像とキャプションをテキストで重ねます。（※下図は説明用の矢印を加えるために全体を画像にして掲載していますが、本記事の末尾には実際の表示例を用意しています。）

このように作ると、大写真の肩部分に重ねるリボン画像も含めて全体を画像化してしまうよりも、以下のようなメリットが得られます。

• キャプション部分の文字列はテキストデータのままなので、HTMLソースを書き換えるだけで修正できるので簡単。コピーしたり検索したりもできる。
• 肩に重ねるリボン画像は独立した画像なので、同じリボン画像を複数の大画像に重ねて使い回すのも簡単。読む画像は1つだけなので、読み込み待ち時間も最小限で済む。更新するためだけに画像を作り直す必要もない。
• レスポンシブWebデザインを採用する場合、キャプション部分も画像化してしまうと文字が小さくなりすぎたり大きくなりすぎたりする弊害があるが、キャプション部分が独立しているため肩のリボン画像もキャプション文字列も見える範囲内の大きさに留めておける。

このように（全体を画像化してしまうよりも）メンテナンス性も高い掲載方法です。

画像とキャプションをfigure要素を使ったHTMLとして書く（HTMLソース）

まずは、HTMLソースを記述しましょう。これはとても簡単です。div要素を駆使しても良いのですが、ここでは画像と「肩に載せるキャプション」との関連が分かりやすいように、figure要素を使って記述してみます。特に難しいことはありません。

<figure class="PhotoBox">
    <img src="画像URL" alt="代替文字">
    <figcaption>画像のキャプションをテキストで掲載</figcaption>
</figure>

上記のHTMLソースは、

• 全体を figure要素 で囲んでおき、
• メインの大画像を img要素 で掲載し、
• 大画像の肩に載せるキャプション(テキスト)を figcaption要素 で書いておく

……というだけのシンプルなものです。
このHTMLだけだと、単に「大画像の後にキャプション(テキスト)が掲載されるだけ」です。

※キャプション部分の背景画像は、後からCSSで指定するため、HTMLソース上には現れません。
※figure要素には、後からCSSで装飾を加えるために PhotoBox というclass名を付加しています。この辺は自由にカスタマイズして下さい。

HTMLソースは上記の4行だけ（使う要素は3種類だけ）です。
次に、このidに対してCSSで装飾を追加しましょう。

キャプションを傾けて大画像の左上に重ねるCSSを書く（CSSソース）

次に、CSSソースを記述しましょう。
CSSソースはやや長めですが、基本が分かれば特に難しいことはありません。基本を分からなくても、数値さえ変更すればわりと自由にカスタマイズできると思います。
まずは、CSSソースの全体をご紹介しておきます。

.PhotoBox {
    position: relative;         /* 必須(ベース位置にするため) */
    display: inline-block;      /* サンプルを横に並べるために指定(使用は必須ではない) */
    margin: 100px 0 1em 100px;  /* サンプル掲載のために画像の周囲に余白を設ける(使用は必須ではない) */
}
.PhotoBox img {
    max-width: 100%;   /* レスポンシブ化するため、大画像の横幅最大値を100％に留めておく。 */
}
.PhotoBox figcaption {
    position: absolute;           /* 必須(絶対配置にするため) */
    top: -50px;                   /* 掲載位置の調整(座標) */
    left: -50px;                  /* 掲載位置の調整(座標) */
    margin: 0;
    padding: 80px 40px 0 40px;    /* サイズ調整：配置 */
    width: 150px;                 /* サイズ調整：横幅 */
    height: 131px;                /* サイズ調整：高さ */
    background-image: url("framefruitssignboard.png");   /* キャプション背景に使う画像 */
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 1em;               /* サイズ調整：文字 */
    line-height: 1.3;             /* サイズ調整：行高 */
    transform: rotate(-15deg);    /* 傾きの度合い */
    transform-origin:top left;    /* 傾きの軸 */
}

上記のCSSソースのポイントをざっと解説しておきます。
（※以下のCSSソースは、解説のために上記のCSSソースを部分的に引用したものなので、新しい記述はありません。）

▼全体を囲む figure要素 に対するCSS

まずは、大画像も肩に載せる小画像もキャプションテキストも何もかもを含めて全体を囲んでいるfigure要素に対するCSSについてです。

.PhotoBox {
    position: relative;         /* 必須(ベース位置にするため) */
    display: inline-block;      /* サンプルを横に並べるために指定(使用は必須ではない) */
    margin: 100px 0 1em 100px;  /* サンプル掲載のために画像の周囲に余白を設ける(使用は必須ではない) */
}

ここで必須なのは「position: relative;」の記述だけです。「画像＋テキスト」で作成したキャプションを大画像の肩に載せるためには、キャプションを絶対配置でレイアウトする必要がありますから、この（全体を囲む要素になる）figure要素を「絶対配置の基準」にする必要があります。そのために、positionプロパティに値「relative」を指定しておく必要があります。

ここではそれ以外に、displayプロパティとmarginプロパティを併用していますが、これらは必須ではありません。

• 「display: inline-block;」では、大画像を横方向に並べるためにインラインブロック化しています。もし画像を横に並べる必要がないなら、この記述は不要です。
• 「margin: 100px 0 1em 100px;」は、周囲に余白を設けているだけです。上に100px、右にはゼロ、下に1文字分(＝1em)、左に100pxほどの余白を作っています。

▼メインの大画像を掲載する img要素 に対するCSS

次に、大画像を掲載するためのimg要素に対するCSSです。

.PhotoBox img {
    max-width: 100%;   /* レスポンシブ化するため、大画像の横幅最大値を100％に留めておく。 */
}

ここでは必須の記述はありません。「max-width: 100%;」のように、横幅の最大値を100％にしているのは、全体をレスポンシブ化するためです。このように書いておくと、閲覧者の画面幅が狭い場合には、大画像が自動的に縮小されるため、画面からはみ出さずに済みます。

この辺の画像サイズ自動調整方法については、別途記事「画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS」あたりもご参照下さい。

▼これが本題：「画像＋テキスト」で作成したキャプションを傾けて大画像の肩に載せる figcaption要素 に対するCSS

figcaption要素に対する装飾部分がこのCSSソースで最も長い部分であり、今回の本題でもあります。

.PhotoBox figcaption { ～中身14行～ }

長いので、まずは先程ご紹介したCSSソースのうち、figcaption要素に対する装飾の部分を序盤・中盤・終盤の3区画に分けて再掲しつつ解説します。

    position: absolute;           /* 必須(絶対配置にするため) */
    top: -50px;                   /* 掲載位置の調整(座標) */
    left: -50px;                  /* 掲載位置の調整(座標) */
    margin: 0;

まず上記の10行目～13行目では、「大画像の肩に載せるキャプション」を絶対配置にして掲載位置(座標)を調整しています。
topプロパティとleftプロパティを使っていますので、左上端を基準にして位置を調整しています。もし右上を基準に調整したいなら、topプロパティとrightプロパティを使えば良いでしょう。

• topプロパティの値をマイナスにすると、原点座標(＝ベースの大画像の左上端)よりも上側へ移動させられます。
• leftプロパティの値をマイナスにすると、原点座標(＝ベースの大画像の左上端)よりも左側へ移動させられます。

大画像の肩にオブジェクトが載っているように見せるためには、多少は外側へはみ出すように配置しないといけませんから、ここではtopプロパティの値もleftプロパティの値もマイナスを指定します。
どれくらいマイナスにする必要があるかは重ねる画像次第ですから、実際にお使いになる画像によって様々に変化させてみて、ちょうど良さそうな距離を調べて下さい。

    padding: 80px 40px 0 40px;    /* サイズ調整：配置 */
    width: 150px;                 /* サイズ調整：横幅 */
    height: 131px;                /* サイズ調整：高さ */
    background-image: url("framefruitssignboard.png");   /* キャプション背景に使う画像 */
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 1em;               /* サイズ調整：文字 */
    line-height: 1.3;             /* サイズ調整：行高 */

上記の14行目～21行目では、「大画像の肩に載せるキャプション」について、枠のサイズ、背景画像、キャプションテキストのサイズを調整しています。上記の各数値は、実際に掲載したい内容に合わせて修正して下さい。そのままコピーしただけではうまく合わないでしょう。

paddingプロパティは、キャプション背景用画像の描画内容のどの位置にテキストを配置したいかによって、上下左右の余白量を調整して下さい。ここでは、「上に80px・右に40px・下はゼロ・左に40px」の余白を画像の内側に設けています。

    transform: rotate(-15deg);    /* 傾きの度合い */
    transform-origin:top left;    /* 傾きの軸 */

最後の22行目～23行目では、「大画像の肩に載せるキャプション」を左に15度ほど傾けています。角度の単位は「deg」です。360度で一周しますから、上記のように「-15deg」と指定しても「345deg」と指定しても同じです。
とはいえ、基本的には、

• 「左に傾けたい場合はマイナスの値(-1deg～-90deg)」で指定し
• 「右に傾けたい場合はプラスの値(1deg～90deg)」で指定する

……のようにすると分かりやすいでしょう。

いろいろ値を変えてみて望みの角度を見つけて下さい。
（90degを超えると傾きすぎますし、180degだと上下がひっくり返ります。）

必要なCSSは以上です。

写真の肩にリボン画像と文字を斜めに重ねて掲載する（動作サンプル）

上記までにご紹介したHTML＋CSSソースを実際に表示させると、以下のように見えます。
大画像の左上肩に載っているキャプションはテキストデータなので、範囲指定してコピーしたり、ページ内検索機能を使って検索したりできます。

※ここでは、大画像自体はレスポンシブになっていて大きさが自動で変わりますが、肩に載せるキャプション部分の大きさは常に変わりません。その辺は、メディアクエリの書き方を使って適宜変更させると良いでしょう。ソースが長くなることと、「肩に載せる」という本題とは少々離れるのでここでは省略しました。

というわけで、写真などの大きな画像の肩（左上や右上など）にリボン画像と文字を斜めに傾けた上で重ねて掲載するHTML＋CSSの書き方を解説しました。いや、サンプルではリボン画像自体は使いませんでしたけども。もちろんどんな画像でも肩に載せられます。
ぜひ、試してみて下さい。

(更新日：2019年12月28日)