- ベストアンサー
グリッドを用いたホームページのレイアウトについて
あるWebデザインに関する書籍で、「グリッドを使うとテキストや画像をキレイに配置することができる」と書いてあったので、是非このグリッドを使いたいと思うのですが、このグリッドシステムを採用しているホームページ作成ソフトってありますか？ 私の記憶ではmacromediaのdreamweaverがこの機能を備えていたような気がするのですが・・・。 他のソフトではどうでしょう？（例えばホームページビルダーとか？） またHTMLタグを手打ちする際は、もちろん視覚的に確認しづらいのでグリッドを使って・・・、なんてことはできないですよね？ どなたかご回答宜しくお願いします！
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞ホームページビルダー７」を購入したのですが… ＞どんなブラウザで見てもレイアウトの崩れがなく表現できる IBMのサイト他で調べてみました。どこでも配置モードは、CSS(カスケーディングスタイルシート)を使用した物です。しかし、「どんなブラウザで見ても」は誇大広告です。まず、スタイルシートをサポートしていない古いバージョンのブラウザは全く対象に入っていません。PDAやゲーム機のブラウザも、恐らく考慮されていません。また、「ブラウザ共通のレイアウト」が、どのような方法で実現されているのかまだ調べていませんが、単にCSSを使用している物ならば、これも嘘です。CSSの解釈(実際の描画)も、ブラウザ毎に差異があります。特にフォント回りは明らかな差があります。それは、OSに起因する物(そもそも同じフォントが入っていない)も含まれます。また、InternetExplorerには、[ツール]→[インターネットオプション]→[ユーザー補助]に、サイト作成者が用意したCSSを意図的に無視する、または変更するオプションがあります。 企業などが対象にしているターゲットブラウザは、基本的には各OSのInternetExplorer4.X以降と、NetscapeNavigator4.X以降だと思います。これだけでも相当な苦労をしないと、同じレイアウトにすることは出来ません。CSSとJavaScriptを組み合わせて、相当複雑な事をしない限りは、ブラウザ毎に分けない一組のソースでは全く同じにはなりません。下記URL等も参考にしてください。 http://www2.tokai.or.jp/nyargo/ [ホムペ作成]→[クロスブラウザ](下の方です) http://www.din.or.jp/~hagi3/index.htm [JavaScript Tips集]→[記法の傾向と対策]→[StyleSheet の落し穴]および他の項目 私が知る限りでは、MacromediaFLASHプラグインが使用できるブラウザをターゲットにする限りは、FLASHを使用して作成するのが、最もブラウザに依存しない見え方になると思います。OSに依るフォントの違いも、文字入力部分を除いては関係ありません。視覚デザインにこだわるのでしたら検討してみてください。 また、「ゼロから始めるWebデザイン」での「グリッド」は、いわゆる配置の考え方のことではないでしょうか？特に、「縦だけでも良い」としてあるあたりがそれっぽく思われます。グリッド化の参考は下記URLをご覧下さい。要するに、画面を等間隔の縦・または格子状に分けて考え、画像やテキストの配置をそのグリッドに合わせていくという「考え方・見やすいデザインのコツ」だと思います。テーブル関連のタグを使用すると簡単に出来ます。 http://www.kodouguya.com/index.shtml [デザインのコツ]の[グリッド化]
その他の回答 (4)
- DIE
- ベストアンサー率54% (6/11)
見当はずれの回答だと思いますが、あえてします。 その書籍とは、雑誌ではないですか？ その雑誌では、グリッドを使った配置と言うのは、背景に格子状の画像を使い、ロゴやテキストのバランスを比較的分かりやすく製作すると言う物だったと思います。 作り方自体は、テーブルを使った配置方法で、特に目新しい物ではなかったように記憶しています。 WEBページ作成ソフトのグリッド機能は、他の方同様、苦労させられましたので、お薦めできません。
お礼
いえ、雑誌ではなく、「ゼロから始めるＷｅｂデザイン」とう本です。 私自身は今まで独学でホームページを作ってきて長年「？」だったことが詳しく書かれてあり、すごく良い本だなーと思っているのですが。 その本の中ではグリッドは格子状でも良いし、縦のラインだけ引いても良いというような書かれ方をしていました。 しかしこの本にはそれだけしか書いてなくて、具体的にじゃあグリッドを引くにはどんなソフトを使ったらいいとかってゆうのは載っていません。 また先日「ホームページビルダー７」を購入したのですが、これには「どこでも配置モード」という、いわゆるグリッドシステムを用いた編集モードがあるようなのですが、このバージョンから「ブラウザ共通のレイアウトに変換して保存」というシステムが加わっていて、どんなブラウザで見てもレイアウトの崩れがなく表現できるとガイドには書いてあるんですが・・・。 でもやはりどんな状況下においてもページのレイアウトの崩れを防ぐにはやはりグリッドは使わないほうが無難なんでしょうか・・・。 レイアウトさえ崩れなきゃかなり嬉しい機能だとは思うんですが（^^;）
- gakushaneko
- ベストアンサー率68% (2350/3407)
ホームページビルダーV6でグリッドを使ったページを作製したことがあります。 まぁ，「大変苦労させられた」と言うのが正直な感想です。 特に，広告バナーをページトップ，または，ページエンド，またはその両方に入れる無料ホームページサーバーを利用しているサイトでは，てんやわんやでしたよ。 やっと編集が終わったと思い，そのページをアップロードして，確認のためページをインターネットを通じて開いたら，なんと，ページトップの広告バナーと一部の部品が重なっちゃって・・・。 直してアップロードして，しばらくは良かったと思いますが，久しぶりにまたそのページを開いたら，今度はページトップとページエンドに広告バナーが入るようになっていたため，グリッドシステムを使ったページだと何故かページトップに広告バナーが二つ並んでいて・・・，また，修正してアップロードしなければならない羽目になったのです。 と言うことで，もし，グリッドシステムを使用するのであれば，そこに配置している部品はレイヤー処理されますので，広告バナーが入るサーバーでの使用は，広告バナーが入るスペースを必ず作らなければならないので，充分気をつけてくださいね。 広告バナーとグリッドシステムの関係について，「アァ，こうなるんだぁ・・・」と言う感じがつかめるページを見つけましたので，参考URLに入れておきます。 そうそう，アドバイスだけど，Wordや一太郎をよく使用する人，または，これらの使用に慣れている人は，グリッドシステムを使わないほうが無難だと思いますよ。（ホームページビルダーでは逆のことを書いていますが・・・） ただし，ワードで言うところの「テキストボックス」の使用に慣れているのであれば，逆に問題はないと思いますけどね。 極端に言えば，グリッドシステムを使うとテキストボックスのオンパレード的ページが出来上がります。（参考ＵＲＬのページはほとんど画像ですが・・・） なお，ホームページビルダーでは，編集中のグリッドは表示されます。（もちろん，設定で編集中のグリッドを非表示にすることも出来ます） しかも，設定がデフォルトのままですと，グリッドに各部品が吸い付きます。
- zoh
- ベストアンサー率34% (273/789)
少し補足します。 ＞「グリッドを使うとテキストや画像をキレイに配置することができる」 これは大嘘です。条件がきわめて限定されています。「同じOSで、同じブラウザで、バージョンも同じで、表示に関する設定も同じ」場合に限られます。「Golive」を使ったことがありますが、その仕組みは「とても小さなセルのテーブルをページ全体に設定し、その中に配置する」と言うのが基本です。従って、フォントサイズの違う、特に作成時より大きなサイズのフォントを使うと、てきめんにレイアウトが崩れます。かなりゆったりした配置ならば、文字が大きく見えるだけでいいのですが、そうでない場合は本来一行で表示したい所に折り返しが発生したり、横幅が広がったりし、その結果セルのサイズが大きくなり、下や右の行がさらにずれ、きれいにに配置したはずがでたらめになります。スタイルシートを使うタイプの物では、配置をピクセル指定できちんと並べたはずが、文字が大きくなったために、画像と文字や、文字と文字が重なり読むことが出来ないと言うこともあります。 仕事としてWEBデザインをしたことがありますが、この問題は非常に面倒で、様々な環境で十分に検証しないと、思った通りに表示されていないことも多いです。JavaScriptを使用してブラウザの判別をして、あらかじめ用意したブラウザ毎に違うページを表示するとか、フォントサイズが違ってもいいように余裕のあるレイアウトにするとか、文字も画像にしてしまうとか、「Macromedia FLASH」を使用するとか、様々な工夫が必要になります。「絶対にどのブラウザでも同じように見えなければ嫌だ！」というのであれば、FLASHを使用するのが最も適していると思います。 ブラウザによる表示の違いをなくすための参考書として、「HTMLデザイン辞典」をお勧めしておきます。これで完璧に出来るわけではありませんが、ずいぶん参考になります。参考URLは「Yahoo! Books Shopping」での検索結果です。
お礼
ご回答ありがとうございます。 私もテーブルを使ったレイアウトはよくするのですが、なかなか思ったとおりいかなくて結構難しいですね。 ただ私が見た本の中で言う「グリッド」はテーブルを使ってのレイアウトとは別もののようなんです。 グリッドを使ったレイアウトとテーブルを使ったレイアウトは別のページ（項目）で書かれてありましたので・・・。 ともかくレイアウトについては引き続き試行錯誤してみます。 参考書籍もご紹介いただきありがとうございました。
- zoh
- ベストアンサー率34% (273/789)
Adobeの「Golive」や、IBMの「ホームページビルダー」等にもあります。ホームページビルダーは、「どこでも配置モード」というものです。
お礼
>「ゼロから始めるWebデザイン」での「グリッド」は、 >いわゆる配置の考え方のことではないでしょうか？ ありがとうござます！まさしくおっしゃるとおりでした。 「ホームページビルダー」のほうもいろいろ触っていたら、どこでも配置モードじゃない通常モードでも単に画像などの配置の目安にする目的のためだけのグリッドを出すことができました！ これでサイトのレイアウトがしやすくなり、私のページも格段に見やすくなるんではないかと思うと嬉しいです（^^） とっても助かりました。ありがとうございました！