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

HTMLやスタイルシート(CSS)を使ったボックス、枠線の表示、装飾方法について解説しました。

  • 画像を使わずにCSSだけで角を丸くする方法

    border-radiusプロパティを使えば、スタイルシートだけで枠線の角を丸くできます。これなら、現在よく見かける「四隅の角丸を画像で用意して配置を工夫する」というアクロバットな技は使わずに角を丸くできます。

    ガイド:西村 文宏

  • ノートのように罫線(下線)を引くデザイン

    「ノート」のように、文中の各行に下線を引くデザインを作ってみましょう。画像とスタイルシートを組み合わせて、簡単に「ノート」っぽく見えるデザインが作れます。

    ガイド:西村 文宏

  • ボックスをウインドウの中央に配置する方法

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

    ガイド:西村 文宏

  • イラストなどでカラフルな区切り線を作る

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

    ガイド:西村 文宏

  • 表示面積を限定してスクロールバーを表示させるには

    更新履歴の表示など、「広い面積は専有したくないものの、多くの情報を掲載したい」場合、どうしますか? HTMLとCSSでスクロールバーを表示させましょう。

    ガイド:西村 文宏

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

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

    ガイド:西村 文宏

  • 高さ1ピクセルの線を引きたい

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

    ガイド:西村 文宏

  • CSSを1行書くだけで枠の角を丸くする!

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

    ガイド:西村 文宏

  • スクロールバーに色を付ける方法

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

    ガイド:西村 文宏

  • 四辺が別種類の複雑な枠を作る

    スタイルシートを活用した「見出し」としてよく使われるデザインの作成方法を例にして、スタイルシートで可能な枠作りを極めてみましょう。HTMLではできない細かな指定が簡単に実現できます。

    ガイド:西村 文宏

1 2

人気ホームページ作成ランキング

Powered by 価格.com

おすすめ記事

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック