ホームページ作成
ボックスや枠線の表示・装飾 (HTML,CSS)
HTMLやスタイルシート(CSS)を使ったボックス、枠線の表示、装飾方法について解説しました。
記事一覧
-
横幅を100%にした際、親ボックスからはみ出すのを防ぐ
横幅を100%にすると、なぜか、はみ出してしまう……?画像やボックスなどを横幅いっぱいに広げるべく、CSSで横幅(widthプロパティの値)を100%に指定すると、なぜか親ボックスの領域からはみ出してしまうことがあります。横方向に、なぜか、はみ出してしまう例CSSで細かくデザインやレイアウトを...続きを読む
-
CSSのborder-radiusで角丸に表示する方法
CSSだけで簡単に角丸が作れるborder-radiusプロパティウェブページをデザインしていると、角を丸くしたいと思うことがあります。文章を掲載するボックスの角を丸くしたい場合や、テキスト入力枠の角を丸くしたい場合、画像の角を取って少しだけ丸く見せたい場合など、様々な状況があるでしょう。CS...続きを読む
-
ノートのように罫線(下線)を引くデザインの作り方
ノートのように各行に下線を引くデザインを作る方法 (画像使用)ノートのように、各行に下線を引くデザインを作ってみましょう。スタイルシートと画像を使うことで、下記のようにノートっぽく見えるデザインが簡単に作れます。div.sample244a {border: 2px solid #0000cc...続きを読む
-
ボックスをウインドウの中央に配置する方法
上下方向にも左右方向にも中央に寄せる ボックスをウインドウの中央に配置 (上下・左右方向共に中央に表示) ボックスを左右方向の中央に寄せる(センタリ...続きを読む
-
イラストなどでカラフルな区切り線を作る
p.sample244horizonline { background-image: url("//img.allabout.co.jp/gm/article/23979/ribbons62.gif") !important; background-repeat: repeat-x !impo...続きを読む
-
CSSのoverflowでボックスにスクロールバーを表示する方法
スクロールバー付きボックスで、狭い面積の領域に多くの情報を詰める表示面積を狭く限定したボックスで、スクロールバーを使って続きを読めるようにしたデザインは、新着情報や更新履歴のように「広い面積を占有させたくはないが、多くの情報を列挙しておきたい」という内容を掲載する際に便利です。例えば下図では、...続きを読む
-
縞模様で目立つ枠線(囲み)を作る
※CSS3のプロパティ「border-image」を使って、もっとシンプルに縞模様の枠線を作成できる方法を、記事「CSS3のborder-imageで、しましまの目立つ枠線を作る」で公開しています。そちらも、ぜひご参照下さい。(2014年3月27日公開)縞模様の枠線を作るスタイルシートのbor...続きを読む
-
高さ1ピクセルの線を引きたい
div.samplearea { background-color: #f0f0f0; border: 2px #eeeeee solid; padding: 0.5em; margin: 1em 0px; }ホームページを作成する上での質問で、よく「1ピクセルの線を引きたいんだけど」というも...続きを読む
-
CSSを1行書くだけで枠の角を丸くする!
※この記事は、2005年のものです。※スタイルシートだけで枠の角を丸くする方法は、新記事「画像を使わずにCSSだけで角を丸くする方法」(2009年7月公開)で詳しく解説しています。ぜひ、そちらをご参照下さい。 p.sourcecode { background-color: #ffffcc; ...続きを読む
-
スクロールバーに色を付ける方法
スクロールバーを好きな色で塗るせっかくページ全体をデザインしたのに、スクロールバーの色でデザインが台無しに見える……ということはありませんか?Internet Explorer 5.5 以降では、スタイルシートを使ってスクロールバーの色を細かく指定することができます。※スタイルシートによるスク...続きを読む