• 締切済み

[WEB制作] フルサイズwidthに関して

こんにちは 今webサイトを制作しています。 フルサイズの幅で設定したデザインを想定して、コーディングをしようとしています。 そこで、width: 100%; 以外の方法で、横の幅をフルスクリーンにする方法を教えていただけたらと思います。 実は以前に作ったサイトがwidth: 100%;で制作して、iPhoneで確認するとどうしても形が崩れてしまいます。 ご教授のほど、よろしくお願いします。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

画面サイズを参照して巾いっぱいで表示するのはwidth:100%で間違いありません。 その表示幅を基準に、%で指定していくことです。 ブロックのサイズは、直近のstatic以外のコンテナブロックの巾を参照すること。 ブロックのサイズはpadding辺の内辺であること。 を理解していれば良いでしょう。  その要素が何であるか--ブロックなのかインラインなのか、置換要素なのか非置換要素なのか、分離ボーダーモデルなのか否かなどによってサイズの決定方法は変わります。  まあ、paddingを使用しないこと、border巾は固定なので小さな画面ではその巾を見越して配置することに注意すれば良いでしょう。  その上でmin-widthとmax-widthを活用します。 [例] CSSのレイアウトについて - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7847891.html#a3 )  また、スマホに関してはCSS3のメディアクエリが使用できますので、それでスタイルを切り替える技が使用できます。

yutan0106
質問者

お礼

返信遅れましたが、色々と参考にさせていただけました。 今後ともご教授のほど、よろしくお願い申し上げます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • web制作について教えて下さい。

    デザイン事務所を自営しています。 お客様から頼まれて、Webサイトを作りました。Dreamweaverと Fireworksで作成して、必要な部分はcssやソースを書き直して修正しました。 アップしてしばらくして、お客様のところにweb制作専門の業者が訪問 してきて、サイトを見て次のように直した方が良いといわれたそうです。 「画像ばかりでヒットしにくいので、コーディングをして テキスト中心にした方が良い。h1要素を入れないといけない。 我が社ならHTML5とcssでコーディングします。」 自分たちの会社で再制作させろという案内のようですが、いろいろ専門的な 言葉を並べられて、お客様は何のことかわからないのでこのままでは見れなく なるのではと思い、相談してきました。 私はどちらかというとグラフィックデザインが得意なためサイトを作る時も 画像が中心となってしまいますが、それでもcssやソースで見やすくなるように しているつもりです。Dreamweaverで制作したのとコーディングするというのは どういう違いがあるのですか。(そもそもWebデザインとコーディングとはどう 違うのでしょうか。) とりあえずはwebサイトの閲覧と中のページのフォーム送信は正常に動いて いますので問題ないのですが、お客様に不安を感じさせなくしたいと思います。 サイト制作について初歩的なことですが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • widthを100%にした時の画面調整について

    こんにちは、 WEB制作に関する質問です。 今制作しているサイトをフルスクリーンにしようと考えています。 #wrapper { width: 100%; height: 任意の値 } また#header、#content、#footerなどにもwidth: 100%の値を同様に入れました。 その中にdivなどのブロックを置いてデザインをしました。 そこで、疑問なのですが、わたしが使っているPCの画像解像度が1366/768です。 この解像度に合わせて作っているので、自分のPCでは問題なく、画面に表示されますが、 例えば他の解像度のPCや、あるいは他のディスプレイのサイズだと、形が崩れていたり、自分のパソコンで映っていた時のものと見栄えが変わってしまいます。 そこでディスプレイや解像度が変わっても、それに合わせてサイトが自動で調節してくれるような、コード(例えばjavascript)のようなコード記述ってあるのでしょうか? 画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。 もしあれば、教えていただきたいと思っています。 よろしくお願いします。

    • 締切済み
    • CSS
  • Web制作初心者です。

    Web制作初心者です。 今回ある個人飲食店からサイト作りを頼まれて作ってたのですが、ヘッダーのイメージを 変えて欲しいということで変更しようと思うのですが、最初作成した順番的には、 1.イラレで枠組みレイアウト 2.photoshopでその枠組みに沿って、レイヤースタイルとか写真とか加工して当てはめる。 3.それを元にコーディング という形にしたのですが、変更という行為自体初めてでどこから手をつけたらいいのかわかりません。 コーディングの段階でサイトが出来た段階での微調整で幅とか数pxとかいじっているので、 自分的には、Webを画像で落としてそれを元にガイド引いて、変更画像を作って入れ込むという感じなのかな? と勝手に思ってるのですが・・。 普通はどういう順番が正しいのでしょうか?

    • ベストアンサー
    • CSS
  • web制作、料金設定

    フリーランスでweb制作をしております。 知人伝いの小規模サイトを制作してきたのですが、料金設定をしっかりしていなかった(というか個人や小規模店舗を相手にしていたため、高額は取れなかった)ため、改訂しようと思っております。 産休だったのですが、生活が落ち着いたので本格的に仕事を増やすためです。 ウェブ制作は5年程、はじめはコーディングメインだったので、デザインを担当し始めたのはここ2年ほどです。 ~コーディングのみ~ トップページ 1万円 サブページ新規1P 5000~7000円で検討中 サブページ流用1P 3000円(テキスト・画像差し替えレベル) ~デザイン・コーディング~ ランディングページ1P 5万円 ~デザイン~ 静止画バナー1点 3000円 この設定は安いでしょうか、高いでしょうか。 フリーランスの知人はグラフィックが多いため、参考にご意見いただきたく思います。 よろしくお願いいたします。

  • ウェブ制作者に求められるスキルに、、

    あるサイトで見た求人票に 「業務内容:ウェブ制作(HTMLコーディング)」 とあって、求められるスキルに 「HTMLコーディングで300~500ページ以上の制作経験のある方」とありました。 詳細をきくと、1つのサイトで1人で300~500ページのコーディング経験とのことでした。 ”ある程度の規模のサイトを正しいHTMLで制作できる人。” という意味かと思うのですが、 ページ数がそんなに重要なのかいまいちわかりません。 求人を出していた会社自体はいい仕事していそうな雰囲気だったので なおさらこの「300~500ページ」の真意が気になります。 どう思いますか?

  • Webディレクターの制作実績とは?

    Webディレクターの制作実績とは? ディレクター経験者ですが、ディレクターとして初めて転職するにあたり あるWeb制作会社の面接の際に、「制作実績をお持ち下さい」と連絡をいただきました。 もともとデザイン、コーディングをやっていて その延長線上で今のディレクター職をやっていますが、 面接でデザインの制作実績って必要なんでしょうか?(まったく必要ではないとは思いますが) それともディレクターとして「これまでやってきた実績をお持ちください」 と言う意味なんでしょうか? その場合、制作実績と言うのはどういう物があれば良いのでしょうか? よろしくお願いします。

  • webプログラマーとwebデザイナーの違いは?

    webサイト制作の仕事に興味があります。 しかしデザインはあまり得意ではないため、webプログラマーになると安易に考えていたのですが、デザイナーとプログラマーの違いがよくわからなくなり悩んでいます。 こちらのログで簡単な違いについての回答を見ましたが、モヤモヤしているので質問します。 web制作の仕事は、デザイナーがデザインしたレイアウトをプログラマーがコーディングする、というふうに書いてあるものがありましたが、求人を見るとデザイナーでもコーディングの知識必須とよく書いてあるため、webプログラマーの仕事とは一体何なのでしょう。 プログラマーは構築が仕事とも見ましたが、構築とはコーディングのことなのでしょうか?

  • WEB素人でもHTMLメルマガを制作する方法

    会社からWEB担当者を任命されました。手始めに、HTMLスタイルのメルマガの配信をするよう指示を受けたのですが色々調べた結果、ある程度コーディング知識がないと制作は難しいとの事でした。 そこで(1)WEB会社にHTML制作の見積り (2)Web業者からのご意見をまとめて上司に進言したのですが、聞き入れてもらえず、独学でコーディングを勉強するよう言われてしまい困っています。ちなみに弊社にはITやWEBデザイナーはおらず、ホームページは全て外注制作の形を取っています。素人でもHTMLメルマガを制作できるソフトやサイトはありませんでしょうか?アドバイスいただけるとありがたいです。

  • Webサイトの制作期間

    Webサイト制作に関して色々教えてください。 私は専門卒業したばかりで、Webサイトを一通り作れる程度(基礎)は勉強しています。 会社に入って、ページ数がざっと数えて30以上の自社のECサイトを2日で制作という指示が出ました。 ちなみに、 ・設計 ・デザイン ・コーディング ・素材制作 ・商品ひとつひとつに注文フォームを設置するプログラミング(独自の項目沢山あります) ・テスト 等の完成までの全ての工程を行うのは私一人です。 もちろん新卒の私には人脈も無ければ、実務経験もありません。 ちなみにECサイトなので、商品の写真撮影もちょこっとやりました。 設計や説明に前々から3日程度かけています。 「それじゃああと2日で作っていって」 と残り2日で1からHP制作の開始です。 一瞬「え?」と自分の耳を疑いましたが、「できません。」とはいえず・・・。 案の定間に合いませんでした。 しかも途中で、変更・追加などばかりです。 もう完成するわけがないと半分落ち込み気味です・・・。 あげくのはてに、サイトを一時閉鎖だと言われてしまいました・・・。 私が作るのが遅いだけでしょうか・・・? 実際プロの方ってどれくらいの規模のHPをどれくらいの期間で制作するのですか? また、デザイン担当・コーディング担当などチームで作りますか? おそらく会社や個人の能力によると思いますが、あくまで参考ということで教えてください。

  • photoshopでのwebパーツ制作がうまくできません。

    現在、webデザインについて勉強中です。 HTML&CSSでのコーディングは独学ですが何とか分かるようになりました。 でも、肝心なデザインの方がイマイチできません。というか、photoshopの使い方が分からず、イメージしたものを形にでないのです。。。 photoshopでwebデザインするときに参考になるようなサイト、又は参考書などを紹介していただけないでしょうか。 photoshopでやりたいことは以下のとおりです。 ・ナビ(ボタン)を作りたい。 ・素材集等を編集してイメージ画像が作りたい。 ・ヘッダ、フッタを作りこみたい。 ・webデザインのレイアウトがやりたい。 不躾な質問で申し訳ありませんが、なにとぞよろしくお願いします。

このQ&Aのポイント
  • Bluetoothアダプタで手持ちのBluetoothイヤホンを接続できません。接続方法を教えてください。
  • LBT-UAN05C2/N Bluetuuth USBアダプターを購入しましたが、Bluetoothイヤホンとの接続ができません。接続方法を教えてください。
  • Bluetoothアダプタを使ってBluetoothイヤホンを接続したいですが、うまくいきません。接続方法を教えてください。
回答を見る

専門家に質問してみよう