画像を加工することなく文字を重ねる方法

画像の上に文字(文章)を重ねたいケースはよくあるでしょう。しかし、画像加工ソフトで文字を直接描き込んでしまうと、修正したくなった際に面倒ですし、検索にヒットしないデメリットもあります。ウェブ上であれば、画像を直接加工することなく任意の文字を重ねることはとても簡単です。

画像上の自由な位置に文字を重ねる方法

画像の上に文字を重ねるために、画像を細かく分割したり、tableを駆使したり、文字ごと画像化したりしていませんか? そんなことをしなくても、HTMLとCSSを使えば簡単に位置を指定して画像の上に文字を重ねられます。

出典: 画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About

画像にマウスを載せた際に、半透明の説明を重ねる方法

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

出典: 画像にマウスを載せた際に、半透明の説明を重ねる方法 [ホームページ作成] All About

画像を加工することなく向き(傾き)を変化させる方法

画像を傾かせたり裏返したり回転させたりした状態で掲載したい場合でも、わざわざ画像加工ソフトを使う必要はありません。ウェブ上でなら、CSSを使って任意の画像を簡単に回転させたり傾かせたりできます。

CSS3を使って画像や文字を任意の角度で回転させる方法

CSS3のtransformプロパティを使うと、45度でも90度でも自由な角度で文字や画像を回転させられます。「画像や文字を90度傾けて縦にしてページ端に寄せる」といったデザインが、画像化して加工しなくても実現できます。Y軸を基準に180度回転させることで「鏡文字」を作るなど、おもしろい表現も可能です。

出典: CSS3を使って画像や文字を任意の角度で回転させる方法 [ホームページ作成] All About

画像を加工することなく表示サイズを変化させる方法

ウェブ上に画像を掲載する際、表示サイズを自動調整させたり、表示範囲を限定(トリミング)したりしたいと思うことは多いのではないでしょうか。ちょっとした工夫で、表示サイズや表示範囲を自由に指定できます。

画像を加工せず、CSSでトリミング(切り抜き)する方法

CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。

出典: 画像を加工せず、CSSでトリミング(切り抜き)する方法 [ホームページ作成] All About

ウインドウ幅に合わせて画像サイズを変化させる方法

CSSだけを使って、表示領域の横幅に合わせて画像サイズを(縦横比を維持したまま)変化させる方法を解説。レスポンシブ・ウェブデザインを採用したページや、「描画領域の横幅全体に画像を広げて掲載したい」場合に活用できます。

出典: ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About

画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS

画像の表示サイズを自動で閲覧環境に合わせたい場合に遭遇する、ちょっとした問題を解決するためのCSS記述方法をご紹介。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端に拡大されたり縮小されたりするのは避けたい」など。

出典: 画像を画面幅に合わせる際、拡大/縮小しすぎを防ぐCSS [ホームページ作成] All About

1枚の背景画像をブラウザの画面全体に広げる方法

1枚の大きな画像(解像度の高い写真など)を、ブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が必ず(縦横比を維持したまま)画面全体を覆うように表示。スクリプトは不要で、数行のCSSだけで簡単に実現できます。

出典: 1枚の背景画像をブラウザの画面全体に広げる方法 [ホームページ作成] All About

表示する画像自体を(状況に応じて)切り替える方法

ウェブ上に表示している画像を状況に応じて他の画像に切り替えたり、大きな画像を読み込んでいる最中にだけ他の軽い画像を表示しておきたいこともあるでしょう。ウェブ上なら、画像を状況に応じて変化させることも簡単です。

画像の読込完了まで、ローディング画像を表示する方法

画像の読み込みが完了するまでの間、画像が表示される予定の領域に「ローディング画像」を表示させて、読込中であることを示してみてはいかがでしょうか。スクリプトは不要で、数行のCSSを記述するだけで、簡単にローディング画像を掲載できます。

出典: 画像の読込完了まで、ローディング画像を表示する方法 [ホームページ作成] All About

アクセスされるたびに画像をランダムに切り替える方法

ウェブページが表示されるたびに、画像リストの中からランダムに1つの画像が選択されて表示される仕組みの作り方を解説。ページを閲覧するたびに異なる画像が表示されます。数行のJavaScriptを記述するだけで簡単に作成できますので、ぜひ試してみて下さい。

出典: アクセスされるたびに画像をランダムに切り替える方法 [ホームページ作成] All About

マウスが載ると画像が変化するリンクを作る

画像リンクの上にマウスを載せたときに、リンク画像が別の画像に変化するようなリンクを作ってみましょう。今回は、JavaScriptなどのスクリプトを使わずに、スタイルシートを使って実現する方法をご紹介致します。

出典: マウスが載ると画像が変化するリンクを作る [ホームページ作成] All About

【番外】1枚の画像をバラバラに分解しなくても済ませる方法

1枚の画像の中に複数のリンクを設定したい場合、わざわざバラバラに(複数枚に)分割する必要はありません。画像内の特定の座標だけに限定してリンクを設定する方法を使えば、画像を加工することなく自由な形のリンクが作れます。

[イメージマップの作り方] 1画像内に複数リンクを設定

1つの画像をまるごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、1画像の中の場所ごとに複数の異なるリンクを作りたいと思うことはありませんか? HTMLのmap要素とarea要素とで作成できる「イメージマップ(クリッカブルマップ)」を使えば、リンク範囲を座標で指定することで「1画像内に複数のリンクを設定する」ことも簡単に実現できます。

出典: [イメージマップの作り方] 1画像内に複数リンクを設定 [ホームページ作成] All About