CSS3の基本 - レベルアップCSS

画像ボーダー

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボーダーに画像を使用するには、border-imageプロパティや、その関連プロパティを使います。ここでは、border-imageプロパティと、その関連プロパティの使い方について紹介します。
講師:
09:47

字幕

ボーダーに画像を使用するときは border-image プロパティやその関連プロパティを使います。このレッスンでは border-image プロパティとその関連プロパティの使い方について紹介します。プロパティの数が多いため実際に CSS を書きながらチェックしてみましょう。ウェブブラウザを見るとページの上部にグレーの背景色と非常に薄いグレーの文字色が適用された領域があります。HTML を見るとここは header 要素としてマークアップされておりCSS も先ほどお伝えしたような形でスタイルが定義されています。ボーダーに画像を使うにはあらかじめ画像を用意しておく必要があります。しかしこの形式が少し特殊ですので注意しておきましょう。ここではあらかじめサンプルファイルをダウンロードしてborder.png を使うという前提で進めます。サンプルファイルの border.png を開きます。border.png は 90 × 90 の透過 png になっておりそれぞれ四隅赤い斜めの線、っそして上下左右に紫の斜めの線、真ん中に星マークが入っています。ボーダーに画像を使うときには正方形・長方形といった形にかかわらず9つの領域に分けられます。 まず四隅、そして上辺右辺下辺左辺そして真ん中の領域です。このそれぞれのエリアに対してボーダーとして使いたい画像の内容を作っておきます。なおそれぞれの辺の端からどのくらいの幅を画像として使うかについては後程 CSS で指定することができますので画像を作るときには特に意識する必要はありません。ただし四辺で同じように画像を適用させたい場合は必ず四辺からの幅を同じピクセルで制作しておいた方がよいでしょう。それでは index.html に戻ります。実際に画像をボーダーに適用してみましょう。画像をボーダーに適用するには border-image-source プロパティを使います。border-image-source プロパティではノンキーワードまたは URL で画像を参照することができます。ノンキーワードは画像を使わないという指定です。ここでは URL 関数を使って先ほどダウンロードしておいた border.pngという画像ファイルを使いましょう。border.png を使います。これでボーダーに画像の指定ができました。ただし現在はどの程度の幅を使うかボーダーの幅自体をどれくらいの幅にするかなどの指定がされていませんのでウェブブラウザ側ではまだ明確は表示が反映されていない状態です。 続いて先ほどの画像をどの程度の幅で使うかという分割位置を指定しましょう。分割位置を指定するには border-image-sliceプロパティをを使います。このプロパティを使うと画像のそれぞれの辺からどのくらいの幅をボーダーとして適用するかという設定をすることができます。ここでは各辺を 30px として指定したいため30 と指定します。ここで注意したいのは border-image-sliceプロパティで指定する幅は単位を付けないということです。そのためここは 30 と書いてそのまま ; を入力します。これで画像の四辺からどのくらいの幅を利用するかという設定ができました。続いてボーダー自体の幅を設定しましょう。ボーダー自体の幅を設定するにはborder-image-width プロパティを使います。通常のボーダーの幅はborder-width プロパティですが画像のボーダーの幅を指定するにはborder-image-width プロパティを使いますので注意してください。ここでは先ほど指定した 30px そのまま使いたいので 30px を指定します。border-image-slice プロパティと違ってborder-image-width プロパティでは単位が必要ですので注意してください。 ここでウェブブラウザを見るとそれぞれの辺に対して 30px の幅が指定されたためborder-image-source と border-image-sliceプロパティで指定された画像と幅でボーダーが設定されました。次にこのボーダーして表示されている画像がどの表示位置に出るかということを指定するプロパティを説明します。表示位置を制御するにはborder-image-outset プロパティを使います。例えばこの border-image-outset プロパティに 10px を指定してみましょう。すると元々の位置よりボーダーの画像が外側に移動したことが分かります。このように実際のボーダーの位置とそのボーダーに適用される画像の位置をずらすことができるのです。ここでは特にずらす必要がないので一旦0 にしておきましょう。最後にボーダーに適用した画像の繰り返し方を指定するプロパティです。繰り返し方は border-image-repeatプロパティを使います。デフォルト値は stretch というキーワードが設定されています。stretch では画像が伸縮し領域を埋めるという指定になります。そのため元々の border.png ではこのように正方形の部分の紫の斜めの線が実際にボーダーとして適用されたときには細長く横に伸びてしまっています。 これでは表示上あまり美しくありませんので画像を敷き詰めるように変更してみましょう。ここでは stretch の値を一旦削除しrepeat というキーワードを指定します。ウェブブラウザを見ると先ほどは画像が伸縮し領域が埋められていたのに比べてrepeat を指定すると画像が繰り返し敷き詰められ領域を埋めていることが分かります。このように border-image-repeat プロパティではボーダーに使われる画像の敷き詰め方を指定します。他にもキーワードとしては round というキーワードやspace というキーワードがありますのでいろいろ試してみるといいでしょう。ここでは repeat を指定しておきます。このように一連のボーダーに画像を指定するためのプロパティはショートハンドプロパティでまとめることもできます。一旦これまでに指定したボーダー関連のプロパティをコメントアウトしましょう。これと同様の指定を border-image プロパティを使って一括で指定してみます。border-image プロパティを使って指定します。1つ目の値は border-image-sourceプロパティです。 画像は border.png を使います。そして次に border-image-slice を指定します。どれくらいの幅で利用するか、ここでは 30 を指定します。そして / で区切り border-image-widthプロパティを指定します。30px ですね。そしてもう一度 / で区切りborder-image-outset どのくらい表示位置をずらすか、ここでは 0 です。そして半角スペースで区切り最後にborder-image-repeat です。このように指定することで border-imageプロパティを使って一括で画像をボーダーに適用することができます。なお border-image-slice プロパティでは画像の中心部を使うかどうかという指定も合わせて行います。border.png をもう一度開いてみましょう。この画像の真ん中部分には星のマークが描かれています。しかしボーダーを使うエリアからは外れていますので実際に現在ウェブブラウザにはレンダリングされていません。この真ん中の部分も使うことができるのです。index.html に戻ります。この指定を行うには border-image-sliceプロパティの数値の指定の後に半角スペースを開けてfill キーワードを指定します。 border-image プロパティでいうとこの 30と書かれた後に指定します。ウェブブラウザを見ると先ほど画像の真ん中にあった星のマークがリピートで表示されています。この真ん中の部分についてもborder-image-repeat プロパティの影響を受けますので例えばここで値が stretch であれば真ん中の部分も stretch で表示されます。このようにさまざまなプロパティを使ってボーダーに画像を指定することができます。このレッスンではボーダーに画像を使用するときに使うborder-image プロパティやその関連プロパティの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。