はじめに

入社してから早3か月が経ちました。自分で書いたHTMLとCSSは、まだまだ初回レビューではチェック項目を全部クリア出来ないのですが(汗)、1つの見せ方でもいろいろな方法があるのだな～と勉強の日々です。今回はその中でも、研修課題の1つにあった「画像を丸く表示する方法」をまとめたいと思います。

①border-radiusだけでもいいけど、今回は不正解！？

「画像を丸くして赤線で囲み表示する」という課題の原画が正方形に近い四角形で提供されていたので、最初は「borderの角を丸く（border-radius: 50%;）してしまえばそれっぽくなるのでは・・？」と思ったのです。確かにこの方法でも画像は丸くなっているのですが、なぜか見本とちょっと違う。隙間があるというか、borderで設定した赤線の丸の中に画像が入っているだけというか・・・。残念ながら、今回はこれだけではやりたいことが実現出来ていない！ということで、安定のやり直しになりました。

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
　<head>
　　<title>Sample</title>
　　<link rel="stylesheet" href="css/index.css">
　</head>
　<body>
　　<img src="photo.png" alt="写真">
　</body>
</html>

＜CSS＞

img {
    border: 3px solid #ff0000;
    border-radius: 50%;
    width:  180px;
    height: 180px;
}

②画像を丸く表示する＝丸く切り取る！

いろいろ調べた結果、どうやら画像を丸く表示したい場合は、画像の一部を丸く切り取っているということが分かりました。しかも、その場合はHTMLのimgタグで画像を指定せず、CSSのbackground-imageを使う必要がありました。

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
　<head>
　　<title>Sample</title>
　　<link rel="stylesheet" href="css/index.css">
　</head>
　<body>
　　<p class="circle">表示領域</p>
　</body>
</html>

＜CSS＞

circle{
    background-image: url(../img/photo_1.png);
    width:  180px;
    height: 180px;
    border: 3px solid #ff0000;
    border-radius: 50%;
    background-size: 200px 200px;
}

③丸く切り取る位置も指定

background-imageを使って画像を丸く出来たのですが、見本と比べてみると何かがずれていました。よくよく見てみると赤線の丸の中に納まっている画像がちょっと斜め左上にずれて表示されている・・？今回はちょっと右下にずらしたかったので、CSSにbackground-positionを追加して調整しました。

＜CSS＞

circle{
    background-image: url(../img/photo_1.png);
    width:  180px;
    height: 180px;
    border: 3px solid #ff0000;
    border-radius: 50%;
    background-size: 200px 200px;
    background-position: right bottom;
}

これで、課題通りの画像を表示することが出来ましたっ！

反省と補足

「①border-radiusだけでもいいけど、今回は不正解！？」で書いたCSSでも、画像は丸くなって表示されています。今回は原画が正方形に近かったので実装中は気が付かなかったのですが、横長の画像を同じ設定で表示した場合、画像は指定したサイズにギュっと縮んでしまうため、不正解という言葉を使いました。原画が正方形の場合は、この設定だけでも十分かもしれません。

「②画像を丸く表示する＝丸く切り取る！」では、初めてbackground-imageを使用しました。最初は”画像を表示する領域を確保する”ということを理解できておらず、赤丸も画像も表示されないな～と思っていました(汗) 画像を丸くすることとは関係ないですが、background-imageを使用するときは表示領域を確保することを忘れないようにしないといけないですね。

「③丸く切り取る位置も指定」の時は何も表示が変わらないな～と思っていたのですが、表示領域より小さいサイズで表示している画像の場合は、当たり前ながらbackground-positionを設定しても意味がありません。表示する画像のサイズを大きく調整してから、右下部分を切り取ることで今回の研修課題通りの表示にすることが出来ました。

まとめ

HTMLとCSSの研修だったため、画像そのものを丸く加工すること以外で考える必要がありました。表示領域を確保したうえで丸く見せる。なるほどな！と思った使い方でした。