スポンサーリンク

こんにちは、鈴木俊吾(すずしん)です。
ブログで記事を書く際に、一部の内容を目立たせたり、囲い込んで強調したい場合がありますよね?
そんなときに便利なのが、ボックスデザインです。
色のついた背景や枠線を使って、記事の中で特定の部分を目立たせることができます。
今回の記事では、シンプルで使いやすいボックスデザイン(CSS)をブログに導入する方法を紹介します。
記事の中で、特定のテキストを囲んで目立たせるためのCSSコードをご紹介しますので、ぜひ参考にしてみてください。
導入も非常に簡単なので、初心者の方でも安心して使えますよ!
ボックスデザイン(CSS)の導入方法

今回作成するボックスデザインは、以下の4種類です。
2. 重要ボックス(緑)
3. 注意ボックス(黄)
4. 警告ボックス(赤)
それぞれのボックスデザインには、特定のクラス名を指定することで簡単に適用できます。
CSSコードは非常にシンプルで、カスタマイズもしやすいので、分かる方は自分好みにアレンジしてみてください。
実際のCSSのコード
今回設定するCSSのコードは以下の通りです。
例えば、「box.css」というファイルを作成し、以下のコードを記述してください。
そして、使いたいブログで、このCSSファイルを読み込むことで、ボックスデザインを適用できます。
/* 共通スタイル */
.box {
display: flex;
align-items: center;
border: 2px solid;
border-radius: 4px;
padding: 10px;
margin: 20px 0;
}
/* アイコン用の疑似要素設定 */
.box::before {
font-size: 30px;
margin-right: 20px;
display: inline-block;
}
/* Info: 青系(ℹ️) */
.box-info::before {
content: "ℹ️";
}
/* Important: 緑系(✅) */
.box-important::before {
content: "✅";
}
/* Alert: 黄色系(⚠️) */
.box-alert::before {
content: "⚠️";
}
/* Warning: 赤系(❌) */
.box-warning::before {
content: "❌";
}
/* 各ボックスの色設定 */
/* Info */
.box-info {
border-color: #007BFF;
background-color: #D0E7FF;
}
/* Important */
.box-important {
border-color: #28A745;
background-color: #D4EDDA;
}
/* Alert */
.box-alert {
border-color: #FFC107;
background-color: #FFF3CD;
}
/* Warning */
.box-warning {
border-color: #DC3545;
background-color: #F8D7DA;
}
HTMLでの記述方法
HTMLでボックスデザインを適用する場合は、以下のように記述します。
div要素に適用したいクラス名を指定し、span要素内に表示したいテキストを記述してください。
<div class="box box-info">
これは情報メッセージです。
</div>
<div class="box box-important">
これは重要なメッセージです。
</div>
<div class="box box-alert">
これは注意メッセージです。
</div>
<div class="box box-warning">
これは警告メッセージです。
</div>
このように、<div>
要素に適用したいクラス名を指定することで、ボックスデザインを適用できます。
実際の表示例
実際の表示例は以下の通りです。
あなたが伝えたい内容に合わせて、適切なボックスデザインを選んで使ってみてくださいね。
まとめ:シンプルで使いやすいボックスデザイン(CSS)を導入しよう!

今回は、シンプルで使いやすいボックスデザイン(CSS)をブログに導入する方法を紹介しました。
特定のテキストを囲んで目立たせるためのボックスデザインは、読者の目を引く効果がありますので、ぜひ活用してみてください。
シンプルながらも使い勝手の良いデザインを目指しましたので、初心者の方でも簡単に導入できるはずです。
ぜひ、あなたのブログ記事にボックスデザインを取り入れて、より魅力的なコンテンツを作成してみてください!
新しいデザインが、読者の興味を引き、ブログの魅力を高めることにつながるかもしれませんよ?
ブログのデザインを変えるのって楽しいですよね!
今後も、何か新しいデザインを取り入れてみたいと思います。
役に立ちそうだなと思ったら、また紹介します。
ぜひ、お楽しみに!
スポンサーリンク

名前:鈴木俊吾(すずしん)
大学卒業後、公務員浪人を目指すも失敗。
8年の無職期間の後、一念発起してフリーランスに転身。
しかし、収入0円という稼げない日々が長く続く…。
2025年、このままではいけないと思い、このブログを運営開始。
人生挑戦課題をこなしながら、人生攻略ハンターとして活動。
試行錯誤をしつつ、人生大逆転を目指していく過程を発信中。
主な活動:ブログ / 歌い手 / 個人ゲーム開発 / 作曲 / 投資 / etc...
主な資格:3級ファイナンシャル・プランニング技能士 / WEBライター検定3級 / .com Master BASIC / 実用英語技能検定準2級 / ダイエット検定2級 / etc...
スポンサーリンク