CSS - 画像のスタイル
こんにちは、Webデザイナー志望の方々！今日は、CSS画像スタイルの世界を楽しみに一緒に冒険します。近所の親切なコンピュータ教師として、この冒険を案内します。自転車に乗るのを学ぶのと同じように、CSSをマスターするには練習が必要ですが、楽しいこと請け合いです！
CSSで画像をスタイル化 - 角を丸める
まずは簡単でエレガントなものから始めましょう：角を丸めた画像。生活の中で角を柔らかくすることが好きですよね？画像にも同じことをできます！
<img src="cute_puppy.jpg" alt="可愛い子犬" class="rounded-image">.rounded-image {
border-radius: 25px;
}この例では、ブラウザに画像の角を25ピクセル丸くするように指示しています。画像に小さな切れ込みを入れるようなものです！この値を調整して、角の丸みをより強くまたは弱くすることができます。
CSSで画像をスタイル化 - 円形の画像
次に、一歩進めて画像を完璧な円形にします。これはプロフィール写真や、中央に焦点を当てたい画像に最適です。
<img src="profile_pic.jpg" alt="プロフィール写真" class="circle-image">.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}ここで魔法が起こります：border-radius: 50%で正方形の画像を円形にします。固定の幅と高さを設定し、object-fit: coverで画像が円の中にきれいに収まるようにします。
CSSで画像をスタイル化 - サムネイル画像
サムネイルは画像の世界のトレーラーのようなものです - 全画像の小さなプレビューで、全体の一部を味わえます。作ってみましょう！
<img src="landscape.jpg" alt="美しい風景" class="thumbnail">.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}このCSSは、小さな正方形のサムネイルを作成し、きれいなボーダーを追加します。object-fit: coverプロパティで画像がサムネイルエリアに歪み無く収まるようにします。
CSSで画像をスタイル化 - サムネイル画像をリンクにする
サムネイルをクリック可能にしましょう！画像ギャラリーや製品リストに最適です。
<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="クリックして拡大" class="thumbnail-link">
</a>.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}
.thumbnail-link:hover {
transform: scale(1.1);
}ここでは、ホバー時にサムネイルが少し拡大するクールなホバーエフェクトを追加しています。
CSSで画像をスタイル化 - レスポンシブ画像
現代の多様なデバイス対応の世界では、画像がすべてのスクリーンサイズで見栄えよく表示される必要があります。画像をレスポンシブにしましょう！
<img src="scenery.jpg" alt="美しい風景" class="responsive-image">.responsive-image {
max-width: 100%;
height: auto;
}このシンプルなCSSは、画像がコンテナよりも広くならないようにし、高さが比例して調整されるようにします。どんな状況でも適切に振る舞う画像のようです！
CSSで画像をスタイル化 - 画像を中央に配置
画像を中央に配置するのは難しいことがありますが、ここに賢い方法があります。画像が舞台の真ん中で立っているようです！
<div class="image-container">
<img src="centered_image.jpg" alt="中央配置画像" class="center-image">
</div>.image-container {
text-align: center;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}この方法はインライン画像とブロックレベル画像の両方に効果があります。コンテナのtext-align: centerはインライン画像を中央に配置するのに役立ち、margin: autoはブロックレベル画像を中央に配置します。
CSSで画像をスタイル化 - Polaroid画像/カード
Polaroidカメラを覚えていますか？そのクラシックな見た目をCSSで再現しましょう！
<div class="polaroid">
<img src="vacation.jpg" alt="休暇の思い出">
<div class="caption">2023年夏</div>
</div>.polaroid {
width: 250px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
.polaroid img {
width: 100%;
}
.caption {
text-align: center;
padding: 10px 20px;
}このCSSは、画像の周りに白いボーダーを追加し、微妙な影を追加して3D効果を演出します。キャプションは画像の下に配置されます。
CSSで画像をスタイル化 - 透明な画像
時々、画像を透視的にしたいことがあります。画像に幽霊のような質感を与えます！
<img src="logo.png" alt="会社ロゴ" class="transparent-image">.transparent-image {
opacity: 0.5;
}opacityプロパティは、0（完全透明）から1（完全不透明）の範囲で調整でき、希望する透明度に合わせることができます。
CSSで画像をスタイル化 - 画像にテキストを中央配置
画像の中央にテキストを配置しましょう。自分だけのモチベーションポスターを作成するようなものです！
<div class="image-text-container">
<img src="background.jpg" alt="背景画像">
<div class="centered-text">ここにテキストを入力</div>
</div>.image-text-container {
position: relative;
text-align: center;
color: white;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}このCSSは、テキストを画像の中央に配置するために位置調整を行います。transformプロパティで垂直および水平方向に中央に配置します。
CSSで画像をスタイル化 - フィルタ
CSSフィルタはInstagramのようなものです。いくつかのフィルタを試してみましょう！
<img src="landscape.jpg" alt="風景" class="filtered-image">.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}この例では、画像をグレースケールにし、明るさを増やし、コントラストを強化しています。さまざまなフィルタを組み合わせて独特の効果を作成できます！
以下は、いくつかの一般的なCSS画像フィルタの表です：
| フィルタ | 説明 | 例 |
|---|---|---|
| grayscale() | 画像をグレースケールに変換 | filter: grayscale(100%); |
| sepia() | 画像をセピアに変換 | filter: sepia(60%); |
| saturate() | 画像を彩度を高める | filter: saturate(200%); |
| hue-rotate() | 画像に色相を回転させる | filter: hue-rotate(90deg); |
| invert() | 画像の色を反転させる | filter: invert(75%); |
| opacity() | 画像の透明度を設定 | filter: opacity(25%); |
| brightness() | 画像の明るさを調整 | filter: brightness(150%); |
| contrast() | 画像のコントラストを調整 | filter: contrast(200%); |
| blur() | 画像にぼかしを適用 | filter: blur(5px); |
CSSで画像をスタイル化 - ホバー時にテキストがフェードイン
テキストがホバー時にフェードインするクールな効果を作成しましょう。秘密のメッセージを披露するようなものです！
<div class="image-overlay">
<img src="product.jpg" alt="製品画像">
<div class="overlay">
<div class="text">製品説明</div>
</div>
</div>.image-overlay {
position: relative;
width: 50%;
}
.image-overlay img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.image-overlay:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}このCSSは、ホバー時に暗いオーバーレイがフェードインし、テキストが表示されるようにします。
CSSで画像をスタイル化 - キャプションのスライドインエフェクト
画像キャプションにスライドインエフェクトを追加しましょう。カーテンを引いてショーのスターを披露するようなものです！
<div class="slide-container">
<img src="nature.jpg" alt="自然の風景" class="slide-image">
<div class="slide-caption">美しい自然</div>
</div>.slide-container {
position: relative;
overflow: hidden;
}
.slide-image {
display: block;
width: 100%;
height: auto;
}
.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}
.slide-container:hover .slide-caption {
left: 0;
}このCSSは、キャプションを画面外に隠し、ホバー時に右からスライドインするようにします。
CSSで画像をスタイル化 - 画像を反転する
少しのパズazzを加え、画像に反転エフェクトを追加しましょう！画像の裏側を見せるバックステージパスのようなものです。
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="前面">
</div>
<div class="back">
<img src="back.jpg" alt="背面">
</div>
</div>
</div>.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}このCSSは、ホバー時に前面画像が裏面画像に反転する3Dエフェクトを作成します。
CSSで画像をスタイル化 - レスポンシブ画像ギャラリー
私たちのスキルを合わせて、レスポンシブ画像ギャラリーを作成しましょう。自分だけの小さなアート展をキュレートするようなものです！
<div class="gallery">
<img src="img1.jpg" alt="ギャラリー画像1">
<img src="img2.jpg" alt="ギャラリー画像2">
<img src="img3.jpg" alt="ギャラリー画像3">
<img src="img4.jpg" alt="ギャラリー画像4">
</div>.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}
@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}このCSSは、スクリーンサイズに応じて画像ギャラリーを調整します。小さなスクリーンでは画像が垂直に積み重ねられ、中程度のスクリーンでは2列、大きなスクリーンでは4列になります。
CSSで画像をスタイル化 - 画像モーダル
最後に、画像をクリックしてポップアップするモーダルを作成しましょう。画像が自分だけのスポットライトmomentを楽しめるようにします！
<img src="thumbnail.jpg" alt="クリックして拡大" class="modal-trigger" onclick="openModal(this)">
<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
</div>.modal-trigger {
cursor: pointer;
transition: 0.3s;
}
.modal-trigger:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}
function closeModal() {
document.getElementById("imageModal").style.display = "none";
}このHTML、CSS、JavaScriptの組み合わせで、画像をクリックしてモーダルが表示され、拡大的な画像を楽しむことができます。
そして、皆さん！CSS画像スタイルの冒険はここまでです。これらの技術をマスターするためには練習が必要です。なので、これらの例を遊びながら、自分だけのユニークなものを作成してみてください。ハッピーコーディング！
Credits: Image by storyset