Background Images

このレッスンでは､ 背景画像について学びます｡ 背景色プロパティはすでにご存じでしょうが､ 背景画像プロパティは､ 無地であることを除けば､ 非常によく似ています｡ 背景となる画像ファイルを取り込むことができるのです｡ さて､ 講座のH TMLCのセクションでは､ ページのコンテンツに画像を追加することができるI MGM要素について学びました｡ しかし､ スタイル上の理由からページに画像を追加したい場合､ 画像はそれ自体がコンテンツではないので､ CSSAを使用してさまざまな要素に背景画像を適用することができます｡ さて､ この話は例題に飛びつくと､ もっと理解できると思います｡ では､ さっそく始めましょう｡ 以下はページ例です｡ そして､ ウェブサイトファイルがあるフォルダにある､ この全体的に白いコンテナ要素の上部に位置する背景画像を追加したいと想像してみましょう｡ imagesというフォルダがあり､ その中にcolor tileというファイルがあります｡ このファイルを拡大・縮小すると､ 緑の四角と黄色の四角しかないことがわかります｡ さて､ この画像を全体的に白いコンテナの背景として適用したい場合､ スタイルシートのコンテナ要素ルールを見つけるだけでよいのです｡ これです｡ そして､ 新しいプロパティの背景画像を追加します｡ これは､ ウェブブラウザに画像ファイルを指定する場所です｡ さて､ 私たちが書くcouldは､ 相対的なものである必要があります｡ CSSAファイルから｡ 例えば､ CSSAファイルはCSSAフォルダの中に入っているわけです｡ そこでまず､ CSSAフォルダの外に持っていくために､ フォルダドットドットスラッシュを上げる必要があります｡ そして､ imagesフォルダの中に入りたいと思います｡ だからイメージスラッシュ｡ そして､ ファイル名を入力するだけです｡ そして､ 保存して更新すると､ これがひどく見えることがわかります｡ デフォルトでは､ 背景画像は水平方向と垂直方向の両方で繰り返され､ 背景画像を適用した要素全体を埋め尽くそうとするタイル状になります｡ さて､ 先ほども言いましたが､ これはひどいですね｡ そこで､ ブラウザが画像を繰り返したり､ 並べたりするのを止めてみましょう｡ background repeatという新しいプロパティを追加し､ ハイフンなしという値を与えます｡ 繰り返してください｡ ずっといい｡ しかし､ 実際には､ 画像は垂直方向ではなく､ 水平方向にタイル状または繰り返し表示させたかったのです｡ そのため､ リピートなしを指定する代わりに､ リピートありを指定することができます｡ xを繰り返す｡ つまり､ これはX軸に沿って､ つまり水平方向に完璧に画像を並べることになります｡ また､ 画像を縦方向にのみタイル状に並べたい場合は､ リピートYが表示されます｡ しかし､ それは私たちの望むところではありません｡ そういうイメージでデザインしているわけではありません｡ だからxを繰り返す｡ このように､ 緑と黄色のブロックを交互に並べた横長の帯状の視覚効果を求めていたのですが､ repeat xプロパティを活用することで､ 非常に小さな画像でこの効果を作り出すことができました｡ 私のウェブサイトの訪問者は､ このグラフィックファイルを非常に素早くダウンロードすることができ､ その後､ 利用可能なスペースを埋めるために､ ウェブブラウザがそれを繰り返すという重労働をすることになります｡ 次に､ コンテナ要素にトップパディングを追加して､ 背景画像がトップ15ピクセルのパディングを占めているのを打ち消すことにしましょう｡ それでは､ 背景画像のプロパティの学習に戻りましょう｡ そこで､ この花の新しい画像をウェブサイトのヘッターエリアに追加することを想像してみましょう｡ まず､ ヘッダーをハイライトして､ 同じページにいる私たちが､ どの部分の背景色をグレーにしているのかを理解できるようにします｡ だから､ 現在グレイになっているスペースのことを指しているんです｡ 実際に､ 右に回っている全体のコンテナ要素コンテナの右側のパディングを削除してみましょう｡ これを削除して､ 左が右端と同じ高さになるようにしましょう｡ そこで､ このグレーの部分の背景として､ あの花の画像を追加することを想像してみましょう｡ そこで早速､ その花のファイルをimagesフォルダの中に移動してみます｡ そして､ CSSに飛び移りましょう｡ ここでは､ 背景を追加したいheader要素について説明します｡ そこで､ ページのどの部分を参照しているかを説明するためだけにあった背景色のプロパティを削除しました｡ そこで､ RL括弧で囲んだ背景画像を保存することにします｡ CSSAフォルダを出て､ imagesフォルダに入り､ ファイル名をfloured J pigにすると､ いくつか調整すべき点が見えてきます｡ 1つ目は､ 背景画像をレイアウトの右側と同じ高さに配置することです｡ だから､ この余分な空白はここにあってはならないのです｡ 背景画像ファイルはこの程度の幅しかなく､ デフォルトでは背景画像は適用される要素の左側に並べようとします｡ しかし､ ヘッダーの右側に整列させたいのです｡ CSSAにはbackground positionというプロパティがあり､ その位置をカスタマイズすることができます｡ このプロパティは､ 2つの値を受け付ける｡ 最初のコントロールは水平方向の位置､ 2番目の値は垂直方向の位置をコントロールするので､ 水平方向には画像を右側に揃えたい｡ 今度は縦方向が少し厄介です｡ そこで､ 写真や画像ファイルを紹介します｡ 画像の縦中央部分の表示に興味があるのですが｡ レイアウトを見てみると､ ヘッダーの高さがあまり高くないので､ 画像の一部しか入らないことがわかります｡ 今は､ 上も下もあまり気になりません｡ そこで､ 縦長の物件には､ センターというキーワードを入れることにします｡ そこで､ 保存して更新すると､ 背景画像は右側と縦方向に整列して配置されていることがわかります｡ 画像の縦中央がスイートスポットになっているのがわかります｡ 次に行う調整は､ 左側でこれを修正できるように､ 背景を繰り返したりタイル状にしないように指示することです｡ バックグランドリピートノーリピート 素晴らしい｡ ここで､ 適用する空間よりもずっと背の高い画像を選んだのは､ 頭の高さがどのくらいになるかわからないからです｡ そこで､ 例えばナビゲーションリンクのスペースを広く取るように調整したらどうでしょう｡ 例えば､ 10ピクセルの垂直パディングの代わりに25ピクセルの垂直パディングを使用すると､ 花の背景画像がより多く透けて見えるようになります｡ つまり､ ここで重要なのは､ レイアウトが崩れたり､ 見栄えが悪くなったりしないようにすることです｡ ウェブデザインでは､ 一般的に縦に伸びるものは､ コンテンツの高さを細かく管理したくはないものです｡ フォントサイズとパディングとマージンによって､ 呼吸させ､ 独自の高さを決定したいのです｡ そして､ 必要な領域よりも少し背の高い画像を提供することで､ レイアウトが崩れないようにすることができます｡ それでは早速､ これらのリンクを修正して､ とんでもない量の垂直パディングを持たないようにしましょう｡ そして､ 背景画像の背景色トリプルエフの白に負けないように､ 背景も白にしてあげましょう｡ これまでに､ 3つの新しいプロパティが判明しています｡ 背景画像の背景リピートと背景位置｡ さて､ 今回は背景サイズについて紹介したいと思います｡ 例えば､ このページの少し下にある「birds are great」というエリアは､ 外枠の背景がベージュかライトブラウンになっていますね｡ 例えば､ この鳥の写真を追加して､ ベージュの背景色を置き換えることを想像してみましょう｡ 明らかにこの写真は大きすぎる｡ そのベージュの箱にぴったり収まる実寸がこちら｡ しかし､ 背景サイズプロパティはその窮地を救ってくれる｡ では､ まず､ その鳥の画像をimagesフォルダに追加してみましょう｡ J豚は鳥になれよ そして､ このベージュの外箱にinner Hを加えてみましょう｡ T. で､ それがbirdというクラスを持つdivに過ぎないことがおわかりいただけたと思います｡ 以下は､ CSSのルールです｡ ここで､ ベージュ色の背景色を取得していることがわかります｡ そこで､ 新しいルールというか､ 失礼ながら新しい装飾の背景画像を作ってみます｡ 練習すれば完璧になるので､ 画像構文がCSSAファイルのあるフォルダから飛び出して､ imagesフォルダに飛び込む練習をしています｡ ファイル名はbird J pigです｡ リフレッシュすると､ 鳥の頭があるのがわかります｡ つまり､ 明らかに画像のサイズが合っていないのです｡ せめて画像の位置だけでも工夫しよう｡ そのため､ 背景の位置は､ 水平方向は画像の中央に､ 垂直方向は画像の中央に配置されることになります｡ そのため､ 少なくとも画像の中心は見えるようになりましたが､ まだ大きすぎるのです｡ そこで､ 背景サイズのプロパティが活躍するわけです｡ 幅と高さの値を指定するオプションがあります｡ つまり､ 画像は幅200ピクセル､ 高さ120ピクセルであるべきだと言えるでしょう｡ この場合､ 背景画像が繰り返されないようにする必要があります｡ 幅200ピクセル､ 高さ120ピクセルというのは､ 明らかに正しい寸法ではありません｡ 画像は使用可能なスペースをすべて使用するようにします｡ これで､ 完璧なピクセル値を探すのに苦労することなく､ レースとカバーのキーワードを使うだけで､ ウェブブラウザがすべての作業を代行してくれるようになりました｡ 背景画像が適用されている要素をカバーまたはフィルするために､ 自動的に背景画像のサイズを変更します｡ 今はまだそれほど大きな機能ではないように見えるかもしれませんが､ このコースの後半で柔軟なレイアウトやレスポンシブWebデザインを扱うようになると､ 背景画像のサイズを自動的に変更する機能が救世主となることを学ぶことができると思います｡ さて､ このレッスンの次のトピックに移る前に､ コードをよりクリーンにする方法を確認したいと思います｡ したがって､ 背景のサイズを除いて､ 他のすべての背景のプロパティを1行のコードにまとめることができます｡ そこで､ これらの行を整理して､ backgroundと書かれた新しい行を作り､ この1行のコードにすべての値を入力することにしましょう｡ まず最初に､ ベージュ色の背景色のフォールバックを提供します｡ 次に､ ブラウザで画像ファイルの場所を指定して､ CSSAフォルダにポップアップ表示させ､ 画像フォルダにジャンプさせます｡ ファイル名はBerdahl bigです｡ 次に､ 画像を配置する方法を指定します｡ ここではcenter centerを使用しました｡ そこで､ 保存と更新を繰り返しても､ 文字通り何も変わらないということにしておきます｡ これは､ 複数のプロパティを1行にまとめて指定する､ より効率的な方法であり､ CSSAショートハンドと呼ばれる｡ この構文に慣れてくれば､ この構文も理解できるようになるでしょう｡ しかし､ まだ始めたばかりで､ 背景画像や省略記法の基本に慣れていないうちは､ プロパティの各値を独立した行で使用したい場合でも､ 全く問題はありません｡ このレッスンを終える前に､ 最後の事前トピックを取り上げたいと思います｡ それは､ 1つの要素に複数の画像を追加することです｡ 例えば､ このレッスンの最初の作業は､ コンテナ要素の上部に緑と黄色のストライプを追加することでした｡ さらに､ コンテナ要素の最下部に緑と黄色のストライプを追加したいとしたらどうでしょう｡ C Ssに飛び込んで､ コンテナエレメントの部屋を探してみましょう｡ これです｡ まず､ これらの行を速記法で1行に縮めることから始めます｡ そこで､ background と言って､ フォールバックカラーを白にし､ ブラウザは画像ファイル images color tile dot TNG を指すようにします｡ 左上隅に整列させたいのです｡ そして､ X軸で繰り返したかったのです｡ ここで目指すのは､ これらのプロパティをそのままにして､ 上部の背景を固定させることです｡ しかし､ 緑と黄色のタイルも一番下に来るようにコードを追加したいのです｡ ここで､ カンマを使うことで､ 1つの背景プロパティに複数の背景を追加することができます｡ カーソルがある場所に別の背景を作成し､ 元の背景の上に重ねて､ ブラウザでカラータイルを指定するか､ 左下隅に配置します｡ もう一度､ X軸に沿って繰り返します｡ 更新すると､ 要素の下部に背景が表示され､ 要素の上部にも背景が表示されていることがわかります｡ 1つの要素に複数の背景画像を追加できる機能は､ 非常に強力です｡ レイヤーの後にカンマを入れるだけで､ いくつでもレイヤーを作成することができます｡ つまり､ 最後に入れたレイヤーは､ 前のレイヤーと重なってしまうのです｡ また､ 背景画像を使用する場合は必ず背景色を指定し､ 画像ファイルの読み込みに失敗した場合でも､ 少なくとも訪問者には正しい色が表示されるようにします｡ さて､ 1つの要素に複数の背景画像を含める場合､ 最終または最後のレイヤーに背景色を含めることを確認し､ このレッスンを終了します｡ かなりの分量をカバーしました｡ では､ ここで簡単におさらいしておきましょう｡ 次のような新しい性質を知りました｡ 背景画像背景ローピー背景位置背景サイズ､ また､ 1つの要素に複数の背景画像を追加する方法を学びました｡ ぜひ､ お手持ちの画像を使って､ これらの新しいプロパティを試して､ 美しいデザインを作り上げてください｡ 次のレッスンでお会いしましょう