【HTMLで作れる採用LP】Bootstrapでは画像を簡単に装飾できる

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グループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。

この記事が気に入ったら
いいね ! しよう

Twitter で
 

新卒採用をはじめるならディーレクトにご相談ください

新卒採用に踏み出せない人事担当者の方、 そのお悩み、ディーレクトが解決します!

ABOUTこの記事をかいた人

中神 大司

株式会社D-rect CTO 専務取締役。大学院在学中よりITベンチャー企業にてプログラマ・エンジニアとして活躍。有名アーティストや海外ブランドのECサイト構築に携わる。その後、株式会社インタークロスにおいて、求人サイト全てのシステム設計・構築に携わり、現在に至る。 Wordbench宮崎の主催や、職業訓練校においてプログラミングの講師を務めるなど、若手技術者の育成にも力を注いでいる。サーバーの構築を得意としており、得意な事は、粗探しとあげ足取り。