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

横幅を100％にすると、なぜか、はみ出してしまう……？画像やボックスなどを横幅いっぱいに広げるべく、CSSで横幅(widthプロパティの値)を100％に指定すると、なぜか親ボックスの領域からはみ出してしまうことがあります。横方向に、なぜか、はみ出してしまう例CSSで細かくデザインやレイアウトを作成し...続きを読む

CSSだけで簡単に角丸が作れるborder-radiusプロパティウェブページをデザインしていると、角を丸くしたいと思うことがあります。文章を掲載するボックスの角を丸くしたい場合や、テキスト入力枠の角を丸くしたい場合、画像の角を取って少しだけ丸く見せたい場合など、様々な状況があるでしょう。CSSには...続きを読む

ノートのように各行に下線を引くデザインを作る方法(画像使用)ノートのように、各行に下線を引くデザインを作ってみましょう。スタイルシートと画像を使うことで、下記のようにノートっぽく見えるデザインが簡単に作れます。div.sample244a{border:2pxsolid#0000cc!importa...続きを読む

上下方向にも左右方向にも中央に寄せるボックスをウインドウの中央に配置（上下・左右方向共に中央に表示）ボックスを左右方向の中央に寄せる（センタリングする）には、スタイルシートのmarginプロパティを使って、値を「auto」に設定すれば実現できます。しかし、その方法では左右方向には中央に寄りますが、上...続きを読む

p.sample244horizonline{background-image:url("//pro-aa.s3.amazonaws.com/aa/gm/article/2/3/9/7/9/ribbons62.gif")!important;background-repeat:repeat-x!im...続きを読む

スクロールバー付きボックスで、狭い面積の領域に多くの情報を詰める表示面積を狭く限定したボックスで、スクロールバーを使って続きを読めるようにしたデザインは、新着情報や更新履歴のように「広い面積を占有させたくはないが、多くの情報を列挙しておきたい」という内容を掲載する際に便利です。例えば下図では、赤色の...続きを読む

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

div.samplearea{background-color:#f0f0f0;border:2px#eeeeeesolid;padding:0.5em;margin:1em0px;}ホームページを作成する上での質問で、よく「1ピクセルの線を引きたいんだけど」というものがあります。スタイルシートを使...続きを読む

※この記事は、2005年のものです。※スタイルシートだけで枠の角を丸くする方法は、新記事「画像を使わずにCSSだけで角を丸くする方法」（2009年7月公開）で詳しく解説しています。ぜひ、そちらをご参照下さい。p.sourcecode{background-color:#ffffcc;border:2...続きを読む

スクロールバーを好きな色で塗るせっかくページ全体をデザインしたのに、スクロールバーの色でデザインが台無しに見える……ということはありませんか？InternetExplorer5.5以降では、スタイルシートを使ってスクロールバーの色を細かく指定することができます。※スタイルシートによるスクロールバーの...続きを読む