画像はホームページを彩るのに必要不可欠です。文字だけのWebサイトではなんか味気ないですし、訪問者もすぐ帰ってしまうかもしれません。ここではHPに画像を挿入するためのHTMLタグと、画像を彩るおしゃれなCSSコードを解説しています。
(<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>)
画像を入れる
画像を入れるにはimgタグを使います。
imgタグで横幅や高さを指定しておくと大きな画像でも小さく載せることができます。
また、altタグはできるだけ入れたほうがいいですね。
特に目の不自由な人は音声ブラウザという声でホームページの内容を読んでいく専用のブラウザを使用しますので、画像だけ貼っても、目の不自由な人にはまったくわからないのです。
そこで、代替テキストを入れれば、目の不自由な人でも画像がどんなことを表しているのかが、わかるようになるのです。
nov的にはコーディングの仕事をされている方以外、正直、どちらでもいいと思ってますがｗ
両方書いている人もよく見かけるので、気になる方は両方書いても良いと思います！
<img src=”URL” width=”150″ height=”156″ alt=”パソコンを教える男性”>
↓↓↓
<img> タグの魅力を最大限に引き出す！おしゃれなCSSコード15選
※サンプルの見出しは画像なので、サイズがバラバラですがご了承ください。
① 洗練された枠（フレーム）デザイン
01. ポラロイド写真風フレーム（余白＋自然な傾き）
白枠を太めに確保し、下部を広く取ることでレトロなチェキ・ポラロイド風に仕上げます。ホバーするとまっすぐに戻ります。
<img class="img-polaroid" src="https://picsum.photos/400/300" alt="写真">.img-polaroid {
display: block;
max-width: 100%;
height: auto;
padding: 10px 10px 30px 10px; /* 下の余白を広めにする */
background: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transform: rotate(-2deg); /* ほんの少し傾ける */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-polaroid:hover {
transform: rotate(0deg) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
02. アートギャラリー風 二重ボーダー（ダブルフレーム）
外側のボーダーと内側の画像との間に隙間を空け、美術館の額装のような高級感を演出します。
<img class="img-gallery-frame" src="https://picsum.photos/400/300" alt="アート作品">.img-gallery-frame {
display: block;
max-width: 100%;
height: auto;
padding: 8px; /* 内側の隙間 */
background: #ffffff;
border: 1px solid #cbd5e1; /* 外枠の線 */
box-shadow: 0 0 0 4px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.08); /* 2重枠と影 */
border-radius: 4px;
}
03. マスキングテープ留めフレーム（かわいい・ブログ向け）
擬似要素を使わずに、CSSのグラデーションだけで上部に「半透明のマスキングテープ」を再現しています。
<div class="img-tape-wrapper">
<img src="https://picsum.photos/400/300" alt="マステ留め">
</div>.img-tape-wrapper {
position: relative;
display: inline-block;
padding-top: 15px;
}
.img-tape-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 100px;
height: 28px;
background-color: rgba(254, 202, 202, 0.8); /* テープの色 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.img-tape-wrapper img {
display: block;
max-width: 100%;
height: auto;
border: 6px solid #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
04. グラデーションボーダー（Web3・近未来スタイル）
角丸の滑らかなグラデーションボーダーで縁取った、モダンで先進的なデザインです。
<div class="img-gradient-border">
<img src="https://picsum.photos/400/300" alt="グラデーション枠">
</div>.img-gradient-border {
display: inline-block;
padding: 4px; /* 枠線の太さ */
background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
border-radius: 16px;
box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.3);
}
.img-gradient-border img {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px; /* ラッパーより少し小さくする */
}
② 立体感・高級感を出す影（シャドウ）デザイン
05. 多層ソフトドロップシャドウ（モダンUIの定番）
影を複数レイヤー重ねることで、自然で空気感のある上質な立体感を作ります。
<img class="img-soft-shadow" src="https://picsum.photos/400/300" alt="多層シャドウ">.img-soft-shadow {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
/* 複数重ねることでリアルな影を再現 */
box-shadow:
0 2px 4px rgba(15, 23, 42, 0.04),
0 8px 16px rgba(15, 23, 42, 0.08),
0 24px 48px rgba(15, 23, 42, 0.12);
}
06. リフトアップシャドウ（ホバーで浮き上がる立体影）
マウスを乗せると画像が上へ持ち上がり、影が落ちて広がります。クリック誘導率を高める効果があります。
<img class="img-liftup" src="https://picsum.photos/400/300" alt="リフトアップ">.img-liftup {
display: block;
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.img-liftup:hover {
transform: translateY(-8px); /* 上に浮き上がる */
box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.25); /* 影が広がる */
}
※これは実際にマウスを乗せてみないとサンプルではただのスクショなのでわかりにくいですｗ
07. カラーグロー（背景に光が漏れ出すネオン影）
画像と同系色の光が後ろからぼんやりと漏れ出しているようなリッチな発光表現です。
<img class="img-color-glow" src="https://picsum.photos/400/300" alt="グローエフェクト">.img-color-glow {
display: block;
max-width: 100%;
height: auto;
border-radius: 16px;
/* 色付きのシャドウをぼかして発光させる */
box-shadow: 0 12px 30px -5px rgba(59, 130, 246, 0.5);
transition: box-shadow 0.3s ease;
}
.img-color-glow:hover {
box-shadow: 0 18px 40px -5px rgba(59, 130, 246, 0.7);
}
08. 斜めハードシャドウ（レトロ・コミック風）
ぼかしをゼロにしたはっきりとした影で、イラストやポップなメディアに最適なスタイルです。
<img class="img-hard-shadow" src="https://picsum.photos/400/300" alt="ハードシャドウ">.img-hard-shadow {
display: block;
max-width: 100%;
height: auto;
border: 3px solid #1e293b;
border-radius: 8px;
box-shadow: 6px 6px 0px #1e293b; /* ぼかさずにずらす */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.img-hard-shadow:hover {
transform: translate(2px, 2px);
box-shadow: 4px 4px 0px #1e293b; /* 押し込まれたような動き */
}
③ 視線を引きつける「アニメーション＆ホバー」デザイン
アニメーションは、低圧縮のgifアニメで表示させていますので、画像が荒いですが、ちゃんと設定すればキレイに映りますのでご心配なくｗ
09. ふわふわ常時浮遊アニメーション（フローティング）
マウス操作なしで、まるで無重力空間に浮かんでいるかのように上下にゆったり揺れ動きます。
<img class="img-floating" src="https://picsum.photos/400/300" alt="フローティング">.img-floating {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
50% {
transform: translateY(-12px);
box-shadow: 0 25px 30px rgba(0, 0, 0, 0.06);
}
}
10. 呼吸するように脈動する「ブリージング・パルス」
画像が生きているかのように、ゆっくりと拡大・縮小を繰り返します。影の濃淡も連動して変化するため、非常にリッチで落ち着いた高級感を演出できます（メインビジュアルやおすすめ商品に最適！）
<img class="img-breathing" src="https://picsum.photos/400/300" alt="ブリージング画像">.img-breathing {
display: block;
max-width: 100%;
height: auto;
border-radius: 16px;
/* 5秒かけてゆったり往復 */
animation: breathing 5s ease-in-out infinite;
will-change: transform, box-shadow;
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
50% {
transform: scale(1.035); /* 約3.5%ふんわり拡大 */
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); /* 拡大に合わせて影も強調 */
}
}
11. 水面に浮かぶような「ゆらゆらスイング」
上下の微細な動きにわずかな回転（傾き）をブレンドしたアニメーションです。水面に浮かぶボートや、風に揺れるモビールのような心地よいリズムを生み出します（イラスト・バナー・アイコン画像などに最適！）
<img class="img-swing" src="https://picsum.photos/400/300" alt="ゆらゆら画像">.img-swing {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
/* 6秒周期で滑らかに回転＋上下 */
animation: swing 6s ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
@keyframes swing {
0%, 100% {
transform: rotate(0deg) translateY(0);
}
25% {
transform: rotate(1.5deg) translateY(-5px); /* 右に少し傾きつつ浮上 */
}
75% {
transform: rotate(-1.5deg) translateY(5px); /* 左に少し傾きつつ下降 */
}
}
12. 定期的に光が走り抜けるオート・シマー（自動光彩）
マウスを乗せなくても、数秒おきにスーッと上品な光の帯が画像を横切るアニメーションです。キーフレームのパーセンテージ配分によって通過したあとの待機時間（インターバル）をCSS単体で制御しています（PR枠や限定バナーに最適！）
<div class="img-auto-shimmer">
<img src="https://picsum.photos/400/300" alt="定期的に光る画像">
</div>.img-auto-shimmer {
position: relative;
display: inline-block;
overflow: hidden; /* 光のはみ出しをカット */
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.img-auto-shimmer img {
display: block;
max-width: 100%;
height: auto;
}
/* 光の帯を疑似要素で作成 */
.img-auto-shimmer::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
/* 4秒周期で自動ループ */
animation: autoShimmer 4s ease-in-out infinite;
}
@keyframes autoShimmer {
0% {
left: -100%;
}
25% {
left: 160%; /* 最初の1秒で光が通過 */
}
100% {
left: 160%; /* 残りの3秒間は待機時間になる */
}
}
13. 枠内ズームイン（定番のカード画像ホバー）
外側のフレームからはみ出すことなく、マウスを乗せると画像だけが滑らかに拡大します（ECサイトや記事サムネイルに必須！）
<div class="img-zoom-wrapper">
<img src="https://picsum.photos/400/300" alt="ズーム画像">
</div>.img-zoom-wrapper {
overflow: hidden; /* はみ出しをカット */
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.img-zoom-wrapper img {
display: block;
width: 100%;
height: auto;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.img-zoom-wrapper:hover img {
transform: scale(1.08); /* 8%拡大 */
}
※これも「マウスを乗せる系」なのでｗスクショ画像では伝わりません(^_^;)
14. 光の帯が走り抜ける（シマー・フラッシュ効果）
ホバー時に、キラッと白い斜めの光が画像を横切るアニメーションです。
<div class="img-shine-wrapper">
<img src="https://picsum.photos/400/300" alt="光る画像">
</div>.img-shine-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 12px;
}
.img-shine-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.img-shine-wrapper::after {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
}
.img-shine-wrapper:hover::after {
animation: shine 0.75s;
}
@keyframes shine {
100% {
left: 125%;
}
}
※同じく「マウスを乗せる系」なのでｗぜひご自身で作ってみて確認してみてください！
15. モノクロから鮮やかカラーへの変化（フィルター連携）
通常時はシックなモノクロ＋高コントラスト、ホバーで本来のフルカラーに戻りつつ拡大します。
<img class="img-grayscale-color" src="https://picsum.photos/400/300" alt="モノクロ変化">.img-grayscale-color {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
filter: grayscale(100%) contrast(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: filter 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.img-grayscale-color:hover {
filter: grayscale(0%) contrast(1);
transform: scale(1.03);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
※同じく「マウスを乗せる系」なので、スクショでは伝わりませんｗ
- 画像のレスポンシブ崩れ防止
-
画像に max-width: 100%; height: auto; を指定しておくことで、スマホ表示時にも枠からはみ出す事故を防げます。
- パフォーマンス向上
-
アニメーションを行う要素には、CSSで will-change: transform; を足すか、transform: translateZ(0);（ハードウェアアクセラレーション）を効かせると、スマホでもカクつかず極めて滑らかに動きます。
画像にテキストを回り込ませる(<align=”位置”>)
こちらも<img src=”URL”>内に書くタグです。
画像を右または左に動かし、その横にテキストを回り込ませることができます。
ただ、こちらも現在非推奨タグですので、できるだけスタイルシートで編集してください。
※今回の回り込みの例は、使用しているWordPressのテーマの関係でうまく表示できていません。本当は画像の横にキレイに回り込みますが、あくまでイメージとして捉えてください。
今日はパソコンスクールに行ってワードの使い方を習いました。
少し難しかったけど、なんとか出来るようになりました。
来週はエクセルの使い方を教えてもらいます。
<img src=”URL” alt=”パソコンを教える男性” width=”150″ height=”156″ align=”left”>
↓↓↓
今日はパソコンスクールに行ってワードの使い方を習いました。
少し難しかったけど、なんとか出来るようになりました。
来週はエクセルの使い方を教えてもらいます。
また通常、回り込ませたテキストと画像の間を指定するために<vspace=”縦間隔” hspace=”横間隔”>を入れます。間隔の値はピクセルで調整します。
<img src=”URL” alt=”パソコンを教える男性” width=”150″ height=”156″ hspace=”10″ vspace=”10″ align=”left”>
↓↓↓
今日はパソコンスクールに行ってワードの使い方を習いました。
少し難しかったけど、なんとか出来るようになりました。
来週はエクセルの使い方を教えてもらいます。
