こんにちわ、kaituといいます。
最近スライスをもちいて、デザインを勉強しています。
しかし、HPをデザインした場合、
画像をスライスして色数等編集し、そのままDreamweaverに持っていき、
文章の所だけ、画像を削除(白くする)して、文章入れてupします。
すると、やはりブラウザで見た場合デザインがずれてしまい、それを直すのが一苦労なのです。。
グリッドを表示して、それに合わせて構成するとずれなくなるんでしょうか;
他の方法として、1×1の透明GIF画像を画像と画像の間にいれ、
ずれるのを防ぐ為にやっていますが、効果が全然ありません。。;
後、できるだけ画像を少なくするよう、
スライス画像の不要な部分(白い部分等)は、Dreamweaver上で画像を消していっています。
まだまだ勉強中なので、試行錯誤してやっているのですが、やりなおしで時間ばかりがすぎてしまって中々;
デザイン重視なので、スライスが多いのも原因でしょうか。。
皆さん、スライスをどのようにして使っているんでしょうか?
参考になるサイトや、ずれを防ぐアドバイス等あれば回答お願いします。
No.2ベストアンサー
- 回答日時:
こんにちは!
【Web用に保存】の時に、画像のいらない部分のスライス上でダブルクリックします。
【スライスオプション】がでますので、『スライスの種類』を『画像なし』にして設定してみてください。
スライスはあまり複雑にならないように工夫してみてください。
ありがとうございますっ。
これ知らなかったです。。これでずれなくなりました!
いつも1×1スペースでなんとかやってたんですが;(変形させてとか)
簡単でずれなくなりました、ありがとうございましたっ!
No.1
- 回答日時:
作り方は人各々、ズレる原因も色々あるので、一例として参考になればと思います。
スライスの入るテーブルの最上段と最右段に1pixelの隠しセルを作り、
各セルのwidthとheightの値を指定します。
(隠し部分の結合セルは全て分割)
これだとズレなく作れると思います。
※作業中は隠しセルが選択しづらいので、テーブルのセル余白を
10pixelくらいにして作業し、終わったら0pixelに戻します。
●意味がわかりにくい場合のために以下、サンプルソースです。
DWにコピペして見てください。
<table width="601" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="1"><img src="spacer.gif" width="120" height="1"></td>
<td width="180" height="1"><img src="spacer.gif" width="180" height="1"></td>
<td width="130" height="1"><img src="spacer.gif" width="130" height="1"></td>
<td width="170" height="1"><img src="spacer.gif" width="170" height="1"></td>
<td height="1" width="1"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="image.gif" width="300" height="110"></td>
<td>text</td>
<td><img src="image.gif" width="170" height="50"></td>
<td width="1" height="50"><img src="spacer.gif" width="1" height="50"></td>
</tr>
<tr>
<td rowspan="2"><img src="image.gif" width="130" height="80"></td>
<td>
<p>text</p>
</td>
<td width="1" height="60"><img src="spacer.gif" width="1" height="60"></td>
</tr>
<tr>
<td>text</td>
<td rowspan="2">text</td>
<td rowspan="2"><img src="image.gif" width="170" height="65"></td>
<td height="20" width="1"><img src="spacer.gif" width="1" height="20"></td>
</tr>
<tr>
<td><img src="image.gif" width="120" height="45"></td>
<td>text</td>
<td height="45" width="1"><img src="spacer.gif" width="1" height="45"></td>
</tr>
</table>
ふむふむ、なるほどぉ。
試してみました~。
少しやりずらいですが、具体的にサンプルソースまでありがとうございますw
やはり隠しセルでずれを防止する方法が主なのですね~。回答ありがとうございましたっ!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- ドライブ・ストレージ PCのパーフォーマンスが極端に落ちた。 8 2023/01/28 15:22
- その他(ブラウザ) angel ブラウザってなぜアプリのクラッシュやフリーズが多いのでしょうか?? 特定のサイトにこのブ 3 2023/02/06 20:17
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- 生物学 脳の記録部位の集計方法について 1 2022/06/11 21:26
- Android(アンドロイド) いま3台のAndroidを使っています。 AndroidってiPhoneには無いmicroSDXCが 1 2022/05/06 11:42
- Mac OS Macか Windowsか?悩んでいます。 6 2023/04/07 09:35
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【無劣化で動画ファイルを結合...
-
mp3の音楽ファイルの「アルバム...
-
blenderについて質問です。 Iキ...
-
after effectで、雨と、地面に...
-
PowerDirector 365に詳しい方
-
PNGファイルをSVGにロスなしで...
-
画像の白抜きの意味
-
ISO ファイルの結合方法を教え...
-
Pixelで撮影した360°写真の編集...
-
AIの動画編集について
-
MPGファイルが再生できません(...
-
写真をパソコンで簡単に水平補...
-
動画加工
-
最悪
-
このような文字は何で作ること...
-
録画ソフトについて
-
MP4 からISOファイルを作りたい...
-
Fimoraという編集ソフトで途中...
-
ただ動画と動画を結合できれば...
-
無料で動画のフレームレート変...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
mp3の音楽ファイルの「アルバム...
-
メディアプレーヤの動画から写...
-
MPGファイルが再生できません(...
-
audio CDをUSBメモリーに...
-
動画ファイルの字幕について。
-
vlcプレーヤーで動画を再生した...
-
画像編集ソフト、GIMPの規約に...
-
VideoProc Vlogger を使用して...
-
音楽を再現できるソフトってあ...
-
Audacityのスペクトログラムの見方
-
動画編集ソフトについて
-
動画の編集ソフトで初心者向け...
-
AIの動画編集について
-
動画のサムネイルについて
-
ゆっくりムービーメーカー4、GI...
-
GIMPを使って第三者にサムネイ...
-
PowerDirector 365に詳しい方
-
動画編集のフリーソフトを探し...
-
約1000バイトの画像を10...
-
写真をパソコンで簡単に水平補...
おすすめ情報