背景に画像を入れるのもソフトで簡単にできます。PageMill3.0Jではサポートされていない、背景画像の固定からははじめて、 背景画像を左側だけに表示したり、ウィンドウ画面に連動させたり、表の中で表示させたりしてみましょう。
リンクの背景色を変えるのは、リンクを参照してください。ここではテキストの文字列の背景色を変えることを考えます。下のようにすると、このように丁度マーカーで色をつけたようになり、視覚的に強調されます。段落単位でも背景色を定義できます。色の指定は、RGB１０進数、１６進数、事前定義色、色の名前のどれでも構いません。PageMill などの入力画面で？になっていても心配要りません。ブラウザではちゃんと表示されます。
リンクで背景色を変えることも可能です。いくつかカラーバリエーションを用意しておいて、訪問者が選ぶようにすることもできますし、ちょっとしたイタズラを試みることもできます。やり過ぎてはいけませんが、軽いイタズラ程度なら、新鮮な驚きで迎えられるかもしれません。
背景を固定するには、<BODY> タグの中に BGPROPERTIES="fixed" と入れます。こうすると画像が固定されて、スクロールしてもそのままの位置に留まります。ただ残念ながら、このBACKGROUND属性はHTML4では推奨されていないためか、Netscape Navigator では無視されます。Navigator6 でも同様ですが、次の方法を使えば固定できます。スタイルを利用した背景画像の固定は、背景を表の中に入れるも参考にしてください。
サンプルのページの BODYタグは次のように設定しています。セルの背景画像の固定については、下の「背景を表の中に入れる」を、セルの背景画像の特殊な効果については、表の「セルの背景画像や色を変える」を参照してください。
サンプル
背景をウィンドウの左隅だけに配することもできます。花やツタなどを配するといいかもしれませんね？とりあえずサンプルをごらんください。banboo.jpg は竹の節１段の画像ですが、左側に縦一列に並んでヨシ簾のようになります。
下のSTYLEのタグは、<HEAD> から </HEAD> の間のHEAD セクションに入れます。repeat-y の y は、x軸y軸の縦のy軸を意味しています。だったら、repeat-x で横軸だけにも指定できるでしょうか？当然できます。
この背景をスクロールにつれて動くようにするには scroll、スクロールさせないためにはfixed と続けます。普通の場合と同じように BODY タグの中に BGPROPERTIES="fixed" と入れてもＯＫです。背景色は、16進数でも、silver などと事前定義色で指定しても構いません。
BODY { background: #d38b5b url(../images/bamboo.jpg) repeat-y fixed} </STYLE> |
序でですが、repeat-y right とすると右側にだけ縦に並びます。サンプルで確認してください。repeat-y center とすると、画面中央に縦一列に並びます。もし repeat-x bottom としたらどうなるんでしょう？そうです、ご覧のようにウィンドウの底に横一列に並びます。repeat-x top も repeat-x center も可能です。no-repeat と続けておけば１個だけ表示します。動かないしリンクしないという特性を活かして、凡例に使おうとか考えています。が、それは別のページでのこと、ちょっと変わったなサンプルをどうぞ。スタイルセクションは次のようになっています。利用次第で面白いものができそうですね？
BODY { background: #e3e1df url(../images/kouji.gif) fixed center no-repeat} </STYLE> |
背景画像を固定するで見た <BODY> タグに BACKGROUND="fixed" と入れる方法の他に、上のやり方で背景画像をスクロールさせないようにすることができます。嬉しいことに、この方法を使うと Netscape 6 でも背景画像を固定することができます。ただし私の手持ちのブラウザでは、Netscape Navigator4 でも可能かどうかは確認できません。PageMill では、HTMLをサポートするソフトのアイコンにファイルをドラッグ＆ドロップすることで確認できますから、もし Netscape Navigator4 などをお持ちでしたら、試してみてください。
BODY { background: #000000 url(../images/MarilynMonroe-l.jpg) no-repeat fixed} </STYLE> |
サンプル
背景をウィンドウのサイズに連動させることもできます。スタイルシートのレイヤー機能を使うもので、それには <BODY> の後に次のものを入れ、</BODY>の前に</DIV>を入れます。先にテキストなどを作っておいたものに、後から入れるほうがやりやすいですね？
ただしスクロールから独立して固定することができませんから、新しく開くページが大きくて、スクロースしなければならないような場合には不適切ですね？
背景の固定の例に使ったものの元にした MarilynMonroe.jpg を使うとサンプルのようになります。ウィンドウの大きさを変えて、どう反応するかご覧下さい。
<DIV STYLE="position:absolute; top:0; left:0; z-index:1"> ここに本文などを入れる </DIV> |
表の背景色や背景画像については、表の利用も参照してください。表の全体やセルごとの背景色を設定できるように、背景画像を入れることもできます。<BODY の中に BACKGROUND="MM-back.jpg" を入れたのと同じで、<TD> タグの中に BACKGROUND="thumb-image.jpg" などを入れればいいわけです。表の中にさらに表を作って、それぞれに異なった背景を入れることもできますね？そういう複雑な画面が効果を発揮するようなときには、使ったら面白いと思います。
もっと面白いのは、表の中に入れた背景画像が一枚だけ表示されて、タイルを敷き詰めたようにはならない方法です。セルを表わす <TD に続けて、次のように記述します。b3adad は背景色で、これは色の指定で扱うどれでも大丈夫です。サンプルをご覧下さい。
これは随分応用がききます。セルの中の位置を示す center を、right「右」、left「左」に、さらに top「上」、bottom「下」を加えることもできます。Netscape Navigator では middle と入れると背景を表示しませんから、Internet Explorer でも Netscape6 でもサポートするように、上下関係を何も指定しないものも数に入れます。そうすると都合９通りが可能です。やってみましょうか？ではサンプルをどうぞ。背景にする画像を選んで、文字列の色や配置とも組み合わせれば、面白いものができるかもしれませんね？
| SEO | [PR] ����!�����u���O �����z�[���y�[�W�J�� �������C�u���� | ||
