CSS を使用して画像のスタイルを設定する方法を学びます。
丸みを帯びた画像
使用border-radius丸みを帯びた画像を作成するプロパティ:
例
丸みを帯びた画像:
img {
border-radius: 8px;
}
自分で試してみる »
例
丸で囲まれた画像:
img {
border-radius: 50%;
}
自分で試してみる »
{style="clear:both;"}
サムネイル画像
使用borderサムネイル画像を作成するプロパティ。
サムネイル画像:
例
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;}<img src="paris.jpg"alt="Paris">
自分で試してみる »
リンクとしてのサムネイル画像:
例
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;}img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);} <a href="paris.jpg"> <img src="paris.jpg" alt="Paris"></a>
自分で試してみる »
レスポンシブ画像
レスポンシブ画像は、画面のサイズに合わせて自動的に調整されます。
ブラウザー ウィンドウのサイズを変更して効果を確認します。
必要に応じて画像を縮小したいが、元のサイズよりも大きく拡大したくない場合は、次を追加します。
例
img {
max-width: 100%;
height: auto;
}
自分で試してみる »
ヒント：レスポンシブ ウェブ デザインの詳細については、こちらをご覧くださいCSS RWD チュートリアル.
画像を中央に配置
画像を中央に配置するには、左右の余白をautoそしてそれをblockエレメント：
例
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
自分で試してみる »
ポラロイド画像・カード
例
div.polaroid {
width: 80%;
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);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
自分で試してみる »
透過画像
のopacityプロパティは 0.0 ～ 1.0 の値を取ることができます。値が低いほど透明になります。
不透明度 0.2
不透明度 0.5
不透明度 1 (デフォルト)
画像テキスト
画像内にテキストを配置する方法:
例
左下
左上
右上
右下
中央揃え
自分で試してみてください:
画像フィルター
CSSfilterプロパティは、視覚効果 (ぼかしや彩度など) を要素に追加します。
ノート：フィルター プロパティは、Internet Explorer または Edge 12 ではサポートされていません。
例
すべての画像の色を白黒 (100% グレー) に変更します。
img {
filter: grayscale(100%);
}
自分で試してみる »
ヒント：私たちに行きますCSS フィルター リファレンスCSS フィルターの詳細については、こちらをご覧ください。
画像ホバー オーバーレイ
ホバー時にオーバーレイ効果を作成します。
画像を反転する
画像の上にマウスを移動します。
レスポンシブ イメージ ギャラリー
CSS を使用して画像ギャラリーを作成できます。この例では、メディア クエリを使用して、さまざまな画面サイズで画像を再配置します。ブラウザー ウィンドウのサイズを変更して効果を確認します。
ここに画像の説明を追加します
ここに画像の説明を追加します
ここに画像の説明を追加します
ここに画像の説明を追加します
例
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
自分で試してみる »
ヒント：レスポンシブ ウェブ デザインの詳細については、こちらをご覧くださいCSS RWD チュートリアル.
画像モーダル (上級)
これは、CSS と JavaScript がどのように連携するかを示す例です。
まず、CSS を使用してモーダル ウィンドウ (ダイアログ ボックス) を作成し、既定で非表示にします。
次に、JavaScript を使用してモーダル ウィンドウを表示し、ユーザーが画像をクリックしたときにモーダル内に画像を表示します。
例
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
自分で試してみる »
