• ベストアンサー

乱雑なCSSはどうにかしたい!!

最近自分のHPを作り直そうと思っています。 現在使用しているHPはHTMLとCSSで構成していますがCSSがどこの ダグに対応しているかよくわかりません 新しいページやダグを追加するごとにCSSの記述が増えていき おそらくまったく使ってないCSSもあるとおもいます。 このような状態を避けるためにHTMLとCSSの記述をわかりやすく管理しやすくしたいのですが いったいどのようにすればよいのでしょうか? 作り方やCSSとHTMLの関係の考え方などなんでもいいのでよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • -Kei
  • ベストアンサー率50% (151/299)
回答No.3

>どのような感じで計画をたたていらしゃるのでしょうか? >私はとりあえずイメージ先行でTOPページ作ってみてよかったら >本格的に作り出すって感じですが・・・乱雑になりやすいですよね 計画というかページ構成のイメージをしっかりもつことが重要です。 色とかは後でいくらでも変えられるので、両サイドのタイトルは<h2>にして、個々は画像で、この範囲にスタイルAを適応して・・・といったHTML側の構成をしっかりやりましょう。 私は本番用のファイルを作る前に、リハーサル(?)のつもりでファイルを作成しています。 その方法で本当に実現可能か、もっといい方法はないか考え直せるのでいいですよ。 最初は割と適当に、本番用のファイルにコピペする段階で#1のような書式に直せばいいです。

noname#23321
質問者

お礼

回答ありがとうございます。 画像の配置や文字を使うか画像を使うのは難しいです。 私自身あまり画像をうまく使うことができないのでマージンや パッディングがやたら多くなります。 まずじっくりHTMLを練ってみようと思います。 ありがとうございました。

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

その他の回答 (2)

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.2

ANo.1とかぶってしまいますが、 全てのページで使い回すものと 特定のカテゴリやファイルで使うものを分けてつくると 管理がしやすいです。

noname#23321
質問者

お礼

回答ありがとうございます。 CSSを別ファイルで用意してるのですから使い回しは基本ですよね 自分は結構、忘れてどこに使ってあるのかわからなくなって 書き足してました。ファイル管理もだんだん内容が増えてくると リンクのはり直しが面倒になり何がなんだかの状態です。

全文を見る
すると、全ての回答が全文表示されます。
  • -Kei
  • ベストアンサー率50% (151/299)
回答No.1

>新しいページやダグを追加するごとにCSSの記述が増えていき >おそらくまったく使ってないCSSもあるとおもいます。 こんな状態にしてしまったらCSS使ってる意味がないですね。 CSSで記述したデザインは使い回すのでページが増えてもCSSの記述自体はあまり増えないはずです。 基本スタイル・ヘッダー・フッター・左右・中央・パーツ コメントで区切って絶対に他の部分には書かないようにしましょう。 /* ヘッダー ---------------------------------------------*/ 特定のページでしか使わないようなもの(メールフォーム用とか)はファイルを分けるか、そのページの中に直接書きましょう。 一番重要なのが作る前に十分計画(設計)を立てることです。 これを疎かにすると必ず失敗します。

noname#23321
質問者

お礼

回答ありがとうございます。 >>基本スタイル・ヘッダー・フッター・左右・中央・パーツ >>コメントで区切って絶対に他の部分には書かないようにしましょう。 確かに今まではすべてひとまとめにして書いていました。 最近は一応コメントで区切っていましたがそれでもわけわからない状態でどうしよと思っていました。 とりあえず新しく作るときは区画ごとに区切って書こうと思います >>特定のページでしか使わないようなもの(メールフォーム用とか)はファイルを分けるか、そのページの中に直接書きましょう。 実際、すべてCSSファイルの中に記述していたのでまったく気がつきませんでした。 特定の用途でしか使用しないものは直接ページに記載するようにします。 >>一番重要なのが作る前に十分計画(設計)を立てることです。 どのような感じで計画をたたていらしゃるのでしょうか? 私はとりあえずイメージ先行でTOPページ作ってみてよかったら 本格的に作り出すって感じですが・・・乱雑になりやすいですよね

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

関連するQ&A

  • 外部CSSで作成したページの印刷について

    「外部CSS」で作成したページを、印刷プレビューしてみると 「HTML」だけ?の状態のような感じです。 「外部CSS」で作成したページを、CSSが反映した見た通りには、印刷できないのでしょうか? なにか、記述の追加をすれば、できるのでしょうか? または、参考サイトがあれば、教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSを使用したページレイアウト

    今までtableを使用してページを作成してきたんですが、tableをできる限り使用せずHTML+CSSのみでページを作成してみたくなりました。 しかしCSSに関しては、基礎的な仕組みと書き方がわかるくらいで、どのように構成すればいいのかわかりません。 あるサイトのソースを見たらDIVにclassを指定しているようでしたが、実際どのように記述されているのでしょうか? 書籍でもサイトでも何でも良いので、参考になりそうなものがありましたら教えてください。

    • ベストアンサー
    • CSS
  • CSSの無料サンプル探しています。

    友人にHP作成を頼まれました。 下記URLのサイトと同じような画面構成にして欲しいと頼まれました。 http://www.pasona.co.jp/ このサイトの構成(ページデザイン)と同じように出来る、無料でダウンロード出来るCSSのサンプルがありましたら教えて下さい。近いものでも結構です。 私のレベルはHTML・CSS基本知識がある程度です。 使用ソフトはDreamweaver 8です。 どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSのfloatを使用したHP作りについて教えて

    CSSのfloat(フロート)を使用したHP作りについて教えて下さい。 現在floatを使用してHPを作成していますが、リンクとフォルダ構成で悩んでいます。 floatを使用すると全ページにメニューを作成しリンクを貼ると思いますが、この場合絶対・相対どちらで貼るのが良いのでしょうか? またフォルダ構成についてですが、昔のようにメニュー事にフォルダ分けをした場合、相対パスでリンクを貼るとメニュー部分のパスがページ毎に変わってしまったりします。 floatでHPを作る場合、HTMLを入れるフォルダはこのフォルダと決めて全てそこに入れるのでしょうか? floatを使用したHPはメニューが一つ増えた場合でも全ページのメニューを作りなおさなくてはいけないと思いますが、みなさんどうやって管理しているのでしょうか? 参考になるページ等ありましたらそちらも教えて頂けると助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSファイルの管理方法でアドバイスをください。

    私はサイト制作初心者です。 現在、ページ数がおよそ30pのサイトをレスポンシブWebデザインにて制作しております。 とりあえず制作を・・・とおもい管理のし易さを無視してたった6つのcssファイルだけで構成しているのですが、横幅毎のcssファイルがとてつもなく膨大な記述量になってきました。 各ページ毎にちょっとした演出やデザインを入れていいたら、結果すごい記述量に・・・。 <現在のcss構成イメージ> import.css  ↑base.css  ↑device_1.css(数百行)  ↑device_2.css(数百行)  ↑device_3.css(数百行)  ↑device_4.css(数百行) レスポンシブWebデザインのサイトなので、各デバイス用のcssファイルをimport.css内に@import"●●"という形で1つにまとめ、htmlファイルにはlink relでこのimport.cssだけを記述しています。 一応、全ページ共通のタグをできる限りbase.cssにまとめ、各ページ毎の個別cssファイルは作らず、デバイス毎という形で一括で記述していきました。 そうすると、あれよあれよと各デバイス毎のcssがものすごい記述量でカオスな事になってしまいました。 当然といえば当然ですが。。。 そこで、cssファイルを各ページ毎に分けるべきかどうか悩んでおります。 色々ネットで調べたのですが、『cssは分ければ分けるだけ読み込み速度が遅くなっていく!』というのを知り、さらに調べると『記述量が多くても読み込みが遅くなる』という事も知り、もう一体どうしたら良いのだろうか?とさらに悩やんでおります。 読み込み速度を優先して現状のままの構成でいくのか・・・ 管理を考えて個別にしていくのか・・・ お詳しい方々、ぜひアドバイスをください! お願いします!

    • ベストアンサー
    • CSS
  • CSSの呼出方法と表示速度 (SEO)

    . HTML内で外部CSSファイルを呼び出す方法について、表示速度の面で記述を迷っ ている部分があります。 例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウ ェブサイトを仮定するとします。 そして、3つのページに共通するCSSをcommon.css それぞれのページに特有なCSS をindex.css、article.css、product.css とするとします。 【方法A】 HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについて<link > で記述し、index.css、article.css、product.css についてはその下に条件分 岐で記述して、CSSファイルを呼び出していく 【方法B】 HTMLのヘッダー部分をテンプレートパートにせず、ホームのページのHTMLにcommon.css 及びndex.cssを<link>で2つ記述、記事ページのHTMLにcommon.css及びarticle.css を<link>で2つ記述、製品ページのHTMLにcommon.css及びproduct.cssを<link>で 2つ記述、してCSSファイルを呼び出していく。 Bの方法は管理の手間はかかることになりますが、テンプレートパートを使い条 件分岐をするAと条件分岐をしないBで、各ページで表示速度に違いは出るもの なのでしょうか .

    • ベストアンサー
    • CSS
  • htmlとcssを分けたい。

    http://www.7key.jp/hp/_ex/9.html このページの様にhtmlとcssを使い左右に均等な余白を作りたいのですが、 このページの記述方法だと、htmの中にcssが書き込まれています。 このページの記述方法と同じで、 この記述を外部cssにとして分けたいのですが、 方法、出来れば、ソースを書き込んで回答してくれるとありがたいのですが、 どうか、宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTML5.0、CSS3.0を今から学ぶべきか?

    HTML5.0、CSS3.0を今から学ぶべきかをメインに4つ質問させて下さい。 質問1)----------------------------------- HTML5.0とCSS3.0はもう公式に使用できるのですか? 質問2)----------------------------------- ブラウザの対応状態はどうなのでしょうか。 質問3)----------------------------------- ホームページ制作のためだけと考えた場合、 XHTMLの理解を深める or HTML5.0を新たに学ぶ 、どちらのほうがいいでしょうか。 現在広く普及しているCSSの理解を深める or CSS3.0を新たに学ぶ 、どちらのほうがいいでしょうか。 私が使えるプログラムは、 XHTML(XHTML1.0) 普通のCSS JavaScript php 全て中級手前ぐらい(自分の勝手な判断で)のレベルです。 質問4)----------------------------------- 33歳 男性 IT業界:未経験 現職:事務職をメインに、会社全体のPCのメンテナンス、HPの管理 1年後ぐらいにHP制作のプログラマーとして転職したいと思っているのですが、無理ですか? アウトプットとしての作品はこれから作ろうと思っています。

  • HTMLで記述できるものをCSSにする必要性って?

    HTMLで記述できるものをCSSにする必要性ってあるのでしょうか? Webデザイナーさんは、よく他人が作ったHPを見て、 汚い作り方だとか、おっしゃってますが、 エンドユーザーには ソースなんかみないし、 そんなの関係ないような気がして仕方がありません。 スマートに書けるとか、 そんなんじゃなくて、 表示が早くなる、とか、 対応していないブラウザに 対応できるなどの 具体的理由を教えて頂けるとうれしいです。 自分のHPでテーブルをよく使ってるのですが、 テーブルカラーの設定でCSSを使ってみたいのです。 なんか喧嘩口調にちょっとなりましたが、 知っている方宜しくお願いします。

    • ベストアンサー
    • HTML
  • PHPとHTMLとCSSの関係性について

    PHP初心者です。 PHPとHTMLとCSSの関係性について教えてください。 今回、サイトをHTMLからPHP化しようと思っています。 (サイト管理が楽になると思ったため) 今作ってあるサイトは、外部CSS+XHTMLで作成していますが、 そのHTML内に <? include"../../side.html";?> とPHPの実行を記述した場合、 別ページとして用意した ../../side.html は外部CSSにデザインが左右されるのでしょうか? それとも ../../side.html の中でデザインを全て記述しなければいけないのでしょうか? こういう基本的過ぎる内容はどこのサイトにも初心者でも分かるように詳しくは書いてありませんでした。 よろしくお願いします。 ---------------- 48時間ぶっ続けで、色々調べてみました。 そして、PHPはサーバー側での処理でHTMLを吐き出すらしい、といことがわかりました。 (確認作業で自己PCをサーバーにするとかの必要も...) CSSとHTMLは確かブラウザ側での処理ですよね? 違っていたら教えてください。 もしそうなら、 普通に1ページの外部CSS+HTMLを作る→PHPで切り張りする これだけで、あとは切り取ったページの更新だけで全ページに更新を表示できるし、PHPって便利だなーと思います。 基本的な事が全く分かっていないおバカさんですが、よろしくお願いします。