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

CSSでサムネイル画像を作成する方法【borderプロパティ活用】

CSSでサムネイル画像を作成する方法

Webページにサムネイル画像を表示する際、CSSのborder（ボーダー）プロパティを使用すると、画像の周囲に枠線を追加して、見栄えの良いサムネイルを簡単に作成できます。

borderプロパティでは、枠線の「太さ」「スタイル」「色」を一度に指定できます。さらにborder-radiusで角を丸めたり、paddingで画像と枠線の間に余白を持たせたりすることで、より洗練されたデザインに仕上げることが可能です。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border: 2px solid orange;
            border-radius: 3px;
            padding: 7px;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
   </body>
</html>

コードの解説

  • border: 2px solid orange; … 幅2pxのオレンジ色の実線を画像の周囲に表示します。
  • border-radius: 3px; … 枠線の角をわずかに丸め、柔らかい印象を与えます。
  • padding: 7px; … 画像と枠線の間に7pxの余白を設け、写真のような見た目を作ります。

このように、わずか数行のCSSを追加するだけで、シンプルな画像を魅力的なサムネイルへと変えることができます。色や太さ、角丸の大きさを調整して、サイトのデザインに合わせてカスタマイズしてみてください。

  1. CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

    Webページをスクロールしても画像が画面上に固定され続ける「スティッキーイメージ」は、position: sticky を使うことで簡単に実装できます。この記事では、CSSだけでスティッキーイメージを作成する具体的なコード例と、その仕組みをわかりやすく解説します。スティッキーイメージとは？スティッキー（sticky）配置とは、要素が通常のドキュメントフロー内に表示されつつ、スクロールして指定した位置に達すると、その位置に「貼り付いて」動かなくなる配置方法です。画像に対してこの設定を行うことで、ページを下にスクロールしても画像が画面上部に留まり続ける効果が得られます。実装コード例以下は、CSSで

  2. CSSで画像にボーダー（枠線）を追加する方法

    Webページ上の画像にボーダー（枠線）を追加したい場合、CSSの border プロパティを使うのが最も簡単な方法です。border プロパティは「太さ」「スタイル」「色」の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。 基本的な書き方 border プロパティは以下のように記述します。 border: 太さ スタイル 色; 例えば border: 8px solid rgb(0, 238, 255); と指定すると、8pxの太さの実線（solid）がシアン系の色で描画されます。 サンプルコード 以下は、CSSを使って画像にボーダーを追加する具体的なコード例です。 &l