CSSで画像のスタイルを設定する方法

序章

このチュートリアルでは、CSSを使用して画像のスタイルを設定して境界線を追加し、画像の形状とサイズを変更する方法を学習します。 CSSを使用して画像のスタイルを設定すると、いくつかのルールセットを使用して、Webサイト全体で画像をどのように表示するかを一律に指定できます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

index.htmlに画像を追加する

まず、imagesフォルダに画像を追加する必要があります。 デモンストレーションWebサイトから画像をダウンロードするか、JPEG/JPGまたはPNG形式の任意の画像を使用できます。 この演習は、画像のサイズが約150〜200ピクセル×150〜200ピクセルの場合にも効果的です。

注：サメのサメの画像をダウンロードするには、このリンクとCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）にアクセスしてください。画像を選択し、[名前を付けて画像を保存]を選択して、small-profile.jpegとしてimagesフォルダに保存します。

画像を選択したら、imagesフォルダにsmall-profile.jpegとして保存します。 別のファイル名で保存する場合は、以下の手順で画像ファイルのパスを変更する必要があります。

次に、index.htmlファイルのすべてのコンテンツを消去し（コードの最初の行を除く：<link rel="stylesheet" href="css/styles.css">）、次のコードスニペットを追加します。

index.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 

このコードスニペットは、<img>タグを使用して画像を挿入し、ブラウザに画像ファイルの場所（images/small-profile.jpeg）を提供します。 画像のファイル名を変更した場合は、強調表示されたファイルパスが正しいことを確認してください。

注：Visual Studio Codeを使用して画像のファイルパスをコピーするには、左側のパネルにある画像ファイルのアイコンにカーソルを合わせ、CTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）、[パスのコピー]を選択します。 プロセスの説明については、以下のgifを参照してください。

イメージの絶対またはフルファイルパスではなく、イメージの相対またはプロジェクトファイルパスをコピーしてください。 相対パスは、現在の作業ディレクトリを基準にしたファイルの場所を指します（ルートディレクトリを基準にしたファイルの場所を指す abstract パスとは対照的です）。この場合、両方のパスが機能しますが、 Webサイトをオンラインで公開することにした場合は、相対パスのみが機能します。 最終目標は公開可能なWebサイトを作成することなので、<img>要素をドキュメントに追加するときに、相対パスの使用を開始します。

alt属性を使用して、代替テキストSammy the Shark, DigitalOcean’s mascotも追加しました。 Webサイトを作成するときは、スクリーンリーダーを使用する個人がサイトにアクセスできるように、すべての画像に代替テキストを追加する必要があります。 HTMLで代替テキストを使用する方法の詳細については、ガイドHTMLを使用してWebページに画像を追加する方法の代替テキストのセクションを参照してください。

index.htmlファイルを保存し、ブラウザにリロードします。 （HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください）。 画像が表示された空白のページが表示されます。

画像が表示されない場合は、コードにエラーがないか確認し、画像のファイルパスが正しいことを確認してください。

画像にスタイルを追加する

index.htmlにサメのサメの画像（または選択した画像）が表示されたので、CSSルールを追加して画像のスタイルを設定します。 styles.cssファイルで、すべてを消去し（チュートリアルシリーズをフォローしている場合）、ドキュメントの下部に次のルールセットを追加します。

styles.css

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}

styles.cssファイルを保存し、index.htmlファイルをブラウザにリロードします。 これで、新しいスタイルのプロパティを持つ画像が表示されます。

このCSSルールでは、HTML<img>要素の3つの異なるプロパティに値を指定しました。 一時停止して、さまざまなプロパティと値のそれぞれを調べてみましょう。

• borderプロパティを使用すると、画像に境界線を追加し、境界線のサイズ、スタイル、および色を指定できます。 このCSSプロパティに複数の値を追加できることに注意してください。 このルールでは、solid、redの境界線を2pxの幅で指定しました。
• border-radiusプロパティは、要素の角の半径を定義し、要素のエッジを丸めることができます。 このルールでは、半径のサイズとして8ピクセルを指定しています。 この番号を変更して、画像の表示にどのように影響するかを確認してください。
• widthプロパティは、画像の幅を定義します。 このルールでは、幅を200ピクセル幅に指定しました。 高さを未定義のままにすると、画像の高さが自動的に調整され、画像の元の比率が維持されることに注意してください。 高さと幅の両方を同時に変更して、何が起こるかを確認してください。

スタイルがすべての画像にどのように適用されるかを探る

HTMLドキュメントに画像を追加すると、それらの画像も同じスタイルになることに注意してください。 これがどのように機能するかを調べるには、HTML <img>要素を使用して、index.htmlファイルに2番目の画像を追加します。 （最初のコピーして貼り付けることができます

2番目の画像が手元にない場合は要素）：

index.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 

強調表示されたセクションを画像ファイルのパスに変更してください。 index.htmlファイルを保存して、ブラウザにロードします。 Webページには、<img>タグに同じCSSルールセットでスタイル設定された2つの画像が表示されます。

画像のスタイルの可能性を引き続き調査するには、styles.cssファイルで作成したCSSルールの値を変更し、ファイルを保存して、index.htmlをリロードして結果を確認してください。

結論

このチュートリアルでは、画像の境界線のサイズ、色、外観、高さ、幅、境界線の半径のスタイルを設定する方法について説明しました。 このチュートリアルシリーズの後半でデモウェブサイトの構築を開始すると、画像のスタイリングに戻ります。

すべての<img>要素に一連のスタイルルールを適用する方法に精通しているので、<img>の個人またはグループに異なるスタイルルールを適用する方法に興味があるかもしれません。 ]要素。 次のチュートリアルでは、CSS classes を作成します。これにより、開発者はHTML要素をさまざまなCSSスタイルのさまざまなクラスに並べ替えることができます。