締切済み WEBサイトのCSSレイアウトについて 2009/02/25 23:06 WEBページのCSSレイアウトの縦幅、横幅のサイズが分かるフリーのソフトて知りませんか。 みんなの回答 （1） 専門家の回答 みんなの回答 noname#98692 2009/02/26 02:22 回答No.1 質問の詳細がわかりかねますが・・・ 各要素の width, height を得たいのであれば、CSS そのものを見る。可変幅の要素の width, height 得たいのであれば、Firefox に WebDeveloper を入れる。Ctrl + Shift + F で Display Element Information という機能がつかえます。詳細が知りたい要素にマウスカーソルを合わせてクリックすると、width, height などが表示されます。(Display Block Size でも OK) 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピューター業務ソフトウェアグラフィックソフト 関連するQ&A CSSレイアウトってなぜこんなに難しいのか？ 個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか？？ みなさん、テーブルレイアウトと比べて異常に難しく感じませんか？ 今の調子ではＨＰ作成の仕事が請けられなくなっています。（涙） 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス？のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？ ■今まで2～3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、 いっこうに進歩しません。（ここに本の題名書き出すとマズイですよね？） ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？ HPビルダーとかなら、もっと簡単に出来るのでしょうか？ ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 （メニューや、商品スペック、写真並べなども、テーブルで。） それが精一杯ですが、これで通用するのでしょうか？ HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。 CSSレイアウトでこのようなことはできる？ ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？ CSSのリキッドレイアウトについて質問します。 2列で左列がサイドバー,右列がコンテンツのリキッドレイアウトを考えています。 左列を固定幅にして,右列のmargin-leftに左列の横幅分の値を設定しています。 横幅が広い画面で見ると、一行が大変長くなります。 最近、横幅が1920の画面で確認すると、 大変読みにくいことに気づきました。 IE6では、min-width,max-widthが設定できないとあります。 IE6では、CSSでリキッドレイアウトを行なう場合、 横幅を調整する方法はないのでしょうか。 ※また、CSSを使ったリキッドレイアウトを実現している、 お勧めサイトがありましたら、教えてください。 よろしくお願いいたします。 ネットワークエンジニアとは？技術職の未来を考える OKWAVE コラム レイアウトはテーブルよりＣＳＳですか？ 今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。 CSSでのレイアウト 私の今作っているHPはテーブルでレイアウトしているのですが、 あるところで『テーブルでレイアウトするのはお勧めできない。』と書いてありました。 よく読むと『テーブルでレイアウトするよりCSSでレイアウトする方がよい』ということでした。 具体的にCSSでテーブルのようにレイアウトするとはどうすればいいのでしょうか。 また、テーブルでのレイアウトの利点、CSSでのレイアウトの利点はどんなところでしょうか。 教えてください。お願いします。 CSSレイアウト CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか？ またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。 dreamweaverでCSSのレイアウトが勝手に崩れる・・・ はじめまして。 実はdreamweaverでCSSスタイルでHPを作成しています。 なんとかレイアウトを整い、画像をはめ込んでいったのですが、ふとした瞬間にレイアウトが一気に崩れてしまいました。 もちろんCSSはいじっていません。それを証拠にindexとほかのページをテーブルにしてわけているんですが、インデックスだけ崩れています。 心当たりといえば、作業のウインドウのサイズをさわってしまったぐらいです・・・ 元に戻してもレイアウトは崩れたままです・・・ どうすれば元に戻るのでしょうか？ ちなみにIEでチェックしてもレイアウトに問題はなかったのですが、どうも作業がやりづらいです。 XHTML+CSSレイアウトについて 恐れ入ります、XHTML+CSSレイアウトをするとき、 例えばTOP,ABOUT,PORTFOLIOというページがあった としてCSSをリンクするとします。 この場合、cssはtop.css,about.css,potfolio.cssの ように各ページごとにcssを用意すればよいのでしょうか? ページの幅が変わってしまう問題について（CSS） CSSレイアウトついての質問です。 DreamWeaverで作ったサイトを、ブラウザでプレビューしてパッと見は問題ないのですが、 サイト内でページを切り替えたときに、 ページの横幅が微妙に狭くなったり広くなったりする現象が起きたときは どういった対処をすればいいのでしょうか？ WEB制作に詳しい方、お知恵を貸してくださると嬉しいですm(_ _)m よろしくお願いします。 ホームページビルダーでcssレイアウトは可能ですか？ Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか？ tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは（ホームページビルダー上では）どのようにするのでしょうか？ あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか？ CSSでのレイアウトについて HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか？ ｜ ｜ ｜あああ｜ ｜ ｜ こういうレイアウトの物が ブラウザを小さくすると ｜｜ ｜｜あああ ｜｜ とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします CSSのレイアウトがFirefoxで崩れてしまう CSS初心者ですが教え下さい m(_"_)m 全体をCSSでレイアウトしているサイトを作成中です。 Blogのような3カラムで作成しております。 IEで表示すれば3カラムでレイアウトは崩れませんが・・・ Firefoxで表示するろ思いっきり崩れてしまいます （T_T) 1番右のボックスが右に表示さえれなく下に表示されてしまい、 フッダーが下ではなく、上にあがってきてしまいます。 サンプルページをアップしたので、IEとFirefoxを見比べて頂けると一目瞭然かと思います。 http://www.web.grrr.jp/bank/san/ CSSは3つで指定しています（テキストファイルでアップしてあります） http://www.web.grrr.jp/bank/san/styles-color.txt http://www.web.grrr.jp/bank/san/styles-site.txt http://www.web.grrr.jp/bank/san/styles-width.txt CSSハックは、あまり使いたくないので、CSSのタグを何とか修正して、 Firefoxでも綺麗に表示させたいのですが・・・ 修正箇所等がわかる方がいらっしゃいましたら、教えて頂ければ幸いです。 どうぞ宜しくお願いします m(_"_)m AIは使う人の年齢や市場にも影響する？人工知能の可能性 OKWAVE コラム HTML5をCSSでレイアウトする場合 section articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？ いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？ <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m ブラウザによってCSSレイアウトが崩れる 個人でサイトを運営しています。ビルダー等のソフトを使わず、ＨＴＭＬタグ打ちで作っています（独学です）。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってＣＳＳでレイアウトするようになりました。 普段ブラウザはＩＥ６を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Ｆｘを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にＩＥ７を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか（widthやheight、margin、paddingなどで間違いがある）、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。 テーブルレイアウトとは テーブルレイアウトとは,テーブルタグを表以外のコンテンツなどに使うことでしょうか？ http://okfood.digiweb.jp/index.htmlのコンテンツもテーブルレイアウトなのですよね。 このサイトの場合、同じような見た目にするにはdivを縦横に重ねて、ｔｈの毎度縦幅をCSSでかえて行うのでしょうか？ 大変過ぎてやっていられなくないですか？ WEBデザイナーはそこまでやっているのでしょうか？それとももっと便利な方法があれば教えてください。 SEO上も不利なのでしょうか？ table内の文字を軽視されるのでしょうか？ 【Ｗｅｂ作成者の方に質問】なぜＣＳＳレイアウトが普及しないのですか？ Ｗｅｂ製作会社就職希望の者です。 現在ＣＳＳを勉強し、そこそこわかってきました。ＨＴＭＬから余計なものを排除できますしＣＳＳは多くの装飾を可能にしてくれます。ＳＥＯ的にみてもtebleレイアウトは時代遅れだということがよくわかりました。しかし実際は大企業のホームページでも、ほとんどがtebleレイアウトで、ＣＳＳは文字の装飾等に使われるにとどまっています。なぜＣＳＳレイアウトが普及しないのでしょうか？Ｎ４やＩＥ４で崩れるリスクを無視できないからでしょうか？しかしそれをいったらFLASHなども使えませんよね。 プロの方、ぜひ本音を聞かせてください！よろしくお願いいたします。 ＣＳＳでのレイアウトについて 私は現在サイトを開設しているのですが、一から独学でHTMLを学んで分からない事があれば調べて作成してきました。 使用しているのはHTML、CSS、JavaSceript、SSIです。 見た目は自信あります。ただある程度知識がある方がソースを見たら”全然分かってないだろうな”というのがすぐにバレるぐらい酷いです。 調べて分かった事は積極的に取り入れてきました。 以前はHTMLのみで作成していたんですが、外部ファイルを使いJavaScriptやCSSをまとめています。以前に比べだいぶ簡潔なソースになり、汎用性も上がったと自負しています。 ただレイアウトは依然tableレイアウトです。 その為レイアウトをいじろうと思うと全てのファイルを修正しなければなりません。ファイル数は100を超えてます。 そこで詳しい方にお聞きしたいのですが、 ・tableレイアウトからCSSでのレイアウトに移行するのは難しい事ですか？ レイアウトって聞くだけで避けてきたので、いざ移行してみて今まで作成してきたデザインが崩れるのではないかと不安になってきます。 ・下記のサイトのようなレイアウトを最近結構見かけます。 http://www.yamaga-fc.com/ 私もいづれこのようなレイアウトにしたいのですが、これは何というレイアウトでしょうか？ 検索してもこのようなレイアウトの作り方が掲載されてるサイトが見つからなくて困ってます。 ヘッダーとフッターが100％。真ん中が80％ぐらいのレイアウト。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。 Web制作 レイアウトの決め方について Web制作 レイアウトの決め方について HTML、CSSでWebサイト制作をしているWeb業界未経験のものです。 実際サイトを作る時に、何をどこに配置するといったレイアウトを決めると思うのですが、皆さんは綺麗に見せるためのレイアウト方法や、何か型や、テンプレートのようなものを参考にしながら作っているのでしょうか？ 私は未経験からWebデザイナーへの転職用の作品を作っている最中なのですが、レイアウトはなんとなく自分の勘で決めて作っていたので、それだとあまり作品の完成度としてはイマイチになってしまう気がするのですが、何かアドバイス頂けると幸いです。 ちなみにお皿のブランドサイトを作っています。 cssレイアウトについて こんにちは。cssでデザインを作っているのですが、思うようにレイアウトができなくて困っています。 このような ┌─────┐ │ １ │ ├──┬──┤ │ ２│ ３│ └──┴──┘ レイアウトを作ろうとしています。 １の部分には画像、２の部分にはテキスト、３の部分にはtableが入ります。 しかし、３の<table>上の部分が２の<p>分下に下がって表示されてしまいます。 これを２と３の上の部分が揃うようにレイアウトするには、どうすればいいでしょうか？ 分かる方、教えてくださいませ。 よろしくお願いします。 テーブルレイアウトのデメリットとCSSのメリット 私は現在フリーランスのデザイナーをやっていますが、メインはDTPと商品撮影で、Webは余り得意じゃありません。 私がHP作成を覚えた頃はDreamweaver4で、未だにテーブルレイアウトで作成しています。 CSSも覚えようと本を買って勉強したのですが、どうにもメリットが感じられず現在に至ります。 ※恥ずかしながらHTMLもまともに読めません。 そこで質問なのですが、テーブルレイアウトはそんなにダメなのでしょうか？ 私が作るページは小規模の店舗相手が多いので多くても5ページくらいのサイトになります。 なのでデザインを変えるときはゼロからやっても何の苦にも思いません。 100ページとかのサイトばかり作ってれば意地でもCSSを覚えたでしょうけど。 今まであくまで「デザインだけ」と割り切ってきましたが、今後のことを考えると主流に乗るのが利口だと思います。 余り深い知識がないので、できるだけわかりやすく簡潔に説明いただけると助かります。 以上、回答お願い致します。 注目のQ&A 「You」や「I」が入った曲といえば？ Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市（長野県）在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター 業務ソフトウェア CAD・DTP会計ソフトグラフィックソフトグループウェアオープンソースその他(業務ソフトウェア) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル？プリンター・メール・LINE編 携帯料金を賢く見直す！格安SIMと端末選びのポイントは？ 友達って必要？友情って何だろう 大震災時の現実とは？私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ！負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる！ OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
