素材のスタイルシートへの組み込み方法

グラデーション素材のスタイルシートへの組み込み方法は、背景画像へのリピート素材として使用する方法が一般的です。

スタイルシートへの追加方法

background-image: url(素材のURL);
background-repeat: repeat;

このrepeatの値を変化させることで、繰り返しの表示方法を変えることができます。

  • background-repeat: repeat; 縦と横方向に素材をリピートで表示
  • background-repeat: repeat-x; 横方向に背景素材をリピート
  • background-repeat: repeat-y; 縦方向への繰り返し表示
  • background-repeat: no-repeat; 一度だけの表示で繰り返さない。

グラデーション素材の場合、両端で色彩が違いますので、背景画像をリピートにするとまだらになってしまいます。

ですので、画像加工で反転させて両端を同じ色彩にするとか、一度だけ表示させてから、あとは同じような色彩を表示させるとかの方法がおすすめです。

cssで横方向へ背景素材をリピート

グラデーション素材をスタイルシートへ背景素材として組み込む方法として、縦方向と横方向があったりしますが、オレンジ色のグラデーションを例にこのホームページへ組み込んでみました。

方法としては、当ホームページのグラデーション素材を、「右クリック - 画像を保存」でダウンロードし、ウィンドウズ付属のペイントで小さめに加工し、90度回転させます。

すると、だいたいこんな感じになるかと思います。

グラデーション素材サンプル

次にスタイルシートの組み込みたい箇所へ次の文字列を入力します。

background-image: url(素材のURL);
background-repeat: repeat-x;

例えば、このホームページのスタイルシートの body の箇所に組み込んだ場合、こんな感じになります。

cssへの組み込み例

ちなみに、グラデーション素材自体は小さめのものでも大丈夫みたいですが、どのくらいの大きさが適当なのかとか、画像ファイルは jpg や bmp などどれが適しているのかとか、詳しいことはわかりません。

一般的に、bmp ファイルはあまりホームページ素材としてはよくないようなんで、jpg あたりがいいのではないかなって気もします。

IE8の背景画像の乱れ

グラデーション素材を背景画像として利用する際、ブラウザによって見え方の違いが生じてきてしまいます。

特に古いバージョン6あたりのインターネットエクスプローラーでは多少汚く表示されることがあったりです。

最新版のIE8では互換表示機能なども搭載され、多少改善されてはいるようなのですが、実際にサイトを表示してみるとこのブログの場合はこんな感じで多少表示が汚く表示されてしまう部分がどうしても出てくるようです。

IE8バグ

でも、ページを更新すると直ります。

IE8バグ修正

IE8バグという程ではないですが、更新ボタンを押すとなぜだか直るので、どうにも対処のしようがないんです。

私はいつもファイアーフォックスを使用していますので、ほとんど気にすることはないのですが、ブラウザの占有率からいうと、IEによるデザインの崩れや見え方の違いはやはり無視することができないものです。

どうしても気になる際は、リピートせずに単一の背景画像で設定すれば修正されるかと思いますので、再度画面をキャプチャーして大きめの画像で再設定するとかすればいいかと思います。

スタイルシートで縦方向のリピート素材は左右で違う

グラデーション素材をスタイルシートで縦方向へとリピートさせる場合、横方向へのリピートと比べて使い方が難しいようです。

横方向へのリピート:repeat-x;
縦方向へのリピート:repeat-y;

素材を縦方向へとリピートする場合、デフォルトでは一番左の列に縦方向へと一度だけリピートされるので、左側以外の中央や右側は素材が表示されません。

横方向の場合でも、一番上の列に横方向でリピートされるので、中央やフッターあたりには素材が表示されませんが、ホームページの場合、上下対称となっていなくても気にはなりませんが、左右対称でない場合は、多少アンバランスな感じがしてしまうものです。

そのようなわけで、あまりホームページで素材を縦方向でリピートさせるのは難しい気もしますが、当ブログでも左側はグラデーション素材なのですが、右側は似たような背景色を指定してのスタイルシートとなっています。

全面的にリピートさせてもよいのですが、いまいち出来栄えがよくなかったもので、似たような色彩でごまかした次第です。

そのような意味で、リピート素材を使用する場合、横方向へリピートさせる形で使用するか、もしくは、ホームページで全面的にリピートさせることをおすすめします。

縦横の全部の方向へとリピートさせる場合、素材によってはまだらになってしまったりする場合もありますので、左右反転させてくっつけるとかの工夫をしてみるとよいかと思います。

ホームページ素材の境界にはborderを

グラデーションなホームページ素材を作成したら、ホームページの背景画像へと組み込むことになるかと思いますが、その際、境界にはborderを設定しておくといいかと思います。

スタイルシートで設定していくわけですが、たいていは左側と右側に境界線を作成することになるかと思います。当ブログの場合はこのような感じでボーダー線を引いています。

スタイルシートへの設定方法ですが、境界を上、下、左、右のどれに設定するかと境界線のタイプ、幅、色彩をせっていします。グラデーション素材を背景画像に設定している箇所のひとつ内側の要素がいいかと思います。

通常、borderをスタイルシートに設定する際はこのような感じになります。

border-width: 1px; (線幅の値)
border-style: solid; (線の種類:実線、点線など。)
border-color: #000000; (線の色彩)

この場合だと、上下左右に境界線が1pxの幅で、黒い実線でひかれることになります。

左右だけに境界線を設定したいばあいはこのようになります。

border-right-width: 1px;
border-left-width: 1px;
border--rightstyle: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;

これをまとめて書くこともできるので、最終的にはこんな感じするといいかと思います。

border-right: 1px solid #000000;
border-left: 1px solid #000000;