Webサイトの横幅の修正について

Question

半年前に初めてWebサイトを作成しました。
文法チェックサイトを使いながら、正しくコーディングはしました。

Webサイトの見た目については、満足はしてませんが、少しずつ良くしていこうと思ってます。

しかし、Webサイトの横幅のサイズに問題があったと思ってます。

他の同じジャンルのWebサイトを見ると、どこも幅は950ピクセルくらいです。
私が作成したWebサイトは820ピクセルです。

このことから、横幅を950ピクセルくらいに修正しようと思ってます。

そうなると、画像サイズの修正や余白の調整、テキスト文字数の調整などを行う必要があると思います。

全てのページを修正するのは大変だと思いますが、ヘッダーやフッターは全ページで同じなので、思ったより大変じゃないような気もしてます。

Webサイトの横幅を修正するうえで、なにか気を付けることがあれば教えて下さい。

よろしくお願い致します。

ORUKA1951 · Accepted Answer

No.3です。
＞作り直しは辛いです・・・
　もちろん、作り直さなくて良いです。
　私も十数年前に作ったページはそのままです。(old)というフォルダーにそのまま移動してしまいました。それはそれで、歴史ですから
　幸いに、50ページあまりのデータがあるのですから、少しずつ修正して作り直せばよいです。その時にHTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考にして、divのclass名を指定しておくのも良いでしょう。DIVの用途としてとっても良い参考になります。
　section,article,aside,hgroup,header,footer,nav,figure,figcaptionの中から、それぞれの用途や目的に合わせてclass名を選択して、どうしてもそれだけでは【文書構造を表しきれない時に】DIVを使うつもりで作成すると良い勉強になるでしょう。

私の経験からウェブサイトにあるページなんて
・サイトやカテゴリーのトップになるインデックス,ナビゲーション
・自己紹介、プライバシーポリシー、サイトマップなど事務的なもの
・各カテゴリーの詳細ページ
　位ではないでしょうか？？少なくともそれらは文書構造は同じでもプレゼンテーションは変えたいと思います。ユーザーが混乱しないように配色などは同じでもデザインは変えることが多いでしょう。
　そのように整理すると、テンプレートとなるHTMLを３種類ばかり作成して、それにデータを流し込めばHTMLは完成です。

まあ、すでにサイトは出来ているのですから、気長に進めていけばよいでしょう。

ORUKA1951 · Answer

　以前も何度か質問されているようですが、まったく理解されずに、頂上に向かう道から外れて、沢に落ちて這い上がることも出来ない状態ですね。　DrFellさんが説明されているように、最も根本的なことは文書構造をマークアップしたHTMLと、その文書構造に基づいてスタイルシートでプレゼンテーションを指定するという「文書構造とプレゼンテーションの分離」という根幹部分を全く理解されていないようです。　画像が、その文書や要素の背景ではなくコンテンツであれば、IMG要素で、でマークアップされます。DIVで囲うことは本来はないはずです。　それが本文内で触れるべき一つの段落としてなら

とか

説明図

　とか・・　この画像をそれを含むセクションの幅に合わせたければ *.figure img{display:block;width:80%;margin:0.5em auto;} 　とデモすればよい。 ★もしその画像が背景でしたら、その要素のサイズが変わったらはみ出すだけです。 h1{background-image:url() 50% 50%;} 　カバーしたければ h1{background-image:url() 50% 50%;background-size:cover;} ＞他の同じジャンルのWebサイトを見ると、どこも幅は950ピクセルくらいです。私が作成したWebサイトは820ピクセルです。　ウィンドウ幅を変えてみましたか？？　スタイルシートが15個と言うのは、代替スタイルシートをつかっても普通はありえません。スタイルシートを使用する意味がありません。　分けるとしたら 1) 配置やサイズを指定するスタイルシート 2) 色を指定するスタイルシート　などでしょう。(1)のみ変更すれば、すべてのページのサイズが変更されます。加えて 3) 代替スタイルシート 4) 印刷用スタイルシート 5) mediaQueryで使用する他のユーザーエージェント用のスタイルシートが増えるくらいでしょう。　良く例にさせていただきのですが・・　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　で、ブラウザのメニューから、表示→スタイルシートと進みいくつかのスタイルシートを選択してみてください。HTMLには一切手を加えずにスタイルシートだけでデザインを完璧に変更できます。これが文書構造とプレゼンテーションの分離です。　ついでにウィンドウサイズを変更してみたり、　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　印刷プレビューをごらんになると、もっと良いでしょう。＞htmlファイル数は50くらいですが、cssファイル数は15くらいです。　半年前の私や、tracerさん、DrFellさんの、アドバイス(どなたも同じ事を言っている)を守っていれば、そんな悲劇的な状況にはならなかったのに。 ★デザインは一切考えずに、HTMLは文書構造だけを記述する　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★その文書構造を利用してスタイルシートでデザインする。　これがあって、はじめてデザインの自由度はもちろんですが、メンテナンスもとっても簡単になるのですよ。　上記で紹介したサイトのHTMLソースをごらんになると、誰でも項目やテキストの追加・削除・修正が簡単に出来ることがわかるでしょう。　半年前の出発点を間違ってしまったために沢に転落した・・這い上がるのは大変ですから、いっそのこと作り直したほうが良いでしょう。　

DrFell · Answer

>でも、CSSファイルは1つだけではありません。 >htmlファイル数は50くらいですが、cssファイル数は15くらいです。で、横幅に関わる指定を15全てにしているのですか？？？理解に苦しみます。 >htmlファイルの修正は必要ないのですか？はい、普通見栄えに関する指定は、ｃｓｓのみで行います。正しく分離できていれば、htmlは触る必要はありません。 >例えば、htmlに画像ファイルを書くときは、次のようにしております。

横幅を拡大する必要があるので、画像ファイルを修正するとともに、htmlのwidth="820"も950というように修正するのではないでしょうか？好きにどうぞ。ただ、width="820"は弱いのでｃｓｓに .main img{width:950px;} とでもすれば、一括で変わりますけどね。老婆心ながら、それ、ほんとにimgタグに値するものですか？タイトルの背景としての画像指定でしたら、imgタグは使いませんよ。 http://oshiete.goo.ne.jp/qa/7733892.htmlで一番まずい解答（わかっていない人が誘導し、すごく遠回り・迷子への道しるべ）をベストにされてますし、上記の質問内容を拝見すると根本原則を学びそこなっておられるように見えます。この先多難な道ですが、頑張ってください。＞ここでサイズの指示は必要ないのでしょうか？ごめんだけど、基本ができてないと、そこだけ解決しても、破綻してる気がします。これからもサイトを改良するなら、根本的に学び直した方がいいと思います。

DrFell · Answer

>全てのページを修正するのは大変だと思いますが、ヘッダーやフッターは全ページで同じなので、思ったより大変じゃないような気もしてます。

半年前にもcssの質問してましたよね？ｈｔｍｌ+ｃｓｓで構築してますよね？

全てのページからリンクされているｃｓｓファイル１つを修正するだけで全ページに反映されます。質問の意味がわからないのですが、どこがどう大変なのか、補足をお願いします。

Webサイトの横幅の修正について

No.3です。

以前も何度か質問されているようですが、まったく理解されずに、頂上に向かう道から外れて、沢に落ちて這い上がることも出来ない状態ですね。

>でも、CSSファイルは1つだけではありません。

>全てのページを修正するのは大変だと思いますが、ヘッダーやフッターは全ページで同じなので、思ったより大変じゃないような気もしてます。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　以前も何度か質問されているようですが、まったく理解されずに、頂上に向かう道から外れて、沢に落ちて這い上がることも出来ない状態ですね。