JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapのimg-roundedクラスで画像に角丸を付ける方法

Bootstrapのimg-roundedクラスを使うと、画像に簡単に角丸（丸みのある角）を適用できます。画像の四隅が滑らかに丸められ、Webページ全体に柔らかく洗練された印象を与えることができます。

基本的な使い方

<img>タグにclass="img-rounded"を追加するだけで、特別なCSSを書かずとも角丸スタイルが適用されます。

サンプルコード

以下は、元の画像とimg-roundedクラスを適用した画像を並べて比較できる例です。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Images</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <p>Styling images with Bootstrap</p>
      <h1>Original Image</h1>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg">
      <h1>Rounded Image</h1>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg" class = "img-rounded">
   </body>
</html>

このコードでは、まずBootstrapのCSSとJavaScriptを読み込み、その後同じ画像を2つ表示しています。1つ目は通常の状態、2つ目はimg-roundedクラスを付けたもので、ブラウザで開くと角の丸みの違いを確認できます。

バージョンに関する注意点

img-roundedはBootstrap 3までで使用されていたクラスです。Bootstrap 4以降では、代わりにroundedクラスを使用してください。Bootstrap 5でもroundedクラスが引き続きサポートされています。また、より細かい制御が必要な場合は、rounded-smやrounded-lgなど、角丸の大きさを調整できるユーティリティクラスも用意されています。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. C#のMathクラス徹底解説！定数（E・PI）と主要メソッドの使い方

    C#のMathクラスは、三角関数・対数関数などの数学処理を行うための静的メソッドと定数を提供するクラスです。インスタンスを作成せずに、クラス名から直接呼び出せるのが特徴です。この記事では、Mathクラスが持つ代表的な定数フィールド「Math.E」と「Math.PI」、およびよく使われるメソッド「Math.Acos()」「Math.Pow()」の構文と具体的な使用例を、サンプルコード付きで解説します。Math.E ― 自然対数の底Math.Eは、自然対数の底として知られる定数eを表すフィールドです。構文public const double E = 2.71828182845905;使用例実際に