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

CSSでメモ（注釈）ボックスを作成する方法

Webページでは、ユーザーに注意喚起や補足情報を伝えるための「メモ」や「アラートボックス」を表示したい場面がよくあります。CSSを使えば、background-colorとborder-leftを組み合わせるだけで、視覚的に分かりやすいメモボックスを簡単に作成できます。

CSSでメモを作成するサンプルコード

以下のコードでは、3種類のメモスタイル（danger／success／info）を定義しています。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
        margin-bottom: 15px;
        padding: 4px 12px;
        font-size: 18px;
    }
    .danger {
        background-color: #ffdddd;
        border-left: 6px solid #f44336;
    }
    .success {
        background-color: #ddffdd;
        border-left: 6px solid #4CAF50;
    }
    .info {
        background-color: #e7f3fe;
        border-left: 6px solid #2196F3;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">Notes Example</h1>
<div class="danger">
<p><strong>Danger!</strong>Operation may damage your computer</p>
</div>
<div class="success">
<p><strong>Success!</strong> Operation has been performed successfully</p>
</div>
<div class="info">
<p><strong>Info!</strong> Need more resources to perform this operation</p>
</div>
</body>
</html>

コードのポイント解説

  • .danger … 薄い赤の背景（#ffdddd）に赤い左罫線（#f44336）。操作に関する警告など、危険性を伝えるメッセージに適しています。
  • .success … 薄い緑の背景（#ddffdd）に緑の左罫線（#4CAF50）。処理が正常に完了したことなどを伝えるメッセージに適しています。
  • .info … 薄い青の背景（#e7f3fe）に青の左罫線（#2196F3）。案内や補足情報など、中立的なお知らせに適しています。

それぞれのクラスは共通して左側に太い境界線を持たせているのが特徴です。この「色付きの左罫線＋淡い背景色」という組み合わせにより、ユーザーはテキストを読む前にメッセージの種類を直感的に把握できます。

出力結果

上記のコードをブラウザで実行すると、次のように3種類のメモボックスが表示されます。

CSSでメモ（注釈）ボックスを作成する方法

  1. CSSで4列のレイアウトグリッドを作成する方法

    CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {

  2. CSSだけでチェックマークを作成する方法【サンプルコード付き】

    CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm