こんばんは。ご覧頂きましてありがとうございます。
現在,Adobe Dreamweaver CS5.5(Mac OS 10.6.8)を使ってサイト作りにチャレンジしていますが,当方,HTML・CSS・JavaScript,あるいはDreamweaverは素人です。
自分なりに色々調べてみたつもりではあるのですが,よく解らなかったため,こちらで質問させて頂きました。
ウェブページ全体の「前面(一番前)」をある画像でタイリング(タイル状に並べる)したいと考えています。
具体的には,半透明のシームレステクスチャ(パターン)で画面全体(ブラウザのウインドウの大きさを問わずその全体)を覆いたいと考えています。
背景としてテクスチャをタイリングすると,ページに配置された個々の画像にテクスチャが反映されません(画像の「後」にテクスチャが来てしまうから)。
また,背景にタイリングしたうえで,元の画像にテクスチャをマスキングした画像を配置する方法では,背景と画像それぞれに適用されたテキスチャの境界が一致しないため,望ましくないと考えています。
調べた限りでは,↓のページが参考になるようでしたが,如何せん素人過ぎて全く意味が解りませんでした。
http://undefined.seesaa.net/article/70003537.html
どなたか,上記目的を達成できる方法についてご教授頂けましたら,幸いです。
No.5ベストアンサー
- 回答日時:
ご謙遜を・・・
しかし、ウェブにあげる限りは、
よいウェブページを書こうとする人のためのヒント ( 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です。
ORUKA1951様
ご丁寧に重ね重ねのご回答,本当にご親切にありがとうございます。
>ご謙遜を・・・
いえいえ,謙遜では。単なる趣味ですから。
>ほんのわずかな訪問者のためのものであろうと、あなた自身が気がついていない価値を見出す人もいるでしょう。
それは,その通りだと思います。でも,だからこその「誰にも何も伝えないサイト」というコンセプトなのです。
ご指摘のリンク先(後藤斉「よいウェブページを書こうとする人のためのヒント」〔http://www.sal.tohoku.ac.jp/~gothit/webauthoring …〕)にもあるとおり,「自分の書いた物が文化的背景や生活条件の異なる人によって自分の意図とは違って解釈される可能性がある」ものだと思います。
誰かの作り出したもの,技術や概念は,時として他者によって異なる意議をもって迎えられる。そして,創作者の権利を侵害しない限り,そのような解釈,それに基づく利用も,その解釈者の権利として許容されるべきものと思います。
WorldWideWebもまた,その設計者がどのような思想でそれを開発したものであれ,その利用が広く開かれている以上,どのようなコンセプトの下でそれが利用されたとしても許容されていなければなりません(もちろん,設計者初め万人の権利を害さない限り)。
上記リンク先上部にある,Tim Berners-Leeが「いったん公開されてしまったら、世の中にその情報のアドレスが出回ったことについて不満をいうことはできない」という通り,技術や表現ツールもまた,開かれた形で公開した以上,どのような利用のされ方がなされたとしても不満をいうことはできないというのが,論理的な回答でしょう。
つまり,彼のWebに対する考え方もまた,彼個人の思想に過ぎず,「Webの利用」という行為を統一的に貫く規範たり得ないというのが,「私個人の」考えです。
解釈の権利と解釈に基づく責任は受け手にあるのであって,発信者にはない。それが私のサイトのコンセプトです。
失礼しました。
私も大学で研究活動をする身として,「発信行為」の社会的意義について思うところをつらつらと述べてしまいました。
全く本筋と関係ないですね。長文失礼致しました。閑話休題。
>半透明な画像をかぶせると何もない背景自体の模様も半透明になってしまいますから、他のコンテンツを半透明にして、opacityで重ねるのが良いでしょう。
やはりコンテンツの方を半透明にするというのが皆さん共通するご意見のようですね。
しかしそれだとコンテンツのコントラストが損なわれてしまう(元画像をPhotoshopで加工しても完全に再現はできない)ので,避けたいのです。
皆さんのご意見を伺っていると,どうも思い描いていた方法はどうも実現可能性が低いようですので,別の方法を検討してみたいと思います。
重ね重ね,誠にありがとうございました。
No.4
- 回答日時:
はい。
上に他の要素を重ねると、下のものは選択もリンクもできなくなります。
また、もし半透明な画像を置いたとしても、それに対応していないブラウザでは下が完全に見えなくなってしまいます。
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プロパティを使えば、背景上の要素を半透明にすることが出来ますが、あまりお勧めは出来ません。特に視覚障害者の方の利用を考えれば、はっきり読みやすいデザインとすべきです。
>上に他の要素を重ねると、下のものは選択もリンクもできなくなります。
>また、もし半透明な画像を置いたとしても、それに対応していないブラウザでは下が完全に見えなくなってしまいます。
なるほど,この点については構想を考え直す必要がありそうですね。
ご指摘,ありがとうございます。
>そのためにHTMLを使ってウェブサイトを作っているのではないですか?
>デザインのために、もっとも優先しなければならないはずの「どんな環境からもWebの情報を利用できるようにすべき」を否定する
>特に視覚障害者の方の利用を考えれば、はっきり読みやすいデザインとすべきです。
これは,どんな目的でサイトを作っているかをお伝えしていなかったからこそのご指摘ですね。
実は私は単なる趣味でサイトを作っているだけで,広く一般にアクセス・利用してもらうためのサイトを作ってはいないのです。
特に役立つ・必要な情報が載っているわけではないので,大勢の人から見てもらう必要は無く,友達とか,たまたま見つけた人が見られたらそれでよく,
見れなかったら見れなかったで別に困らないということなんです(極端な話,私が見れたらそれでいい)。
要するに「私は私のためにサイトやコンテンツを作っているのであって,見ている人のためではない」というのが,サイト自体の明確なコンセプトなんです。
ちょっと個人の思想が背景にあることなので,理解が得難いかもしれませんが…
まァとにかく,「ユーザの使用環境を限定しないように」とか「ユーザビリティを高く」といった要素は,原則として(極端な場合はともかく)排除するということだけ(その是非については置いといて)前提として頂ければということです。
じゃァ,誰に見せなくてもいいなら
>HTMLではなく画像やPDFを
使えばいいじゃんか,ということになるわけですが,逆に言えば,「趣味で作ってるんだからどんな表現手法を使おうが間違いではない」ということなんです。
別に作るだけ作ってサーバにアップしなくても何の問題も無いのですが,「ブラウザでURL打ったら自分の作った物が出てくるのって,何となく嬉しいよね」という単純な気持ちから,サイトを作っています。
要するに,趣味ですから,「ホームページを作ること自体が目的」であって,「目的のためにホームページを作っている」のでないということです。
ワガママで本当に申し訳ありませんが,ご指摘には大変感謝しております。
本当に,ありがとうございました。
No.3
- 回答日時:
その場合、その画像の背後にあるすべてのリンクが無効になりますが???
本来は背景にして、その上に来る画像やテキストに半透明を指定するべきかと・・
CSS3ですから、古いブラウザには無効ですが、文書構造上も汎用性も考えるとそのほうがよいかと・・
>その場合、その画像の背後にあるすべてのリンクが無効になりますが???
そうなんですか!!
それは#2の回答者様のご教授下さった方法でも同じなのでしょうか?
>本来は背景にして、その上に来る画像やテキストに半透明を指定するべきかと
Photoshopなどで,完成画像に,紙やコンクリートなどの半透明のテクスチャを重ねて,独特の質感をもたせる技法があると思います。
これをウェブで実現したいのですが,そうしてテクスチャを乗せた状態の画像を表示させるだけでは(自分としては,画像をブラウザにフィットさせたくないので),ブラウザ全体にはテクスチャが反映されません。背景部分はただの単色等の背景となってしまいます。
こういうことを実現したかったのですが,やはり無理なのでしょうか?
No.2
- 回答日時:
よくわかりませんが、、、
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);
}
>よくわかりませんが、、、
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>
No.1
- 回答日時:
ページに配置された個々の画像を透明にすればいいのでは?
透明をサポートしている画像形式でWebで使える画像を保存、つまり透過gifや透過pngで画像を保存されてはいかがでしょうか?
タイルにする画像は透過しないでくださいね。
>ページに配置された個々の画像を透明にすればいいのでは?
それでは,表示したい画像の輪郭がぼやけてしまうので…
多分私の言語能力不足で意図が上手に伝わっていないのだと思います。
Photoshopなどで,完成画像に,紙やコンクリートなどの半透明のテクスチャを重ねて,独特の質感をもたせる技法があると思います。
これをウェブで実現したいのですが,そうしてテクスチャを乗せた状態の画像を表示させるだけでは(自分としては,画像をブラウザにフィットさせたくないので),ブラウザ全体にはテクスチャが反映されません。背景部分はただの単色等の背景となってしまいます。
せっかくご教授頂いたのに,申し訳ございません。
ご回答,誠にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- ホームページ作成・プログラミング アニメ公式サイト風なWebページを作りたいです。 無料のテンプレートはありますか? 2 2022/04/02 11:33
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- YouTube YouTubeはTV番組、映画の違法アップロードに対して収益金を支払っているか否か? 1 2022/04/30 20:12
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページビルダー
-
HTMLで、ホームページが作れる...
-
ホームページビルダーを複数の...
-
既存画像(gif または png)の背...
-
ホームページ作成
-
ホームページの画面文字を濃く...
-
ホームページビルダーおすすめ?
-
今さらですがHPを作成するに当...
-
ホームページ制作で教えてくだ...
-
ビルドとリビルドの違いを教え...
-
ページの内容コピペ 範囲が広い...
-
web制作(HP作成について教えて...
-
ホームページビルダー15で作っ...
-
ビフォアーアフターのページは...
-
無料でホームページを作成した...
-
ホームページ作成について。「...
-
メールフォームで送信すると「...
-
CGIが実行可能なHP領域又はレン...
-
ホームページビルダー11で作...
-
GASについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
掲示板を作成しておりアップロ...
-
wordpressでキャプション内で改...
-
js、 jQuery の手直しを助けて...
-
着せ替え画像の表現方法
-
どこをテーブルで作るべきか、d...
-
ASP.NETでの縦・横スク...
-
NN4.78が途中までしか読...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
div要素が重なってします
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
リストマーカーをボックス内に...
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
<h1>、<h2>と<p><div>の行間を...
-
css初心者 フレックスボックス...
-
ボタンをセル内一杯に表示させ...
おすすめ情報