[CSS3,イメージ,ボックス,配置]写真などの大きな画像の肩(左上や右上など)にリボン画像と文字を斜めに傾けた上で重ねて掲載するCSSの書き方を解説。重ねる画像自体は斜めにはせず、真っ直ぐな画像を用意しておき、その画像に重ねるテキストと一緒にCSSで傾けるのがポイントです。その方が、画像とテキストの傾きを完全に一致させられるので微調整の手間が省けます。文字を画像化する必要もないので、検索性も向上するでしょう。写真などの大きな画像の肩(左上や右上など)にリボン画像を斜めに重ねた上で、そこにキャプション的な文字列も併せて斜めに掲載するデザインの作り方を解説致します。HTMLに特段の工夫は要らないので、基本的にはCSSの書き方をちょっと工夫するだけで作れます。工夫というほどのテクニックでもなく、簡単です。※注:大きな写真の方に何かちょっとした装飾用画像を載せるとすればたいてい「リボン画像」だろうと思ったので本記事の解説文ではすべて「リボン画像」と表記しています。良さげな画像がなかったので、本記事のサンプルでは、リボンではなく木目看板画像と絵の具ペイント画像の2種類を使って掲載しています。その辺は適当に頭の中で読み替えて下さい。(^_^;)リボン画像は斜めにしない真っ直ぐな状態で用意しておき、CSSを使って任意の角度に傾ける重ねるリボン画像自体は斜めにはせず、真っ直ぐな画像を用意しておき、「重ねて掲載したいテキスト」と一緒にCSSを使って傾けるのがポイントです。その方が、画像とテキストの傾きを完全に一致させられるので微調整の手間が省けます。文字を画像化する必要はないので、検索性も損なうことなく維持できます。下図のような感じで画像の左上にリボン画像とキャプションをテキストで重ねます。(※下図は説明用の矢印を加えるために全体を画像にして掲載していますが、本記事の末尾には実際の表示例を用意しています。)このように作ると、大写真の肩部分に重ねるリボン画像も含めて全体を画像化してしまうよりも、以下のようなメリットが得られます。キャプション部分の文字列はテキストデータのままなので、HTMLソースを書き換えるだけで修正できるので簡単。コピーしたり検索したりもできる。肩に重ねるリボン画像は独立した画像なので、同じリボン画像を複数の大画像に重ねて使い回すのも簡単。読む画像は1つだけなので、読み込み待ち時間も最小限で済む。更新するためだけに画像を作り直す必要もない。レスポンシブWebデザインを採用する場合、キャプション部分も画像化してしまうと文字が小さくなりすぎたり大きくなりすぎたりする弊害があるが、キャプション部分が独立しているため肩のリボン画像もキャプション文字列も見える範囲内の大きさに留めておける。このように(全体を画像化してしまうよりも)メンテナンス性も高い掲載方法です。画像とキャプションをfigure要素を使ったHTMLとして書く(HTMLソース)まずは、HTMLソースを記述しましょう。これはとても簡単です。div要素を駆使しても良いのですが、ここでは画像と「肩に載せるキャプション」との関連が分かりやすいように、figure要素を使って記述してみます。難しいことはありません。書いておく......というだけのシンプルなものです。このHTMLだけだと、単に「大画像の後にキャプション(テキスト)が掲載されるだけ」です。※キャプション部分の背景画像は、後からCSSで指定するため、HTMLソース上には現れません。いうclass名を付加しています。この辺は自由にカスタマイズして下さい。HTMLソースは上記の4行だけ(使う要素は3種類だけ)です。次に、このidに対してCSSで装飾を追加しましょう。キャプションを傾けて大画像の左上に重ねるCSSを書く(CSSソース)次に、CSSソースを記述しましょう。CSSソースはやや長めですが、基本が分かれば特に難しいことはありません。基本を分からなくても、数値さえ変更すればわりと自由にカスタマイズできると思います。CSSソースの全体をご紹介しておきます。レスポンシブ化するため、大画像の横幅最大値を100%に留めておく。*/}上記のCSSソースのポイントをざっと解説しておきます。(※以下のCSSソースは、解説のために上記のCSSソースを部分的に引用したものなので、新しい記述はありません。対するCSSまずは、大画像も肩に載せる小画像もキャプションテキストも何もかもを含めて全体を囲んでいるfigure要素に対するCSSについてです。relative;」の記述だけです。「画像+テキスト」で作成したキャプションを大画像の肩に載せるためには、キャプションを絶対配置でレイアウトする必要がありますから、この(全体を囲む要素になる)figure要素を「絶対配置の基準」にする必要があります。そのために、positionプロパティに値「relative」を指定しておく必要があります。ここではそれ以外に、displayプロパティとmarginプロパティを併用していますが、これらは必須ではありません。inline-block;」では、大画像を横方向に並べるためにインラインブロック化しています。画像を横に並べる必要がないなら、この記述は不要です。100px;」は、周囲に余白を設けているだけです。上に100px、右にはゼロ、下に1文字分(=1em)、左に100pxほどの余白を作っています。対するCSS次に、大画像を掲載するためのimg要素に対するCSSです。レスポンシブ化するため、大画像の横幅最大値を100%に留めておく。*/}ここでは必須の記述はありません。100%;」のように、横幅の最大値を100%にしているのは、全体をレスポンシブ化するためです。このように書いておくと、閲覧者の画面幅が狭い場合には、大画像が自動的に縮小されるため、画面からはみ出さずに済みます。この辺の画像サイズ自動調整方法については、別途記事「画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS」あたりもご参照下さい。対するCSSfigcaption要素に対する装飾部分がこのCSSソースで最も長い部分であり、今回の本題でもあります。}長いので、まずは先程ご紹介したCSSソースのうち、figcaption要素に対する装飾の部分を序盤・中盤・終盤の3区画に分けて再掲しつつ解説します。0;まず上記の10行目~13行目では、「大画像の肩に載せるキャプション」を絶対配置にして掲載位置(座標)を調整しています。topプロパティとleftプロパティを使っていますので、左上端を基準にして位置を調整しています。右上を基準に調整したいなら、topプロパティとrightプロパティを使えば良いでしょう。topプロパティの値をマイナスにすると、原点座標(=ベースの大画像の左上端)よりも上側へ移動させられます。leftプロパティの値をマイナスにすると、原点座標(=ベースの大画像の左上端)よりも左側へ移動させられます。大画像の肩にオブジェクトが載っているように見せるためには、多少は外側へはみ出すように配置しないといけませんから、ここではtopプロパティの値もleftプロパティの値もマイナスを指定します。どれくらいマイナスにする必要があるかは重ねる画像次第ですから、実際にお使いになる画像によって様々に変化させてみて、ちょうど良さそうな距離を調べて下さい。*/上記の14行目~21行目では、「大画像の肩に載せるキャプション」について、枠のサイズ、背景画像、キャプションテキストのサイズを調整しています。上記の各数値は、実際に掲載したい内容に合わせて修正して下さい。そのままコピーしただけではうまく合わないでしょう。paddingプロパティは、キャプション背景用画像の描画内容のどの位置にテキストを配置したいかによって、上下左右の余白量を調整して下さい。ここでは、「上に80px・右に40px・下はゼロ・左に40px」の余白を画像の内側に設けています。*/最後の22行目~23行目では、「大画像の肩に載せるキャプション」を左に15度ほど傾けています。角度の単位は「deg」です。360度で一周しますから、上記のように「-15deg」と指定しても「345deg」と指定しても同じです。「左に傾けたい場合はマイナスの値(-1deg~-90deg)」で指定し「右に傾けたい場合はプラスの値(1deg~90deg)」で指定する......のようにすると分かりやすいでしょう。値を変えてみて望みの角度を見つけて下さい。(90degを超えると傾きすぎますし、180degだと上下がひっくり返ります。)必要なCSSは以上です。写真の肩にリボン画像と文字を斜めに重ねて掲載する(動作サンプル)上記までにご紹介したHTML+CSSソースを実際に表示させると、以下のように見えます。大画像の左上肩に載っているキャプションはテキストデータなので、範囲指定してコピーしたり、ページ内検索機能を使って検索したりできます。画像とキャプションのセットを、CSSで傾けて写真に重ねるこのキャプションはテキストで掲載してあります。※ここでは、大画像自体はレスポンシブになっていて大きさが自動で変わりますが、肩に載せるキャプション部分の大きさは常に変わりません。その辺は、メディアクエリの書き方を使って適宜変更させると良いでしょう。ソースが長くなることと、「肩に載せる」という本題とは少々離れるのでここでは省略しました。いうわけで、写真などの大きな画像の肩(左上や右上など)にリボン画像と文字を斜めに傾けた上で重ねて掲載するHTML+CSSの書き方を解説しました。いや、サンプルではリボン画像自体は使いませんでしたけども。どんな画像でも肩に載せられます。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。下記の電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:例えばデザイナーである貴方が作成なさったデザイン物のHTML+CSSでの実装作業など、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。▲同じデザインでもCSSの書き方には多数の方法があります。どんな書き方を選択すればメンテナンス性の高いCSSソースになるのかがよく分かってお勧めです。▲PCだけでなく様々なサイズのモバイル端末に対応させるためのCSSの書き方などについて、カラーで見やすく解説されていて分かりやすいです。▲ユーザビリティとは何なのかを分かりやすく解説した本。読み物としても面白いです。■だから、そのデザインはダメなんだ。良い・悪いが比べてわかる▲何が原因で分かりにくくなってしまうのかを列挙したサンプル集。「こういうデザインだけは避けておこう」というマイナス回避の手段としても。知らないと困るWebデザインの新ルール4▲最近よく使われている様々なデザインパーツについて、それぞれの実現方法としてHTML+CSSソースの書き方を紹介しているTips集。カラーで見やすいです。掌田津耶乃さんによるBootstrap解説書。現場の新標準ガイド(マイナビ出版/368ページ)CSS(スタイルシート)に関する解説書は、HTMLを書く知識がどれくらいあるのかの前提が様々なので、自分に合う解説なのかどうかをプレビューなどで確認したり、目次から大まかな内容はチェックしておいた方が良いと思います。>(次の記事)スタイルシートTipsふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(7)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。▼当サイト内外で関連しそうな記事などが自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。