- ベストアンサー
レイアウトを簡単にする方法
知り合いに頼まれて写真入の洋菓子のメニューを作ることになりました。 レイアウトのアイデアはレストランのオーナーからいただいていて、1ページに 100px×75px程度の画像が大量に配置され、それぞれメニュー名、説明、値段 などが配置される感じです。WEBデザインの感覚でいえば、テーブル組をして 各セルに画像や説明文などを配置した感じです。 (こんな感じです↓) ■■■■ ■■■■ ■■■■ ■画像■ ■画像■ ■画像■ ■■■■ ■■■■ ■■■■ 説明文 値段 説明文 値段 説明文 値段 説明文 値段 説明文 値段 説明文 値段 ■■■■ ■■■■ ■■■■ ■画像■ ■画像■ ■画像■ ■■■■ ■■■■ ■■■■ 説明文 値段 説明文 値段 説明文 値段 説明文 値段 説明文 値段 説明文 値段 (説明文と値段が2行になっているのは、何かをトッピングしたりサイズが変わ ったときに料金が変わるためです。) いままで、WEBのデザインは何度かした事があるのでフォトショップ、イラス トレーターなどは使ったことがあります。(でもそれほど使い込んでいる!と いうレベルではありません。) とりあえず、フォトショップを使ってデザインを始めましたが、WEBデザイン で言うテーブルのように天地左右をキチッと合わせてレイアウトできず困って います。 フォトショップやイラストレーターを使用して、WEBのテーブル感覚で天地左 右をキチンと揃えながらレイアウトしていく方法ってありますでしょうか? それとも何か違うソフトウェアを使ったほうがよろしいのでしょうか? どうぞよろしくお願いいたします。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- WillDesignWorks
- ベストアンサー率36% (1407/3901)
関連するQ&A
- フォトショップでウェブサイトの一枚ベタのレイアウトを、たとえば、 ht
フォトショップでウェブサイトの一枚ベタのレイアウトを、たとえば、 http://www.webdesignlibrary.jp/2010/01/web_design.phpさまを参考にして、作って、それをドリームウェイーバーで背景として、あるいは、画像としてテープルに入れて、でも、フォトショップで作ったタブなどを反転させたりしたいとき、あるいは、タブに限らず、その一枚ベタの上に画像やテーブルやフラッシュなどを、どうやってはめ込むのかがまったく検討がつきません。。。リンクを設けるのはわかるのですが。。。どなたか教えてください~☆
- 締切済み
- Flash
- Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは?
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- ベストアンサー
- HTML
- 掲載画像のレイアウトはテーブルレイアウトで実現?
掲載した画像のようなホームページのレイアウトはテーブルを何重にも組み合わせて (テーブルを何重にも入れ子にして)実現するのが最近の一般的な手法なのでしょうか このようなホームページのレイアウトのコーディング方法の概略を教えてください。 webデザイン素人のためなるべく詳しく丁寧に教えていただけると助かります。
- 締切済み
- CSS
- ホームページのレイアウトが上手く出来ません
お世話になります。ブログを開いているのですが、画像と文字のレイアウトが、したいように上手くできません。 画像を2個横に並べて、そのさらに横に文字を配置したいのですが。画像を■で表すと、このような感じです。↓ ■■文字 テーブルを使ってやってみると、文字が何故か大きくなってしまって、フォントサイズを小さくしてみても小さくならず。 画像を2個ともにalign="left"を加えてみたら、配置は一応なったのですが、綺麗に揃わずガタガタになってしまいます。 何かいい方法があれば教えていただけないでしょうか。よろしくお願いいたします。
- 締切済み
- その他(インターネット・Webサービス)
- ホームページ全体のデザイン・レイアウトをFireworks CS3でや
ホームページ全体のデザイン・レイアウトをFireworks CS3でやろうと思っています。 別にDreamweaver CS3との連携は必要ありません。デザインしたページの欲しい部分の 画像だけ切り出すために、デザインしようと思います。 そこで、例えばWEBページ幅を800pxとしようとするWEBページのデザイン(デザインは どんなものでもよいとして)をFireworksで新規作成から行い、実際に必要となる画像をスライスして切り出すまで、一連の流れが載っている参考になるサイトは ありませんか?要するにFireworksにて1つのWEBページのデザイン(ここはにロゴ、ここはメニューボタン ここはコンテンツ)などのサイト全体の枠取り(線や画像が配置された 状態)の製作過程みたいなのが載っている参考になるサイトってないですかね? 最後にスライスして画像を切り出す際には、画像だけ切り出せればよく、htmlは別途自分で XHTML+CSSレイアウトにより作成しますので、htmlの吐き出しは不要です。 Firereworkでページ全体をデザインしたものの、一部の画像をパーツとして欲しいだけです。 よろしくお願いします!
- ベストアンサー
- ホームページ作成ソフト
- DreamWeaver8でレイアウトテーブルの中央配置について
まずはやりたい結果からお伝えしますと 「レストランなどのメニュー表のページを作りたい」 ページを作成時テーブルの中に写真を読み込んで背景を作ったのですが 飾りもなく角も丸くないぱっとしないページが出来上がりました。 そこでFireworksでバックや縁取りも作り写真も読み込んで作ったのですが保存するとWinでは画像が劣化してしまい写真にムラが出来ました。 今度はDreamWeaver8でレストランメニューのバックや縁取りを先に読み込んでその後レイアウトテーブルでjpgの写真だけを読み込んだら凄くいい感じに出来ました。 IEで確認したところ思った通りの画質とバックが出来上がったのですが IEの右下をクリックしてサイズを変えるとバックの画像だけ中央配置されてjpgを読み込んだレイアウトテーブルは位置が変わりません。 そこで質問です。 1:DreamWeaver8で上記したバックとレイアウトテーブルの画像を統合?のようなもので中央配置は出来るのでしょうか? 2:画質を落とさなくてFireworksで保存する方法はありますか? 3:このような場合一番良い方法があったら教えてください。
- 締切済み
- ホームページ作成ソフト
- レイアウトが崩れてしまいます、、
みなさま、こんにちは。 Webページ作成業務について知識の浅い新人です。 教務で、既存のWebページの更新依頼を受けたのですが 他社からの引継ぎで、元のファイル、画像はなく 元フォームはIEより"名前をつけて保存"をして対応するということになりました。 ですが、Web上ではレイアウトはきれいにみえているのですが、 "名前をつけて保存"してきたデータでは 画像の配置がずれてしまう テーブルの幅が変わってしまう と、レイアウトが崩れてしまいます。 ちなみに、こちらの作業環境は widowsXP IE6.0 Dream Weaver4 です。 先方の環境は不明です。 なぜ?という糸口が分からない無知な私です。 みなさまの知恵、知識を教えていただけると嬉しいです(T_T) よろしくお願いいたします<m(__)m>
- ベストアンサー
- ホームページ作成ソフト
- レイアウトはテーブルよりCSSですか?
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- cssでのナビゲーションのレイアウトについて
ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。 希望のレイアウトは、 ※ヘッダー(サイズ:760×59.8PX)の左端にロゴマーク(126×59.8PX)、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で3つあり、A(サイズ:80×36PX)、B(75×34.2PX)、C(75×36.3PX)で、ロゴの右側になるべく等間隔で配置したい。 というものです。 これまでに試したのは、 1、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが3つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。 2、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。 長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか?よろしくお願いいたします。
- ベストアンサー
- CSS
- フォトショップの解像度(web用画像を印刷用画像にする)について教えて下さい。
初めまして!フォトショップの解像度変更方法を教えて頂きたいのですが? web用画像等の解像度が72pxの画像を、印刷用データー350pxに変更する方法を詳しく教えて頂けませんか?(本来なら350pxのような大きな解像度の画像を使用しなくてはなりませんが、それがない為、仕方なくweb画像を使用します。) 又、350pxに編集した画像データーをイラストレーターに配置するにはどのようにすれば宜しいのですか? ※フォトショップでの保存方法(拡張子等)も詳しく教えて下さい。 ◆私のパソコン・ソフト環境は、ウインドウズXP・イラストレーター10・フォトショップ7です。 何度行っても画像が荒くなり困っています。 お詳しい方、どうぞ宜しくお願いします。
- 締切済み
- グラフィックソフト
- EP-880AWを使ってアップデートしようとすると、プリンターのスイッチは入っているのに、スイッチの指示が表示されずにアップデートができません。
- EP-880AWのアップデートができない問題が発生しています。プリンターのスイッチはオンになっているのに、アップデートの指示が表示されずに進められない状況です。
- EP-880AWを使ってアップデートしようとすると、スイッチの指示が表示されずにアップデートができません。スイッチはオンになっているのに、何らかの原因でアップデートが進まないようです。
お礼
ご丁寧に使用法まで解説していただいてありがとうございました! 早速イラストレーターで試してみたところ、簡単に配置することが できました。そうです、こういうことがやりたかったのです! 本当に助かりました。ありがとうございました。