ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

色も線種も線幅も自由な枠を作る(3ページ目)

「枠を作りたい」と思う場面はたくさんありますね。実線・点線・破線・二重線など、様々な種類の枠を作ってみませんか? 線幅は1ピクセル単位で自由自在に指定可能。実現はとっても簡単です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

段落だけ?

今までの例は、すべて「段落」を表す p要素(<p>~</p>)に対してスタイルシートを適用する形でご紹介してきました。
もちろん、今回ご紹介したスタイルは、p要素以外にも適用可能です。例えば、同じブロックレベル要素である div要素 でも form要素 でも構いません。

また、文章中の特定の単語だけを枠で囲みたいこともありますね。 そのような場合も可能です。em要素 や strong要素 などのインライン要素に対しても、今回ご紹介したスタイルを当てはめることができます。

例えば次のように記述します。

All About Japan は、250名を超える <span style="border-width: 1px; border-color: red; border-style: dotted; background-color: pink; color: maroon; padding: 0px; font-weight: bold;">その道のプロ</span>“ガイド”がナビゲーションする検索サイトです。
All About Japan は、250名を超える その道のプロ “ガイド”がナビゲーションする検索サイトです。

上記の例では、文章中にある「その道のプロ」という文字の部分だけ、赤色の点線で囲まれていることがお分かり頂けると思います。

終わりに

今回は、スタイルシートで簡単に枠を作る方法をご紹介いたしました。
ぜひ、活用してみて下さい。
なお、次回は「より細かくデザインした枠」を実現する方法をご紹介いたします。もっと複雑にデザインした枠を作りたい方々は、ぜひご参照下さい。

【次の記事】

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます