こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ホームページのデザイン (オブジェクトの自由な配置)

次のページのようなデザインは何のソフトを使って作成しているかわかりますか。また軸はどのようなソフトで作成したと思われますか。
http://noion.cool.ne.jp/

完成した軸の上から写真を自由に直接ドラッグ&ドロップでレイアウトしたような(上記のような)サイトを作りたいです。

▼今までのホームページ制作の過程
まず、fireworksやphotoshopでロゴ、グラフィック、基本レイアウト(軸など)を作っています。ネット上に公開する時は、dreamweaver MXも持っていますがホームページビルダー10のほうが慣れていて使いやすいため結局そちらを使っています。

よろしくお願いします。

投稿日時 - 2007-05-22 23:22:17

QNo.3022448

困ってます

質問者が選んだベストアンサー

> また軸はどのようなソフトで作成したと思われますか。
PhotoshopとImageReady、またはFireworks。曰くPhotoshopとのことですが。

全体の画像を作成し、スライスで切り出します。
ソースコードでtableタグを削除、trタグをdivに、tdタグをpに全文置換
divに背景画像とwidth、heightを指定し、
pに必要に応じてfloat:leftを指定

スライスは2種類必要です。
上メニュー、中央、下メニューの画像を切り出すスライスと、
上メニュー、下メニュー部分のHTMLを切り出すためのスライスです。
メニューをクリックできるように透明gif画像を用意してください。

上メニュー部分は1つずつ<p style="float:left"><img></p>とせずに、
<p><img><img><img></p>としても出来ると思います。
通常は、画像の読み込みを省略できるように1ピクセルのスペーサーを何度も使い回しし、widthとheightを指定するだけでいいです。

HTMLの最初の3行は手書きで編集する必要がありますが、本文はテーブルレイアウトとほとんど変わりません。
ですので、ImageReadyやFireworksで作成したHTMLをそのまま使用したような感じになっています。
デザインを参考にするにはいいと思いますが、
失礼ながら、XHTMLを使うならなおさら、HTMLの構成を参考にするには不適切と思います。
FirefoxやOperaなどで、スタイルシートを使わない設定で見てみると、どんな構成になっているかよくわかると思います。

人のことが言えるほど綺麗なHTMLは作れないんですが、、、
適切な構成のHTMLをDreamweaverなどで作る場合は、上記の方法とは全く違うアプローチになります。

投稿日時 - 2007-05-24 14:31:03

お礼

非常に丁寧に返答していただきありがとうございます。
勉強不足でした。出直してきます。

投稿日時 - 2007-07-19 22:08:06

ANo.4

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

XHTMLの記述が国際規格準拠ですから作成環境が書いてなくても確実にソースの直接編集であると断定できます。
作成ソフトを使ってこういう結果をたたき出すのは難しいと思いますよ。
http://validator.w3.org/check?uri=http%3A%2F%2Fnoion.cool.ne.jp%2F

こういうのを作るには作成ソフトを使わず直接ソース編集が行えるように勉強するしかないです。
作成ソフトにはやはり限界と言うものが存在します。

投稿日時 - 2007-05-23 08:37:21

お礼

やはり最終的には自分で構成するのが一番なのですね。
やはりレイアウト的なことを考えてみるとソフトを使うのが
楽なのでずっと使ってました。

これからもっと勉強していきたいと思います。

投稿日時 - 2007-07-19 22:09:17

ANo.2

「軸」って私は良くわかりませんが・・・

あのサイトはメモ帳で作ったそうです。FAQに書かれていました。
つまりタグ手打ちですね。
画像はPhotoshop、Illustrator をお使いとのこと。
>完成した軸の上から写真を自由に直接ドラッグ&ドロップでレイアウトしたような・・・
失礼ながら、そんな乱暴な方法ではなく、あのサイトはCSSできちんと表示設定されています。

投稿日時 - 2007-05-23 00:03:06

お礼

いまいちCSSというものをまだ理解していません。
勉強しなおしてきます。ありがとうございました。

投稿日時 - 2007-07-19 22:12:32

ANo.1

ん・・・とりあえずComposerとかホームページビルダーのような
ソースドを汚してしまうWebページエディタが使われていないことは確実ですね。

Webページとしてはコメントが確り打たれていますし
疑似フレームはDreamweaver等のプロ向けのツールでも作るのは困難ですから
HTML+CSSの部分はテキストエディタかWebページエディタのソースコード編集モードで手書きで書かれているような気がします。

投稿日時 - 2007-05-22 23:45:52

お礼

ソースド汚すという意味がよくわからなかったのですが、
調べてわかったのですが、市販のソフトを使うとどうしてもでてしまうみたいですね。
テキストであのようなレイアウトが作れるとは正直驚きました。

勉強して出直してきます。

投稿日時 - 2007-07-19 22:11:29

あなたにオススメの質問