Bootstrap使ってますか？最近、記事をあげていないので、心配です。CTOの「がみ」です。
もう忘れてる方も多いと思うので、前回の記事をのせておきます。
画像を装飾する
Web（HTML）で画像を表示するのは、簡単です。
imgタグを記述すればいい。
ただ、これは、画像をそのまま出力するに過ぎないのです。
丸に切り取りたい。ちょっと角を丸くしたい。
皆さんどうしますか？
Photoshopで加工？
でも、その場合って、同じ画像を使いまわしたい場面が出てきたときに、
さっきは丸く切り取ったんだけど、今度は、四角く使いたい。。。。
くそ。。。
その分、画像を作っていってもいいですが、画像をロードする数が増えるので、サイトが遅くなる原因にもなり良くありません。。
じゃあ、どうするか？
CSSで解決できます
例えば、角丸。
表示したimgに対して、border-radiusをかけばOKです。
<style>
.border_radius {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
<img src='##画像ファイル##' class='border_radius'>
これで、画像に対して、角丸がかかることになります。
cssでいちいち指定か。。。。
Bootstrapだとclass属性をしていするだけでいろんな表現が可能
<!-- 通常の画像表示 --> <img src="img/komatsu_img.jpg"> <!-- レスポンシブ --> <img src="img/komatsu_img.jpg" class="img-responsive"> <!-- 角丸 --> <img src="img/komatsu_img.jpg" class="img-rounded"> <!-- 円 --> <img src="img/komatsu_img.jpg" class="img-circle"> <!-- サムネイル表示 --> <img src="img/komatsu_img.jpg" class="img-thumbnail">
もう少し変更したい、という場合は、この状態から、新しいclassを付与して、cssを追加してあげればOKです。
ぜひ、試してみてくださいね。
長方形の画像を加工しているので、少し変ですが、今日のサンプルです。
See the Pen 【HTMLで作れる採用LP】Bootstrapで画像表示サンプル by taishigami (@taishigami) on CodePen.
おしらせ
「宮崎でITの勉強会に参加したいけど、情報がない！」というあなたへ
宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。
