HTMLを使用してスタイル付きプロファイル画像をWebページに追加する方法

このチュートリアルでは、デモンストレーションWebサイトに表示されるトッププロファイル画像を追加およびスタイリングする手順を説明します。

始める前に、サイトに含める個人のプロフィール写真を選択することをお勧めします。プロフィール写真がない場合は、デモンストレーション目的で任意の画像を使用するか、Getavataaars.comなどのサイトからアバターを作成できます。それ以外の場合は、画像こちらをダウンロードして、デモサイトから画像を使用できます。（HTMLを使用してWebページに画像を追加する方法の復習については、このチュートリアルシリーズの前半にあるチュートリアル HTML を使用してWebページに画像を追加する方法を参照してください。）

画像を選択したら、imageフォルダにsmall-profile.jpgとして保存します。

最後のチュートリアルで作成した開始タグと終了タグ<div>の間に、次の強調表示された<img>要素を次のように貼り付けます。

...
<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
  <img src="ImageFilePath" style="height:150px">
</div>
...

強調表示されているsrcアドレスを、プロフィール画像のファイルパスに切り替えてください。 style属性を使用して、画像の高さを150ピクセルに指定していることに注意してください。 <img>要素には終了タグは必要ありません。

ページを保存してブラウザにリロードし、結果を確認します。次のものを受け取る必要があります。

style属性で指定した高さを指定すると、プロファイル画像は150ピクセルの高さで表示されます。また、前のチュートリアルで<div>コンテナに指定したtop-paddingプロパティを前提として、<div>コンテナの上部から80ピクセル下に配置する必要があります。。次に、style属性にプロパティを追加して、画像に円形と黄色の境界線を付けましょう。また、スクリーンリーダーを使用するサイト訪問者のアクセシビリティを向上させるために、代替テキストを追加します。

強調表示されたプロパティを<img>要素に追加します。

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">

srcアドレスとしてリストされている画像の正しいファイルパスがまだあることを確認してください。ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

先に進む前に、少し一時停止して、今行ったコードの変更について調べてみましょう。 border-radiusの値を50% gに設定すると、画像は円形になります。境界線の値を10px solid #FEDE00に設定すると、画像に幅10ピクセルで、16進数の色の値#FEDE00.を持つ塗りつぶされた境界線が表示されます。

これで、HTMLを使用してWebサイトにプロファイル画像を追加してスタイルを設定する方法を理解する必要があります。これで、次のチュートリアルでWebページにタイトルとサブタイトルを追加する準備が整いました。