HTML | 画像を角丸、円形にする
HTMLだけで画像を角丸にする方法とサンプルコードを紹介しています。
HTMLだけで画像を角丸に表示する
HTMLで画像を角丸にする専用のタグや属性は用意されていませんが、CSS同様にstyle属性にて「border-radius」プロパティを指定する事で画像の角丸を実装できます。
「border-radius」は「border」プロパティで枠線を付けなくても機能します。
値は「px」や「％」での指定が可能となっています。
以下のサンプルでは、枠線はなし、0px～50pxの角丸を指定しています。
<img style="border-radius: 0px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="border-radius: 10px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="border-radius: 25px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="border-radius: 50px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
画像を円形に表示する
画像の表示を円形にするには、画像が正方形「border-radius」プロパティで「50%」を指定します。
精密さが必要でなければ正方形に近い場合も、ぱっと見、円形になります。
<img style="border-radius: 50%;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">画像が正方形ではない場合は、「width」と「height」に同じサイズを指定して「border-radius」プロパティで「50%」を指定します。
<img style="width: 250px; height: 250px; border-radius: 50%;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">