この写真の記事へ

枠線の真下に描画される背景画像のずれを調整する方法(画像)(8ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

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

...続きを読む

標準では、枠線を含む「枠線の内側」に描画される

背景画像付きのボックスに枠線を付加したところ
背景画像付きのボックスに半透明の枠線を付加したところ
背景画像の描画開始位置を、枠線の外側に合わせる
枠線の真下には、背景画像を描画しないようにもできる
標準では、「内側の余白(padding)」の左上を基準に描画される
「枠線(border)」の左上を基準に描画
「内容(content)」の左上を基準に描画
標準では、枠線を含む「枠線の内側」に描画される
枠線部分を除外した「枠線の内側」にだけ描画
枠線も余白も除外して、内容部分にだけ描画
背景画像は枠線の真下にも描かれている

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

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