ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。CSS実践編CSS実践編:CSSでのレイアウトstep4前回は、border・height・overflowにつきまして記載いたしました。どの内容も理解してしまえば、何ら難しいことは無いことだと思います。記載方法のみ、どういった記載方法があるのかを理解していれば良いと思います。実際にコーディングをおこなう際は、デザインに沿ってCSSを記載するわけですが、ウェブ上には、色々なサンプルコードが表記されていますので、そちらを参考にしながら、記載していくのも一つの方法といえます。・background-repeat上記について、記載していきます...。CSSでの背景の設定ページ全体の背景だけでなく、個々のHTML要素にも適用できるbackgroundプロパティ。画像を指定する場合、横軸(x軸)、縦軸(y軸)のpxや%で指定をおこなったりします。画像自体の繰り返しの指定をうまく利用することで、表示速度や、デザインの幅を広げることが出来ます。CSS3では、backgroundプロパティの指定方法が大幅に増え、CSS2.1よりもはるかに便利になっています...。コチラでは基本という事でCSS2.1を記載していきます。CSS3でのbackgroundプロパティは、別記事、CSS3に記載しようと思っております。backgroundプロパティbackgroundは背景関連の設定を一度に指定するプロパティになります。background-attachment、background-color、background-image、background-position、background-repeatの各プロパティの値を半角スペースで区切って指定します。最低限ひとつ指定すれば、ほかの値は省力可能になります。top;}背景画像の指定方法backgroundプロパティを指定することで、ページ全体の背景画像を変更したり、各要素単位で背景色やアイコンなどを適用させることが出来ます。画像を指定する場合はurl()を使用します。url(MK-back.jpg);}background-repeatには、背景画像の繰り返し方法を指定します。何も指定しなければ、縦横(x,y)の両方向に繰り返されるrepeatとなります。ひとつだけ表示で繰り返さないbackground-positionには、背景画像の位置を指定します。何も指定しなければ、左上端の表示になります。15%background-attachmentには、背景画像のスクロール方法を指定します。何も指定しなければ、文章のスクロールと一緒にスクロールする(scroll)になります。背景画像を固定し、スクロールさせないbackground-repeat繰り返しを指定するbackground-repeatプロパティは、繰り返す方向を縦または横のみに制限することが出来ます。使われるテクニックとして、縦長、もしくは横長の画像を用い、それを一方向に繰り返し表示する方法がつかわれます。グラデーションやテクスチャパターンなど、使い方次第で、さまざまなデザイン方法が可能です。CodePen.今回記載いたしましたCSSでの背景の設定方法...。サイト制作の現場でも、たびたび使用するテクニックが盛り沢山ですね。重要ポイントは、今回はあえてすべて!!と申しますのは、実は今回はCSS2.1での指定方法を記載いたしましたが、CSS3では、さらに便利で、表現の幅が広い背景画像の設定方法がございます。今回記載いたしました2.1の記載方法をしっかりと理解していないと、CSS3では、ここから指定方法が複雑になってきます。実際に色々試しながら、じっくりと自分のスキルへと定着させることが、サイト制作には欠かせない要素になってきます...。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。