2018-05-13

Bootstrapで画像の表示形式を変更する|コピペで動くサンプル付き

通常のCSSで画像を丸く表示したり、レシポンシブ化しようとすると若干複雑なCSSを組む必要があり、初心者・独学者の場合は苦労することがあります。

そんな中Bootstrapでは簡単に画像を丸く表示したり、レシポンシブ化する方法がありますので今回はその方法を紹介します。

Bootstrapで画像の表示形式を変更する際のサンプルコード

以下サンプルコードをメモ帳などに貼り付け、html形式で保存し展開してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>画像加工テスト</title>
    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
<div>
    <!--画像全体を丸く表示させる-->
    <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample2.jpeg"
         class="img-circle " alt="参考画像2">

    <!--画像の角を丸く表示させる-->
    <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg"
         class="img-rounded" alt="参考画像1">

    <!--画像のサムネイルで表示する-->
    <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample3.jpeg"
         class="img-thumbnail" alt="参考画像3">
</div>

<div>
    <!--画像をセンターに表示し、かつレシポンシブで表示する-->
    <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg"
         class="img-responsive center-block">
</div>

</body>
</html>

サンプルコード解説

画像を加工する際は基本的にBootstrapのCSSを適用すれば対応できます。

class="img-circle "

画像全体を丸くします。

class="img-rounded "

画像の角を丸く表示させます。こちらはあくまで角を丸くするCSSです。

class="img-thumbnail"

サムネイルの用に画像を表示させます。

class="img-responsive center-block"

画像をレシポンシブで表示させます。 img-responsive でレシポンシブ化します。 img-responsiveは下記CSSが自動で設定されレシポンシブ化されます

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

center-blockはレシポンシブ化して要素を中央に表示させる設定になります。その為中央表示をしたくない場合は、center-blockを削除すれば対応可能です。

以上

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでメディアオブジェクトを利用する|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

軽量なCSSフレームワークBulma（ブルマ）のご紹介

2018/05/10

Sequel PROでAWSのDBに接続する

2018/05/15

Ruby on RailsのアプリでGoogle Adsenseが表示されない場合の対処法