背景と枠線

This translation is incomplete. この記事の翻訳にご協力ください

このレッスンでは、CSS の背景と境界線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや画像による背景や、角丸と境界線といったものを施していくなかで、CSS のスタイリングに関する多くの疑問を解消していきます。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本(HTML 入門)および CSS に関するアイデア(CSS の第一歩)に関する基本的な知識を得ている。
目的: ボックスの背景と枠線をスタイルする方法を学ぶ。

CSS による背景の設定

CSSの background プロパティは、このレッスンで説明する多くのバックグラウンドロングハンドプロパティのショートハンドです。スタイルシートで複雑な背景プロパティを発見した場合、一度に多くの値を渡すことができるため、理解するのが少し難しいように思えるかもしれません

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

チュートリアルの後半でショートハンドの仕組みに戻りますが、最初に、個々のbackgroundプロパティを見て、CSSの背景でできることを見てみましょう。

背景色

 background-color プロパティは、CSSの要素の背景色を定義します。このプロパティは、有効な<color>を受け入れます。background-colorは、要素のcontent と padding boxの下に広がります。

次の例では、さまざまな色の値を使用して、ボックス、見出し、および <span> 要素に background colorを追加しています。

利用可能な <color> を使用して、これらを試してみてください。

背景画像

 background-image プロパティにより、要素の背景に画像を表示できます。次の例では、2つのボックスがあります。1つはボックスより大きい背景画像を持ち、もう1つは星の小さな画像を持っています。 この例は、背景画像に関する2つのことを示しています。デフォルトでは、大きな画像はボックスに収まるように縮小されていないため、小さな角のみが表示されますが、小さな画像はボックスを埋めるために並べられます。この場合、実際の画像はただの星です。

背景画像に加えて背景色を指定すると、背景色の上に背景画像が表示されます。上記の例にbackground-colorプロパティを追加して、動作を確認してください。

背景画像の繰り返し方法の指定

 background-repeat プロパティは、画像の埋める動作を制御するために使用されます。使用可能な値は次のとおりです:

  • no-repeat — バックグラウンドが繰り返されるのを完全に防ぎます。
  • repeat-x — 水平方向に繰り返します。
  • repeat-y — 垂直方向に繰り返します。
  • repeat — デフォルト; 両方の方向に繰り返します

以下の例でこれらの値を試してください。値をno-repeatに設定したため、星が1つだけ表示されます。異なる値(repeat-xとrepeat-y)を試して、その効果を確認してください。

背景画像のサイズ指定

上記の例では、背景の要素よりも大きいためにトリミングされた大きな画像があります。この場合、 background-size プロパティを使用して、length または percentage の値を取得し、背景内に収まるように画像のサイズを調整できます。

キーワードを使用することもできます:

  • cover —ブラウザは、アスペクト比を維持しながら、ボックス領域を完全に覆うように画像を大きくします。この場合、画像の一部が箱の外に出る可能性があります。
  • contain —ブラウザは画像をボックス内に収まる適切なサイズにします。この場合、画像の縦横比がボックスの縦横比と異なる場合、画像の左右または上下にギャップが生じる可能性があります。

下の例では、上の例の大きな画像を使用し、lengthの単位を使用してボックス内のサイズを変更しました。これにより、画像が歪んでいることがわかります。

以下を試してください。

  • 背景のサイズを変更するために使用されるlengthの単位を変更します。
  • lengthの単位を削除し、background-size:coverまたはbackground-size:containsを使用するとどうなるかを確認します。
  • 画像がボックスより小さい場合は、background-repeatの値を変更して画像を繰り返すことができます。

背景画像の位置の指定

 background-position プロパティを使用すると、適用されるボックスに背景画像を表示する位置を選択できます。これは、ボックスの左上隅が(0,0)であり、ボックスが水平(x)および垂直(y)軸に沿って配置される座標系を使用します。

: デフォルトのbackground-positionの値は(0,0)です。

最も一般的なbackground-positionの値は、2つの個別の値を取ります—水平の値の後に垂直の値が続きます。

toprightなどのキーワードを使用できます ( background-image ページで他を検索します):

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top center; 
} 

そして、 Lengths,、およびpercentages::

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: 20px 10%; 
} 

また、次のように、キーワードの値をlengthsまたは割合と混在させることもできます。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

最後に、4値構文を使用して、ボックスの特定の端からの距離を示すこともできます。この場合の長さの単位は、それより前の値からのオフセットです。下のCSSでは、背景を上から20px、右から10pxに配置しています。

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top 20px right 10px; 
} 

以下の例を使用してこれらの値を操作し、ボックス内で星を動かしてください。

: background-position は background-position-x および background-position-y のショートハンドで、異なる軸位置の値を個別に設定できます。

グラデーション背景

グラデーションは、背景に使用される場合、画像のように機能し、   background-image プロパティを使用して設定されます。

<gradient>データ型のMDNページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。グラデーションで遊ぶ楽しい方法は、このようなWebで利用可能な多くのCSSグラデーションジェネレーターの1つを使用することです。グラデーションを作成してから、グラデーションを生成するソースコードをコピーして貼り付けることができます。

以下の例でいくつかの異なる勾配を試してください。 2つのボックスにはそれぞれ、ボックス全体に広がる線形グラデーションと、設定されたサイズの放射状グラデーションがあり、それが繰り返されます。

複数の背景画像

複数の背景画像を使用することもできます。単一のプロパティ値で複数のbackground-imageを指定し、それぞれをコンマで区切ります。

これを行うと、背景画像が互いに重なり合ってしまう可能性があります。背景は、スタックの一番下に最後にリストされた背景画像を重ね、コード内で前の画像がそれに続く画像の上に重ねられます。

: Gradients can be happily mixed with regular background images.

他のbackground- *プロパティも、background-imageと同じ方法でコンマ区切りの値を持つことができます:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

異なるプロパティの各値は、他のプロパティの同じ位置の値まで一致します。たとえば、上記では、image1background-repeat値はno-repeatになります。ただし、プロパティごとに値の数が異なるとどうなりますか?答えは、少数の値が循環するということです。上記の例では、4つの背景画像がありますが、2つの background-position の値しかありません。最初の2つの位置の値は最初の2つの画像に適用され、再び循環します。image3には最初の位置の値が、image4には2番目の位置の値が与えられます。

遊んでみましょう。以下の例では、2つの画像を含めています。スタックの順序を示すために、リストの最初の背景画像を切り替えてみてください。または、他のプロパティを操作して、位置、サイズを変更するか、値を繰り返します。

背景画像とスクロール

背景に使用できる別のオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, background-attachment プロパティを使用して制御され、次の値を取ることができます:

  • scroll: ページがスクロールされるときに要素の背景をスクロールさせます。要素のコンテンツがスクロールされた場合、背景は移動しません。実際には、背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。
  • fixed: 要素の背景をビューポートに固定し、ページまたは要素のコンテンツがスクロールされてもスクロールしないようにします。画面上の常に同じ位置に残ります。
  • local: この値は後から追加されました(Internet Explorer 9以降でのみサポートされていますが、他はIE4以降でサポートされています)。スクロール値はかなり混乱しやすく、多くの場合、実際に必要なことを実行しないためです。ローカル値は、設定されている要素の背景を固定するため、要素をスクロールすると、背景も一緒にスクロールします

 background-attachment プロパティはスクロールするコンテンツがある場合にのみ効果があるため、3つの値の違いを示すデモを作成しました。background-attachment.htmlをご覧ください(こちらのソースコードもご覧ください)。

背景に関する指定をまとめておこなう

このレッスンの冒頭で述べたように、 background プロパティを使用して指定された背景がよく表示されます。このショートハンドを使用すると、さまざまなプロパティをすべて一度に設定できます。

複数の背景を使用する場合は、最初のbackgroundのすべてのプロパティを指定してから、カンマの後に次の背景を追加する必要があります。以下の例では、サイズと位置のグラデーションがあり、画像の背景はno-repeat、positionがあり、colorがあります。

background imageのショートハンドを書くときに従うべきいくつかのルールがあります。例えば:

  •  background-color は最後のコンマの後にのみ指定できます。
  • background-sizeの値は、center / 80%のように、「/」文字で区切られたbackground-positionの直後にのみ含めることができます。

すべての考慮事項を確認するには、 background のMDNページをご覧ください。

背景に関するアクセシビリティ

背景画像または背景色の上にテキストを配置するときは、訪問者がテキストを読みやすくするために十分なコントラストがあることに注意する必要があります。画像を指定し、その画像の上にテキストを配置する場合は、画像が読み込まれない場合にテキストを読みやすくする背景色も指定する必要があります。

スクリーンリーダーは背景画像を解析できないため、純粋に装飾する必要があります。重要なコンテンツはすべてHTMLページの一部であり、背景には含まれません。

枠線

ボックスモデルについて学習するとき、境界線がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、ボーダーを創造的に使用する方法を見ていきます。通常、CSSを使用して要素にborderを追加するときは、CSSの1行でborderのcolor、width、スタイルを設定するショートハンドプロパティを使用します。

 border:を使用して、ボックスの4辺すべてにborderを設定できます。

.box { 
  border: 1px solid black; 
} 

または、次のように、ボックスの1つの辺をターゲットにすることができます。:

.box { 
  border-top: 1px solid black; 
} 

これらのショートハンドの個々のプロパティは次のとおりです:

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

ロングハンドの場合:

.box { 
  border-top-width: 1px; 
  border-top-style: solid; 
  border-top-color: black; 
} 

: これらの上、右、下、および左のborderプロパティには、ドキュメントの書き込みモードに関連するlogicalプロパティもマップされています(たとえば、左から右または右から左のテキスト、または上から下)。次のレッスンでは、さまざまなテキストの方向の処理について説明します。

borderに使用できるさまざまなスタイルがあります。以下の例では、ボックスの4辺に異なるborderスタイルを使用しています。borderのcolor、width、スタイルを試して、borderの動作を確認します。

角丸

ボックスの角を丸くするには、border-radiusプロパティと、ボックスの各角に関連するロングハンドを使用します。 2つのlengthsまたはパーセンテージを値として使用できます。最初の値は水平方向の半径を定義し、2番目の値は垂直方向の半径を定義します。多くの場合、1つの値のみを渡し、両方に使用します。

例えば、ボックスの4つの角すべてに10pxのradiusを持たせるには:

.box { 
  border-radius: 10px; 
} 

または、右上隅の水平半径を1em、垂直半径を10%にするには:

.box { 
  border-top-right-radius: 1em 10%; 
} 

以下の例では4つの角すべてを設定し、右上の値を変更して変更しました。値をいじってコーナーを変更できます。 border-radius のプロパティページを見て、使用可能な構文オプションを確認してください。

背景と枠線を試す

新しい知識をテストするには、次の例を出発点として、背景と境界線を使用して次のものを作成してみてください:

  1. ボックスに、10pxの角の丸い5pxの黒い実線の境界線を付けます。
  2. 背景画像を追加し(URL balloons.jpgを使用)、ボックスを覆うようにサイズを変更します。
  3. <h2>に半透明の黒い背景色を指定し、テキストを白にします。

: ここで解決策を確認できますが、最初に自分で解決してみてください!

まとめ

ここではかなり多くのことを説明しましたが、背景や境界線をボックスに追加することは非常にたくさんあることがわかります。これまでに説明した機能について詳しく知りたい場合は、さまざまなプロパティページをご覧ください。 MDNの各ページには、知識を活用したり強化したりするための使用例がさらにあります。

次のレッスンでは、ドキュメントのライティングモードがCSSとどのように相互作用するかを説明します。テキストが左から右に流れない場合はどうなりますか?

このモジュール

  1. カスケードと継承
  2. CSS セレクター
  3. ボックスモデル
  4. 背景と枠線
  5. テキスト方向の操作
  6. 要素のはみ出し(オーバーフロー)
  7. CSS の値と単位
  8. CSS によるサイズ設定
  9. 画像・メディア・フォーム要素
  10. 表のスタイリング
  11. CSS のデバッグ
  12. CSS の整理