- 締切済み
web 画面レイアウト
web 画面レイアウト http://www.monkey-works.com/ こちらのwebサイトのように、画面サイズに合わせたwebサイトの作り方(width)の指定の仕方を教えて下さい。 最近このような作りのサイトをよく見かけますので、気になってまして。 何卒、お願いします。
- smiab
- お礼率50% (10/20)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞最近このような作りのサイトをよく見かけますので、 これは逆です。最近は、ホームページビルダーのようなソフトに頼る人が多くなったため、幅の狭いディスプレイや広いディスプレイに対応できないページを作る人が増えました。 日本最初のホームページ ( http://www.ibarakiken.gr.jp/www/ )をご覧になると、ウィンドウ幅は関係ないですね。 というのは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より が元もとの目的なのですからね。 Ｑ：なぜ、ウィンドウ幅に制約されるページが多いのか？ 一言で言うと ★HTMLを理解せずに、オーサリングツール--特に低俗なもの--を利用してページを作成するため でしょうね。下記にサンプル揚げておきます。 ↓このあたりからはじめれば、後で真実を知って全部書き直す心配はないかも はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) ★対策 1) きちんと正しいタグでマークアップすること(下記サンプルの<body></body>内参照 2) スタイルシートでデザインする。 ★サンプル HTML4.01Strict厳密型 ※タブを全角スペースで置換してあります。元のタブに戻してテストすること ※お約束で下記サイトでチェックしておきました。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- html,body{padding:0px;margin:0px;} body{ background-color: rgb(180,180,180);} h1{text-align:center;} div#top{ width:100%;background-color:blue;color:white; margin:0px;height:60px;border:solid 1px blue; } div#bodyText,div#info{ position:relative;width:60%;margin-left:auto; margin-right:auto;border: solid 1px red; background-color: white;padding: 2px 1em; } ul#nav,div.note{ font-size: 0.9em;position: absolute; top:0px;width: 22%;margin: 0px;height:100%; border: solid green 1px; } ul#nav{ display:block;padding:5px; right: 101%;border-color: blue; background-color: rgb(255,180,180); } ul#nav li{ padding:0px;margin:0px;display:block;list-style:none; } div.note{ padding:5px;left: 101%; background-color: rgb(180,180,255); } div.note h2{margin: 0.2em;font-size: 1.2em;} --> </style> <link rel="START" href="../index.html"> </head> <body> <div id="top"> <h1>見本</h1> </div> <div id="bodyText"> <h2>サンプル</h2> <p>ここから本文</p> <ul id="nav"> <li>目次1</li> <li>目次2</li> <li>目次3</li> </ul> <div class="note"> <h2>ノート</h2> <p>脚注</p> </div> </div> <div id="info"> <h2>文書情報</h2> <h3>更新履歴</h3> <dl id="document-version"> <dt id="first-published">First Published</dt> <dd>2010-01-28</dd> </dl> </div> </body></html>
関連するQ&A
- Word2013でWebレイアウト表示に関して
Word2013でWebレイアウト表示で文字数や行数を指定する方法はありますか？ 今レポートを作成しているのですがA4サイズで一行４０字×３５行の指定があり、 書いている時（印刷レイアウト？）では普通に指定通りになるのですが、 Webレイアウト表示にするとA４サイズにもならないし、文字数も行数も 全然合いません・・・ レポートはWebで提出するので、先生が見るならWebレイアウトになると思うのですが Webレイアウト表示にしても文字数や行数は指定出来るものなのでしょうか？ PCは全くの素人でして・・・ もしWeb表示でもA４サイズにして、文字数と行数を指定する方法があるようでしたら 分かりやすく教えてください、よろしくお願いします。
- ベストアンサー
- Word（ワード）
- web制作 css 画面レイアウト
お世話になっております。 http://www.tsuchiya-kaban.jp/menstop.cgi こちらのwebサイトは画面の中央にサイトがくるようにレイアウトされているのですが、ローカルナビ(カテゴリ部分)からリンクをたどると、 例えば、カテゴリから「ダレスバッグ」のリンクをたどります。 そうすると、画面に対してサイトが、左寄せになっています。 よくこのようなサイトを見かけるのですが、 どうしてtopページは中央寄せで、他ページは左寄せで制作しているのでしょうか? 特にECサイトでよく見かけるような気がします。 最近よく見かけるので、何か理由があってやっているのかな?と思っています。 どなたか宜しくお願いします。
- ベストアンサー
- HTML
- webのレイアウトに必要な技術
こんにちは。メディア系サークルに所属する大学生です。 サイト作りに興味があります。 Windows XPを使用しています。 flash、フォトショ、イラレは少し使えるようになりました。 htmlタグでのサイト作りも経験があります。 でも企業サイトのようなレイアウトにできません。 例えばタグうちでつくったもの↓ http://373.srv7.biz/ flashでつくったもの↓ http://bpro.ifdef.jp/forest.html これを↑こう↓するには？ http://www.au.kddi.com/ このようなレイアウトにはフレームが必要なように思いますが、 htmlでフレームをつかうのはもうタブーだとか？ 企業サイトのようなクオリティのwebページをつくるには どの技術を組み合わせればいいのでしょうか？ ちなみにdreamweaberも使ったことはありませんがパソコンには入っています。
- ベストアンサー
- Flash
- 画面にぴったりと収まるレイアウト
はじめまして。DW８を使い始めて間もないものです。 みなさんに質問があるのですが...。 レイアウトなのですが、自分で作成したWEBサイトが画面にぴったりと収まらなくて困っています。 たとえばヤフーは開くパソコンの画面や解像度によって画面いっぱいに収まるのに、なぜ私のWEBサイトはぴったり収まらないの？？どうすれば？？必要なものは？？ ヒントだけでも参考になるので、どんな情報でも良いです。 どうか宜しくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウト
CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか？ またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- Web制作 レイアウトの決め方について
Web制作 レイアウトの決め方について HTML、CSSでWebサイト制作をしているWeb業界未経験のものです。 実際サイトを作る時に、何をどこに配置するといったレイアウトを決めると思うのですが、皆さんは綺麗に見せるためのレイアウト方法や、何か型や、テンプレートのようなものを参考にしながら作っているのでしょうか？ 私は未経験からWebデザイナーへの転職用の作品を作っている最中なのですが、レイアウトはなんとなく自分の勘で決めて作っていたので、それだとあまり作品の完成度としてはイマイチになってしまう気がするのですが、何かアドバイス頂けると幸いです。 ちなみにお皿のブランドサイトを作っています。
- 締切済み
- デザイナー・クリエイティブ職
- ＧＯＬＩＶＥ5.0 レイアウト画面とプレビュー画面の文字サイズの差
ホームページを作成している時に、レイアウト画面で書いた文字の大きさと、プレビュー画面での文字の大きさが全く違うので困っています。 今は、プレビュー画面をマメにチェックしながら、文字サイズに気をつけていますが・・・ レイアウト画面とプレビュー画面の文字サイズの統一の仕方を教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう
CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更（縮小）すると右側のBOXがすべて左側の下に回り込んでしまいます。 できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。 色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。 また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか？ frameとかだと*で対応するみたいなんですが・・・ ひとまず、周り込を回避する方法が優先です。 どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }
- ベストアンサー
- HTML
- Androidの画面レイアウトがくずれます
同じサイズの画像を並べても、シミュレータで表示するとばらばらのサイズになってしまいます。 もう1ヶ月以上解決できなくて困っています。 写真はXMLベースで4つの画像を表示した結果です。 シミュレータでやってもほぼ同じ結果です。 元々の画像では、茶色と緑が同じ幅で、ピンクと青が同じ幅です。4つの画像とも高さは一緒です。 サイズの変更等はしてません。 GraphicalLayoutoは5.1inWVGA、シミュレータはWVGA854、Android2.3.3です ソースです。 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/left"/> <LinearLayout android:id="@+id/center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/left" android:orientation="vertical"> <ImageView android:id="@+id/top" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/top"/> <ImageView android:id="@+id/bottom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/bottom"/> </LinearLayout> <ImageView android:id="@+id/right" android:layout_height="wrap_content" android:src="@drawable/right" android:layout_toRightOf="@+id/center"/> </RelativeLayout>
- ベストアンサー
- Android
- エラスティックレイアウトがうまくいきません。
エラスティックレイアウトがうまくいきません。 横幅をemでサイズ指定しています。 うまくいかないのはIE6です。 ctrlキー + ホイールで文字サイズを小さくすると、 限りなく小さくなっていき、<img>タグで挿入してある画像（px指定）より 小さくなるとカラム落ちします。（当たり前ですが・・・） firefoxはmin-widthが指定できるので問題ありませんが、 IE6ではどう設定すればいいのかわかりません。 イメージはyahooみたいなエラスティックレイアウトです。 なにか良い方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
