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

縞模様で目立つ枠線(囲み)を作る(2ページ目)

赤と橙色、緑と黄色、青と水色……など、複数の色を組み合わせた縞模様の枠線を使って「囲み」を作ってみましょう。スタイルシートのborderプロパティだけで線を引くよりも、かなり目立つ枠を作ることができます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

枠線に使う画像を用意する

縞模様の枠線の、縞模様部分は画像で作ります。先ほどの例では、以下の3つの画像を使いました。

  • 緑×黄色:緑色と黄色の縞模様画像
  • 赤×橙色:赤色と橙色の縞模様画像
  • 青×水色:青色と水色の縞模様画像

この画像を、枠線の背景画像として使うことで、縞模様の枠線を実現します。

どんな画像でも自由に作成して枠線として使うことができます。 何でも適当な画像を用意して下さい。 上記の3画像を使う場合は、上記の画像を右クリックするなどして保存して、ご自由にご活用下さい。

枠線を作るHTMLを記述する

まずは、HTMLを記述しましょう。
スタイルシートのborderプロパティを使った枠線であれば、対象のボックスに対してスタイルを適用するだけで枠線を引けますが、ここではHTML側にも少し記述を加える必要があります。

<div class="stripe">
   <p>ボックスの中身です。</p>
</div>

何も複雑なことはありません。 p要素で作った段落の外側を、div要素で囲んでいるだけです。

p要素の内容には、枠線の内側に表示したい文字列などを記述します。 div要素には、スタイルを適用するために、class属性を用いてクラス名「stripe」を付加しています。

HTMLの記述はこれだけです。
これだけでは、まだ何も装飾を施していないので、以下のようにしか見えません。

ボックスの中身です。

これに、スタイルシートを使って縞模様の枠線を加えます。

スタイルシートで縞模様の画像を枠線にする方法へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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