1枚の画像からサイズ可変な罫線を表示する(2):FirefoxとSafariのCSS
エ・ビスコム・テック・ラボ
2008/02/01 17:00
CSS 3の草案をSafari 3が実験的に実装した-webkit-border-imageプロパティ。今回はこれをもう少し詳しくみていこう。
前回、-webkit-border-imageプロパティで1枚の画像を9つに分割して、罫線として表示する方法を紹介した。-webkit-border-imageプロパティは、CSS 3の草案であるCSS3 Backgrounds and borders Moduleで提案されているborder-imageプロパティを、Safari 3が実験的に先行実装したものだ。
今回は、各辺の画像を繰り返して表示する方法や、背景画像と組み合わせて利用する方法などを紹介していきたい。
まずは、-webkit-border-imageプロパティを利用して、waku.pngを罫線の画像として指定する。すると、ブラウザによって9つに分割された画像のうち、4つの辺と中央の画像はコンテンツの大きさに合わせて引き伸ばして表示される。
waku.png
div {
-webkit-border-image: url("waku.png") 18 18 18 18 / 18px;
}
<div> 今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。 </div>※ブラウザで表示を確認する
各辺と中央の画像は、正確にはコンテンツの大きさではなく、パディングボックスの横幅と高さに合わせて引き伸ばされている。パディングボックスはコンテンツ部分にpaddingの余白を含めたボックスのことで、<div>に対してpaddingを指定して罫線の内側に余白を入れると、次のような表示になる。
div {
-webkit-border-image: url("waku.png") 18 18 18 18 / 18px;
padding: 20px;
}
※ブラウザで表示を確認する
- 5人の推薦記事
- 0人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
- 特集: FirefoxとSafariのCSS徹底検証 (66件)
- ホワイトペーパー
- 企画特集
- 話題のタグ
UI
オープンソース
クラウド
java
iPhone 3G
OS
Off Topic
Webデザイン
Chrome
プログラミング言語
Apple
Opera
Windows
Ajax
仮想化
linux
データベース
リファレンス
Windows XP
Tips
Windows 7
Mac OS X
Firefox 3
Mozilla
Firefox
脆弱性
iPod touch
開発環境
アプリケーション
Windows Vista
iPhone
Microsoft
google
RIA
Webサービス
javascript
Database
php
WebKit
ブラウザ
マイクロソフト
ソフトウェア開発
小技
HTML
Safari
CSS
Flash
Internet Explorer
インストール
セキュリティ
話題のタグを見る »


SQLite対応アプリのデータベースファイルを閲覧する
グーグル、「Google Buzz」を発表--Gmailのソーシャル機能を強化
「H.264」ストリーミングのロイヤリティ無料期間が延長
マイクロソフト、「Office 2010」のRC版をリリース
通販サイトのアクセス集中からの危機を救う
レガシーアプリケーションの稼働どうしてる?
事例 VMwareでデータセンターをクラウド化
アプリケーション仮想化 3つの課題
利用者の理想を追求した最新レンタルサーバ
DBのパフォーマンスに困ってませんか?
仮想化をダメにするストレージの実態
経営統合後の事業損益構造の見える化を実現
Xbox Live インディーズゲーム開発の軌跡
新しい視点のレンタルサーバが誕生!
仮想環境のバックアップは難しいのか
身近な業務をCRMが変革!
御社はまだフリーの転送サービスですか?
アンケートから見るセキュリティ対策の実態