ウェブのあれこれ
ウェブを活用したいひとのためのブログ
Photoshopいらず!?画像とテキストを組み合わせる簡単なCSS
2015/06/09 HTML/CSS

Photoshopいらず!?画像とテキストを組み合わせる簡単なCSS

コンテンツのメインビジュアルやスライドに画像とテキストを合わせた表現はよくありますよね。キャプションやアオリをPhotoshopなどで加工することで見栄えの良い画像を作成できますが、CSSだけでも簡単な表現なら何とかなります。

CSS3でスタイルによる表現方法が多彩に

ここ最近のモダンブラウザであれば当然CSS3には対応しています。中にはベンダープレフィックスが必要なプロパティもありますが、CSSによる視覚効果の幅は数年前に比べれば圧倒的です。
グラデーション、アルファ、影、角丸、さらにはアニメーションもCSSで定義できます。
これらの視覚効果を組み合わせることで、Photoshopでの加工に負けない表現もできるかもしれません!

画像とテキストを簡単に組み合わせる

最終的に、配置や視覚効果は細かく調整しないとよいデザインとはいえないかもしれませんが、雛型を作っておくことで様々な箇所で流用が聞きます。
そこで、ごく簡単ではありますが画像とテキストを組み合わせたビジュアルを簡単に作れるサンプルを紹介します。

サンプル

サンプルはこちら

HTML

<div class="captionedImage">
    <div class="image">
        <img src="http://museum.sounkyo-daisetsu.jp/img/indexmain/indexmain04.jpg">
    </div>
    <div class="caption pos-tl bordered01 ">
        キャプションとして表示するテキスト<br>
        キャプションとして表示するテキスト
    </div>
</div>

CSS

.captionedImage{display:inline-block;position:relative;}

.captionedImage .caption{position:absolute;padding:10px}
.captionedImage .caption.pos-tl{top:10px;left:10px;}
.captionedImage .caption.pos-ml{top:50%;left:10px;-webkit-transform:translate(0%, -50%);transform:translate(0%, -50%);}
.captionedImage .caption.pos-bl{bottom:10px;left:10px;}
.captionedImage .caption.pos-tc{top:10px;left:50%;-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);}
.captionedImage .caption.pos-mc{top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.captionedImage .caption.pos-bc{bottom:10px;left:50%;-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);}
.captionedImage .caption.pos-tr{top:10px;right:10px;}
.captionedImage .caption.pos-mr{top:50%;right:10px;-webkit-transform:translate(0%, -50%);transform:translate(0%, -50%);}
.captionedImage .caption.pos-br{bottom:10px;right:10px;}

.captionedImage .caption.bordered01{text-shadow: 0px 0px 2px #000,1px 1px 0px #000,-1px -1px 0px #000,1px -1px 0px #000,-1px 1px 0px #000;color: #fff;}
.captionedImage .caption.bordered02{text-shadow: 0px 0px 2px #fff,1px 1px 0px #fff,-1px -1px 0px #fff,1px -1px 0px #fff,-1px 1px 0px #fff;color: #000;}
.captionedImage .caption.bg-black{background-color:rgba(0,0,0,0.3)}
.captionedImage .caption.bg-white{background-color:rgba(255,255,255,0.3)}

display:inline-blockで親要素を作成

captionedImageを「display:inline-block」とすることで、画像と同じ用に扱えます。さらに、「position:relative」とすることで、テキストの位置をcaptionedImageに対する絶対位置指定で行えるようにします。
テキストが入るcaptionは当然「position:absolute」となります。
画像の上に文字を表示するので、z-indexなどを使わなくて良いように、要素の定義順は画像→テキストとしています。

テキストの位置を9パターンに設定

テキスト配置の位置を左上、中央上、右上・・・右下までの9パタンで定義することで画像に対してどの位置にテキストを表示したいかを選択します。
captionedImageに対してcaptionがposition:absoluteになっているので、9パターンそれぞれで、top,leftやbottom,rightの位置を指定することで天地左右に対する位置を決定しています。
さらに縦横のセンタリングとしてtransform:translate(X,Y)を使用し、親要素の50%の位置から自要素の50%ずらすことで縦、横の位置に対してセンタリングすることが可能になります。

top,left,right,bottomのプロパティはrelative要素に対する位置決めを行うのに対し、transform:translate(X,Y)は自要素の位置、サイズが基準になります。
絶対位置を指定するのではなく、各要素の対する相対位置を指定することによって、内容物のサイズや文字数に依存せずに配置のパターンを作成できます。

キャプションの視覚効果

視覚効果に関してはあくまでもサンプルなので、枠付き文字(白,黒)と半透過背景(白,黒)を用意しました。
この部分かキモではあるのですが、上記サンプルの色や透過率などを変えるだけでも表現方法はたさいですね。

視覚効果の工夫次第でPhotoshopいらず!?

サンプルでは単純な白黒の枠付文字や背景だけですが、CSS3の様々なプロパティを利用して表現ができます。
WEBフォントを利用すればフォント自体も特殊なものを利用できるのでかっこいいビジュアルも作れるのではないでしょうか!?
また、文字の部分がHTMLに記述されるため、SEO的観点でも画像にテキストが埋め込まれているよりもいいですし、メンテナンスが簡単ですね。

さすがにPhotoshopに本気を出されると負けてしまうかもしれませんが、工夫次第ではPhotoshopに頼らなくてもいいかもしれません。
Provided by Revolme inc.
revolme.co.jp