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

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

画像を選択したら、名前を付けて保存します small-profile.jpg あなたの中で image フォルダ。

以下を強調表示して貼り付けます <img> 開閉の間の要素 <div> 最後のチュートリアルで作成したタグは次のようになります。

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

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

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

プロフィール画像は、で指定した高さを指定すると、高さが150ピクセルとして表示されます。 style 属性。 また、上部の80ピクセル下に配置する必要があります <div> コンテナ、与えられた top-padding に指定したプロパティ <div> 前のチュートリアルのコンテナ。 次に、プロパティを追加しましょう 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ページにタイトルとサブタイトルを追加する準備が整いました。