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

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

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

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
※CSS3のプロパティ「border-image」を使って、もっとシンプルに縞模様の枠線を作成できる方法を、記事「CSS3のborder-imageで、しましまの目立つ枠線を作る」で公開しています。そちらも、ぜひご参照下さい。(2014年3月27日公開)

縞模様の枠線を作る

スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。 今回は、以下のような枠を作る方法をご紹介いたします。

緑色と黄色の斜線からなる縞模様の枠線です。


橙色と赤色にもできます。


水色と青色にも。記述する文字列が多ければ、枠の高さも自動的に広がります。

上記の3つは、どれも枠線の太さが5pxです。この太さは、スタイルシートで自由に変更できます。

枠線の太さは自由に変えられます。細くした例。


これは太くした例。

「縞模様の枠線」の枠線をなくすと、以下のようにもできます。

枠線の枠線をなくした版。

「縞模様の枠線」の枠線の色を工夫すると、枠線そのものを立体に見せることもできます。

縞模様の枠線が浮き上がったように見える例。


縞模様の枠線が凹んでいるように見える例。

いかがでしょうか? なかなか目立つ枠になっているのではないでしょうか。
これらの枠線は、画像とスタイルシートを使って実現しています。

それでは、この枠線の作り方を順にご説明いたします。

縞模様の枠線の作り方へ >>

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

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

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