文章を読みやすく！HTML/CSSで枠線を付ける方法

Webサイトで文章を読むとき、長いテキストは目が疲れやすいですよね。
そんなときに便利なのが「枠線」です。
文章を枠で囲むだけで、強調したい内容や注意書きを見やすくできます。

この記事では、初心者向けに簡単なHTMLとCSSで枠線を付ける方法を解説します。

1. 基本の枠線（divタグ＋style）

<div style="border:1px solid #ff0000; padding:10px;">
  これは枠線の中のテキストです。
</div>

実際の表示

• border:1px solid #000; → 枠線の太さ・種類・色を指定
• padding:10px; → 枠内の余白を作る（文字が枠にくっつかないように）

ポイント

枠線の色は背景色とコントラストを付けると見やすくなります。

2. 背景色付きの枠線

<div style="border:1px solid #ff0000; padding:10px; background-color:#fffacd;">
  注意やポイントを目立たせたい場合はこちら
</div>

実際の表示

• background-color で枠内に薄い色をつけると、さらに強調できます
• 読みやすさとデザインのバランスを意識しましょう

3. 角丸の枠線（おしゃれな印象に）

<div style="border:1px solid blue; padding:20px; border-radius:10px;">
  角を丸くすると柔らかい印象になります
</div>

実際の表示

• border-radius を追加するだけで簡単に角丸に
• サイトの雰囲気に合わせて数値を調整できます

4. 色々な枠線で装飾

<div style="border:2px dashed red; padding:15px; background-color:#fff0f5;">
  注意点やお知らせを目立たせたいときに便利です
</div>

実際の表示

• 点線や太さを変えるとアクセントになります
• 長文の注意書きやコラムに使うと読みやすくなります

まとめ

• 枠線は <div style="border:…"> で簡単に作れる
• 背景色や角丸、線の種類を組み合わせて強調できる
• 読みやすく、視覚的に整理された文章になる

HTMLとCSSの基本を覚えるだけで、サイトの見た目は大きく変わります！
次の記事では「画像にテキストを回り込ませる方法」を紹介します。
小さな工夫で、文章もデザインもぐっとプロっぽくなります✨

初心者の皆様へ

「自分でやってみたいけど、HTMLやCSSが難しい…」

そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。

• 高品質テンプレートでデザインも安心
• 自分で更新できるWebサイト（WordPress）
• 実用的な機能多数
• 操作マニュアル付き
• 公開後2週間の無料サポート

作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！