Bootstrap

Bootstrapで画像を丸く表示するrounded-circleの使い方

投稿日:2018/07/17 更新日:

Bootstrapで画像を丸く表示する

Bootstrapで画像を丸く表示するにはrounded-circleを使います。


Bootstrap4では四角い画像を簡単に丸い形で表示することができます。

四角い画像を丸く表示する「rounded-circle」

通常、画像をWordPressで表示すると
電脳空間の世界を飛び回る女性
のように四角く表示されますが、Bootstrap4では画像を編集することなく、簡単に丸く切り取ったような形で表示できます。

imgタグにrounded-circleクラスを指定するだけで簡単に
電脳空間の世界を飛び回る女性
丸く切り取ったような形になります。

実際のソースは以下のようになります。

Bootstrap3までは「img-circle」で行けたようですがBootstrap4では「img-circle」は「Not Work」になっているので「rounded-circle」を使う必要があります。

まとめ

Bootstrap4では「rounded-circle」を使えば簡単に四角い画像を丸く切り取って表示することができます。

以上、「Bootstrapで画像を丸く表示するrounded-circleの使い方」でした。

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-Bootstrap
-

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.