CSS 画像

この章では、CSS を使用して画像をレイアウトする方法を紹介します。

角丸画像

例

角丸画像:

img {
border-radius: 8px;
}

試してみる »

例

楕円形の画像:

img {
border-radius: 50%;
}

試してみる »

サムネイル

私たちはborder属性を使用してサムネイルを作成します。

例

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg.html" alt="Paris">

試してみる »

例

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg.html">
<img src="paris.jpg.html" alt="Paris">
</a>

試してみる »

レスポンシブ画像

レスポンシブ画像は、さまざまなサイズの画面に自動的に適応します。

この例では、ブラウザのサイズをリセットして効果を確認できます:

Norway

画像を自由に拡大縮小し、かつ原寸より大きくならないようにするには、次のコードを使用します:

例

img {
max-width: 100%;
height: auto;
}

試してみる »

ヒント:Web レスポンシブデザインの詳細については、CSS レスポンシブデザインチュートリアル。

画像テキスト

画像テキストの配置方法:

例

左下

左上

右上

右下

中央

試してみる:

左上 » 右上 » 左下 » 右下 » 中央 »

カード型画像

例

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;
}

試してみる »

画像フィルター

CSS filter属性は要素に視覚効果（例：ぼかしや彩度）を追加するために使用します。

注意: Internet Explorer または Safari 5.1（およびそれ以前のバージョン）この属性はサポートされていません。

例

すべての画像の色を白黒（100% グレースケール）に変更します:

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

試してみる »

ヒント:参照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%;
    }
}

試してみる »

画像 Modal（モーダル）

この例では、CSS と JavaScript を組み合わせて画像をレンダリングする方法を示します。

まず、CSS を使用してモーダルウィンドウ（ダイアログボックス）を作成します。デフォルトでは非表示です。

次に、JavaScript を使用してモーダルウィンドウを表示します。画像をクリックすると、画像がポップアップウィンドウに表示されます：

例

// モーダルウィンドウを取得
var modal = document.getElementById('myModal');

// 画像モーダルを取得、alt 属性は画像ポップアップのテキスト説明として使用
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;
    modalImg.alt = this.alt;
    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";
}

試してみる »

その他の拡張