ボックスや枠線の表示・装飾 (HTML,CSS)

画像やボックスを横幅いっぱいに広げるためにCSSで横幅(widthプロパティの値)を100%にすると、なぜか親ボックスの領域からはみ出ることがあります。CSSで幅や長さの指定を100%にした際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介いたします。意図しない変なはみ出しを簡単に解消できます。

CSSのborder-radiusプロパティを使って、スタイルシートだけでボックスなどの角を丸くする方法を解説。枠線が引かれていれば四角い枠線の角が丸くなりますし、背景色が塗られていれば四角い塗りつぶし領域の角が丸くなります。画像の四隅を丸くカットすることも可能。角丸の半径は1ピクセル単位で設定でき、四隅の一部だけ(上だけ・下だけ・左だけなど)を角丸にすることもできるため、連結ボタンに見せる装飾も簡単に作れます。

ノートのように、文中の各行に下線を引くデザインの作り方を解説。罫線画像とスタイルシートを組み合わせると、簡単にノートのように見えるデザインが作れます。

1つのボックスをウインドウの中央に表示させる方法をご紹介。左右方向だけでなく上下方向にも中央に寄せて、ウインドウ（表示領域）の中心にボックスを配置させる方法です。スタイルシートで簡単に実現できます。

区切り線を引く目的でhr要素を使うこともあるでしょうが、hr要素では横向きの罫線が引かれるだけです。もっとカラフルな区切り線を描いてみましょう。表示幅に合わせて伸縮自在な区切り線を画像で作る方法をご紹介。

スクロールバー付きボックスの簡単な作り方を解説。HTMLで作成したボックスにCSSのoverflowプロパティを使ってスクロールバーを追加すれば、表示面積の狭いボックスの中にもたくさんの情報を詰め込むことができます。お知らせ一覧や更新履歴の掲載など「広い面積は使いたくないが、多くの情報を列挙したい」という場合におすすめのレイアウト方法です。

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

よく「1ピクセルの線を引きたいんだけど」という質問を受けます。どうすれば引けるでしょうか？ボックスの高さを1ピクセルにしようと考えたのではうまくいきません。自由な太さの線を引く方法をご紹介致しましょう。

枠の角を丸くする方法として、スタイルシートに1行書き加えるだけで済む方法をご紹介したいと思います。丸みの半径を自由に指定できるなど、画像とHTMLを駆使するよりも楽に作れます。

せっかくページ全体をデザインしたのに、スクロールバーの色でデザインが台無し…なんてことはありませんか？スクロールバーに好きな色を指定してみましょう。方法はとっても簡単です。