Webページの全面に画像（パターン）をタイル表示

解決済

質問者：_julius
質問日時：2011/12/07 01:34
回答数：5件

こんばんは。ご覧頂きましてありがとうございます。

現在，Adobe Dreamweaver CS5.5（Mac OS 10.6.8）を使ってサイト作りにチャレンジしていますが，当方，HTML・CSS・JavaScript，あるいはDreamweaverは素人です。
自分なりに色々調べてみたつもりではあるのですが，よく解らなかったため，こちらで質問させて頂きました。

ウェブページ全体の「前面（一番前）」をある画像でタイリング（タイル状に並べる）したいと考えています。
具体的には，半透明のシームレステクスチャ（パターン）で画面全体（ブラウザのウインドウの大きさを問わずその全体）を覆いたいと考えています。

背景としてテクスチャをタイリングすると，ページに配置された個々の画像にテクスチャが反映されません（画像の「後」にテクスチャが来てしまうから）。
また，背景にタイリングしたうえで，元の画像にテクスチャをマスキングした画像を配置する方法では，背景と画像それぞれに適用されたテキスチャの境界が一致しないため，望ましくないと考えています。

調べた限りでは，↓のページが参考になるようでしたが，如何せん素人過ぎて全く意味が解りませんでした。
http://undefined.seesaa.net/article/70003537.html

どなたか，上記目的を達成できる方法についてご教授頂けましたら，幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.1

回答者： DrFell
回答日時：2011/12/07 06:44

ページに配置された個々の画像を透明にすればいいのでは？

透明をサポートしている画像形式でWebで使える画像を保存、つまり透過gifや透過pngで画像を保存されてはいかがでしょうか？

タイルにする画像は透過しないでくださいね。

- 0
- 件

通報する

この回答へのお礼

>ページに配置された個々の画像を透明にすればいいのでは？

それでは，表示したい画像の輪郭がぼやけてしまうので…
多分私の言語能力不足で意図が上手に伝わっていないのだと思います。
Photoshopなどで，完成画像に，紙やコンクリートなどの半透明のテクスチャを重ねて，独特の質感をもたせる技法があると思います。
これをウェブで実現したいのですが，そうしてテクスチャを乗せた状態の画像を表示させるだけでは（自分としては，画像をブラウザにフィットさせたくないので），ブラウザ全体にはテクスチャが反映されません。背景部分はただの単色等の背景となってしまいます。
せっかくご教授頂いたのに，申し訳ございません。

ご回答，誠にありがとうございました。

通報する

お礼日時：2011/12/07 10:48

No.2

回答者： taloo
回答日時：2011/12/07 07:45

よくわかりませんが、、、

html, body{width:100%;height:100%}
のスタイルを適用しておき、
AP DIVを挿入してプロパティに以下を指定で、どうでしょう？

左：0
上：0
幅：100%
高さ：100%
背景：タイリングしたい画像

HTML、CSSは以下のようになります。

<div id="apDiv1"></div>

#apDiv1{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
background-image: url(画像URL);
}

- 0
- 件

通報する

この回答へのお礼

>よくわかりませんが、、、

Photoshopなどで，完成画像に，紙やコンクリートなどの半透明のテクスチャを重ねて，独特の質感をもたせる技法があると思います。
これをウェブで実現したいのですが，そうしてテクスチャを乗せた状態の画像を表示させるだけでは（自分としては，画像をブラウザにフィットさせたくないので），ブラウザ全体にはテクスチャが反映されません。背景部分はただの単色等の背景となってしまいます。

ごめんなさい，本当にずぶの素人で，
>html, body{width:100%;height:100%}
>のスタイルを適用しておき、
の意味がよく解りません。すいません。

>AP DIVを挿入してプロパティに以下を指定で、どうでしょう？

とりあえず，ap Divを挿入して仰る通りの設定にしてみたのですが，
確かに，レイヤー化して画像の上に半透明のテクスチャを乗せることができたのですが，それでも，
(1) タイル化されず，特定の範囲にテクスチャが切り抜かれて表示されるだけになりますし，
(2) デザインビューでは表示されても，ブラウザで表示されません。

申し訳ありませんが，またお時間のありますときにご回答頂けますと，大変助かります。

ちなみに，私が記述したコードは以下の通りです。

<title>テスト</title>
<style type="text/css">
html,body{
width:100%;
height:100%
}
#apDiv1 {
position:absolute;
visibility:visible;
left:0px;
top:0px;
width:100%;
height:100%;
background-image:"テクスチャ.png";
layer-background-color:#EDEDED;
border:1px none #000000;
z-index:1;
}
</style>
</head>
<body>
<div id="apDiv1"></div>
<img src="メニュー画面用画像.jpg" width="800" height="684" />
</body>
</html>

通報する

お礼日時：2011/12/07 10:45

No.3

回答者： ORUKA1951
回答日時：2011/12/07 10:35

その場合、その画像の背後にあるすべてのリンクが無効になりますが？？？

本来は背景にして、その上に来る画像やテキストに半透明を指定するべきかと・・
CSS3ですから、古いブラウザには無効ですが、文書構造上も汎用性も考えるとそのほうがよいかと・・

- 0
- 件

通報する

この回答へのお礼

>その場合、その画像の背後にあるすべてのリンクが無効になりますが？？？

そうなんですか！！
それは#2の回答者様のご教授下さった方法でも同じなのでしょうか？

>本来は背景にして、その上に来る画像やテキストに半透明を指定するべきかと

Photoshopなどで，完成画像に，紙やコンクリートなどの半透明のテクスチャを重ねて，独特の質感をもたせる技法があると思います。
これをウェブで実現したいのですが，そうしてテクスチャを乗せた状態の画像を表示させるだけでは（自分としては，画像をブラウザにフィットさせたくないので），ブラウザ全体にはテクスチャが反映されません。背景部分はただの単色等の背景となってしまいます。
こういうことを実現したかったのですが，やはり無理なのでしょうか？

通報する

お礼日時：2011/12/07 10:51

No.4

回答者： ORUKA1951
回答日時：2011/12/09 08:36

はい。

　上に他の要素を重ねると、下のものは選択もリンクもできなくなります。
　また、もし半透明な画像を置いたとしても、それに対応していないブラウザでは下が完全に見えなくなってしまいます。
　HTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　ですから、そのためにHTMLを使ってウェブサイトを作っているのではないですか？
　デザインのために、もっとも優先しなければならないはずの「どんな環境からもWebの情報を利用できるようにすべき」を否定するなら、HTMLではなく画像やPDFを使うべきです。

　上のリンク先の前後をよく読んでください。

　なお、現状ではブラウザは限定されますが、CSS3のopacityプロパティを使えば、背景上の要素を半透明にすることが出来ますが、あまりお勧めは出来ません。特に視覚障害者の方の利用を考えれば、はっきり読みやすいデザインとすべきです。

- 0
- 件

通報する

この回答へのお礼

>上に他の要素を重ねると、下のものは選択もリンクもできなくなります。
>また、もし半透明な画像を置いたとしても、それに対応していないブラウザでは下が完全に見えなくなってしまいます。

なるほど，この点については構想を考え直す必要がありそうですね。
ご指摘，ありがとうございます。

>そのためにHTMLを使ってウェブサイトを作っているのではないですか？
>デザインのために、もっとも優先しなければならないはずの「どんな環境からもWebの情報を利用できるようにすべき」を否定する
>特に視覚障害者の方の利用を考えれば、はっきり読みやすいデザインとすべきです。

これは，どんな目的でサイトを作っているかをお伝えしていなかったからこそのご指摘ですね。

実は私は単なる趣味でサイトを作っているだけで，広く一般にアクセス・利用してもらうためのサイトを作ってはいないのです。
特に役立つ・必要な情報が載っているわけではないので，大勢の人から見てもらう必要は無く，友達とか，たまたま見つけた人が見られたらそれでよく，
見れなかったら見れなかったで別に困らないということなんです（極端な話，私が見れたらそれでいい）。
要するに「私は私のためにサイトやコンテンツを作っているのであって，見ている人のためではない」というのが，サイト自体の明確なコンセプトなんです。
ちょっと個人の思想が背景にあることなので，理解が得難いかもしれませんが…

まァとにかく，「ユーザの使用環境を限定しないように」とか「ユーザビリティを高く」といった要素は，原則として（極端な場合はともかく）排除するということだけ（その是非については置いといて）前提として頂ければということです。

じゃァ，誰に見せなくてもいいなら
>HTMLではなく画像やPDFを
使えばいいじゃんか，ということになるわけですが，逆に言えば，「趣味で作ってるんだからどんな表現手法を使おうが間違いではない」ということなんです。
別に作るだけ作ってサーバにアップしなくても何の問題も無いのですが，「ブラウザでURL打ったら自分の作った物が出てくるのって，何となく嬉しいよね」という単純な気持ちから，サイトを作っています。
要するに，趣味ですから，「ホームページを作ること自体が目的」であって，「目的のためにホームページを作っている」のでないということです。

ワガママで本当に申し訳ありませんが，ご指摘には大変感謝しております。
本当に，ありがとうございました。

通報する

お礼日時：2011/12/09 12:03

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2011/12/09 15:17

ご謙遜を・・・

　しかし、ウェブにあげる限りは、
よいウェブページを書こうとする人のためのヒント ( http://www.sal.tohoku.ac.jp/~gothit/webauthoring … )
　が根幹にあるのです。ほんのわずかな訪問者のためのものであろうと、あなた自身が気がついていない価値を見出す人もいるでしょう。

　半透明な画像をかぶせると何もない背景自体の模様も半透明になってしまいますから、他のコンテンツを半透明にして、opacityで重ねるのが良いでしょう。
<body>
　<div class="header">
　　ヘッダー部
　</div>
　<div class="section">
　　本文
　</div>
　<div class="footer">
　　フッタ
　</div>
</body>
というHTMLの場合・・
body{background-image:url();}
div.header,div.section,divfooter{opacity:0.5;}
でOKです。

- 0
- 件

通報する

この回答へのお礼

ORUKA1951様
ご丁寧に重ね重ねのご回答，本当にご親切にありがとうございます。

>ご謙遜を・・・
いえいえ，謙遜では。単なる趣味ですから。

>ほんのわずかな訪問者のためのものであろうと、あなた自身が気がついていない価値を見出す人もいるでしょう。

それは，その通りだと思います。でも，だからこその「誰にも何も伝えないサイト」というコンセプトなのです。
ご指摘のリンク先（後藤斉「よいウェブページを書こうとする人のためのヒント」〔http://www.sal.tohoku.ac.jp/~gothit/webauthoring …〕）にもあるとおり，「自分の書いた物が文化的背景や生活条件の異なる人によって自分の意図とは違って解釈される可能性がある」ものだと思います。
誰かの作り出したもの，技術や概念は，時として他者によって異なる意議をもって迎えられる。そして，創作者の権利を侵害しない限り，そのような解釈，それに基づく利用も，その解釈者の権利として許容されるべきものと思います。
WorldWideWebもまた，その設計者がどのような思想でそれを開発したものであれ，その利用が広く開かれている以上，どのようなコンセプトの下でそれが利用されたとしても許容されていなければなりません（もちろん，設計者初め万人の権利を害さない限り）。
上記リンク先上部にある，Tim Berners-Leeが「いったん公開されてしまったら、世の中にその情報のアドレスが出回ったことについて不満をいうことはできない」という通り，技術や表現ツールもまた，開かれた形で公開した以上，どのような利用のされ方がなされたとしても不満をいうことはできないというのが，論理的な回答でしょう。
つまり，彼のWebに対する考え方もまた，彼個人の思想に過ぎず，「Webの利用」という行為を統一的に貫く規範たり得ないというのが，「私個人の」考えです。
解釈の権利と解釈に基づく責任は受け手にあるのであって，発信者にはない。それが私のサイトのコンセプトです。

失礼しました。
私も大学で研究活動をする身として，「発信行為」の社会的意義について思うところをつらつらと述べてしまいました。
全く本筋と関係ないですね。長文失礼致しました。閑話休題。

>半透明な画像をかぶせると何もない背景自体の模様も半透明になってしまいますから、他のコンテンツを半透明にして、opacityで重ねるのが良いでしょう。

やはりコンテンツの方を半透明にするというのが皆さん共通するご意見のようですね。
しかしそれだとコンテンツのコントラストが損なわれてしまう（元画像をPhotoshopで加工しても完全に再現はできない）ので，避けたいのです。

皆さんのご意見を伺っていると，どうも思い描いていた方法はどうも実現可能性が低いようですので，別の方法を検討してみたいと思います。
重ね重ね，誠にありがとうございました。