TECH I.S.

CSS スタイリング画像


CSS を使用して画像のスタイルを設定する方法を学びます。


丸みを帯びた画像

使用border-radius丸みを帯びた画像を作成するプロパティ:


Paris

丸みを帯びた画像:

img {   border-radius: 8px; }

自分で試してみる »

Paris

丸で囲まれた画像:

img {   border-radius: 50%; }

自分で試してみる »


{style="clear:both;"}

サムネイル画像

使用borderサムネイル画像を作成するプロパティ。

サムネイル画像:

Paris

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>
自分で試してみる »


レスポンシブ画像

レスポンシブ画像は、画面のサイズに合わせて自動的に調整されます。

ブラウザー ウィンドウのサイズを変更して効果を確認します。
Cinque Terre
必要に応じて画像を縮小したいが、元のサイズよりも大きく拡大したくない場合は、次を追加します。

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

自分で試してみる »

ヒント:レスポンシブ ウェブ デザインの詳細については、こちらをご覧くださいCSS RWD チュートリアル.


画像を中央に配置

画像を中央に配置するには、左右の余白をautoそしてそれをblockエレメント:
Paris

img {   display: block; margin-left: auto;   margin-right: auto; width: 50%; }

自分で試してみる »


ポラロイド画像・カード

Cinque Terre

チンクエテッレ

Norway

オーロラ

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 の値を取ることができます。値が低いほど透明になります。

Forest不透明度 0.2
Forest不透明度 0.5
Forest不透明度 1 (デフォルト)

img {   opacity: 0.5; }

自分で試してみる »


画像テキスト

画像内にテキストを配置する方法:

Cingue Terre
左下
左上
右上
右下
中央揃え

自分で試してみてください:


画像フィルター

CSSfilterプロパティは、視覚効果 (ぼかしや彩度など) を要素に追加します。

ノート:フィルター プロパティは、Internet Explorer または Edge 12 ではサポートされていません。

すべての画像の色を白黒 (100% グレー) に変更します。

img {   filter: grayscale(100%); }

自分で試してみる »

ヒント:私たちに行きますCSS フィルター リファレンスCSS フィルターの詳細については、こちらをご覧ください。


画像ホバー オーバーレイ

ホバー時にオーバーレイ効果を作成します。

テキストのフェードイン:

Avatar
こんにちは世界

自分で試してみる »

ボックスでフェード:

Avatar
ジョン

自分で試してみる »

スライドイン (上):

Avatar
こんにちは世界

自分で試してみる »

スライドイン (下):

Avatar
こんにちは世界

自分で試してみる »

スライドイン (左):

Avatar
こんにちは世界

自分で試してみる »

スライドイン (右):

Avatar
こんにちは世界

自分で試してみる »


画像を反転する

画像の上にマウスを移動します。
Paris

img:hover {   transform: scaleX(-1); }

自分で試してみる »


レスポンシブ イメージ ギャラリー

CSS を使用して画像ギャラリーを作成できます。この例では、メディア クエリを使用して、さまざまな画面サイズで画像を再配置します。ブラウザー ウィンドウのサイズを変更して効果を確認します。

Cinque Terre
ここに画像の説明を追加します
Forest
ここに画像の説明を追加します
Northern Lights
ここに画像の説明を追加します
Mountains
ここに画像の説明を追加します

.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 を使用してモーダル ウィンドウを表示し、ユーザーが画像をクリックしたときにモーダル内に画像を表示します。

Northern Lights, Norway

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

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細