![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
グループ発表で、HPを作成することになりました。
HPのページ数は20ページあります。
チームメンバーが5人いるのですが、一人あたり4ページの作成になりました。
このようにグループ制作の場合CSSは、
パターンA:1人4ページ担当なので、1人が1つのCSSを作成する。(よって、全20ページで、5人=5つのCSSがいる)
パターンB:1ページごとに1つのCSSを用意し、20個のページに対し20個のCSSを用意する。
どのように制作していくのがいいのでしょうか?
共通部分のCSS項目(Hタグ、Pタグ)等を別に用意し、5人が取り込んでからの制作はできないのでしょうか?
前回質問させていただいたのですが、やはり、
・固定スタイルシートで共通部分(CSSのリセット等)を制作し各個人は優先スタイルシートで制作していくのが一般的なのでしょうか?
ご教授お願いします。
No.1ベストアンサー
- 回答日時:
うまく伝わらなかったようですね。
スタイルシートとHTMLを分けるのは、「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。
それは、
【引用】____________ここから
スタイルシートはHTMLのマーク付けを簡素化し、またHTMLをプレゼンテーションの負担から大きく解放する。スタイルシートは、著者とユーザに対し、フォント情報、配置、色等の文書のプレゼンテーションを制御する手段を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
詳しくは
★14 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
端的に言うと、構造とプレゼンテーションを分離することで、HTMLは極めて簡素になると共に、たった一つのスタイルシートを変更することで、すべてのページのデザインを一挙に変更できること。サイト全体のデザインを統一できる・・・・これが最大の利点となるからですよ。
ということは、グループで作業する場合、絶対的なリーダーが必要だということです。彼は、HTMLのマークアップ方法を定め、スタイルシートの製作を一手に引き受けることになります。たとえそれらの作業を分担するにしても、リーダーは一人であるべきですし、それが出来ないとグループで製作することは不可能です。
※HPのページ数は20ページあります。
これはありえません。HPとはヒューレッドパッカード社のことです。もしホームページと言う意味でも誤りです。もしサイト内で「ホームページに戻る」というリンクを作成したら・・何をさすのですか?
ホームとは、故郷/出発点と言う意味の英語です。ハウスではありませんね。本来はブラウザを起動したときに最初に表示されるページで、それから派出してウェブサイトのトップページ---サイトの出発点---というところまでは許容範囲でしょう。(利用する立場ならともかく、少なくとも製作する立場になると正確に使用しないと混乱します。)・・・20ページのウェブページで構成されるウェブサイトで、そのサイトの「ホームページ」はひとつとしてお答えします。
実際の手順を説明すると次のようなイメージになります。
1) サイトに存在する予定のページを種類分けします。
(例)--ある学校のウェブサイトを例にすると
トップページーー1
自己紹介や著者への連絡先、プライバシーポリシー、サイトマップなど事務的なページ
カテゴリーのトップとなるページ 科紹介/学生生活など
各カテゴリーのページ 上記の紹介
基本的には、この4種類になると思います。
2) HTMLのマークアップ方法を定めます。特にclass名はきちんと決めておきます。
<body>
<div class="header">
<h1>このページの見出し</h1>
<div class="abstract">
<h2>要約</h2>
<p>簡単な説明</p>
</div>
<div class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<div class="section">
<h2>本文</h2>
<div class="section">
<h3>項目</h3>
<p></p>
</div>
<div class="section">
<h3>項目</h3>
<p></p>
</div>
</div>
<div class="footer">
<h3>文書情報</h3>
<p></p>
<address></address>
</div>
</body>
とかのきちんとした雛形を作成します。
スタイルシートの合わせて作成することが多いです。
ここで記述したclass名は、HTML5では要素として独立します。
→HTML5 3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
→「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
きちんとした雛形が出来れば、あとはデータを流し込んでいくだけですから簡単でしょう。もちろん全員がHTMLの正しい知識を共有していることが必要です。すなわち、プレゼンテーションを一切考えずにひたすら文書構造を統一してマークアップできること。★この詐欺洋画最も重要★
→14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
あとは、スタイルシートを調整してきますが、最初の雛形とスタイルシートさえ出来ていれば、スタイルシートに手を加えることはほとんどありません。
車を製造するときも同じで、全員がいっせいにタイヤを作ったり、エンジンを作るわけではありません。そんなことしたら車は永久に完成しません。大事なことは、作業分担です。それが共同作業と言うものです。
>きちんとした雛形が出来れば、あとはデータを流し込んでいくだけですから簡単でしょう。もちろん全員がHTMLの正しい知識を共有していることが必要です。すなわち、プレゼンテーションを一切考えずにひたすら文書構造を統一してマークアップできること。★この詐欺洋画最も重要★
→14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
あとは、スタイルシートを調整してきますが、最初の雛形とスタイルシートさえ出来ていれば、スタイルシートに手を加えることはほとんどありません。
再度解説ありがとうございます。
やはり、HTMLの構造の理解が必要なんですね。
参考にさせていただきたいと思います。
No.2
- 回答日時:
データ入力(HTML入力)は分担できますが、デザイニングは1人でやらないと、ページごとに全く違うデザインになったりして、共通性というか、一貫性が保てないのでは?
なので、1人で作ったCSSファイルを全員が<link>するのがいいと思います。
---------
>パターンA:1人4ページ担当なので、1人が1つのCSSを作成する。(よって、全20ページで、5人=5つのCSSがいる)
> パターンB:1ページごとに1つのCSSを用意し、20個のページに対し20個のCSSを用意する。
>共通部分のCSS項目(Hタグ、Pタグ)等を別に用意し、5人が取り込んでからの制作はできないのでしょうか?
> ・固定スタイルシートで共通部分(CSSのリセット等)を制作し各個人は優先スタイルシートで制作していくのが一般的なのでしょうか?
全部、可能です。
すみません、上から目線的な表現になってしまいますが、知識、技術を持っているならどの方法を選んでもかまいません。
>全部、可能です。
>すみません、上から目線的な表現になってしまいますが、知識、技術を持っているならどの方法を選んでもかまいません。
いえいえ。とんでもないです。
大変参考になりました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- WordPress(ワードプレス) wordpress cocoon ヘッダーのフォント変換 2 2022/11/22 09:58
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- ホームページ作成・プログラミング web制作(HP作成について教えてください) 閲覧ありがとうございます。 今、WEB制作の勉強をして 2 2023/04/13 07:23
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- HTML・CSS CSSファイルの日本語コメントが文字化けしてしまう 3 2022/12/26 15:50
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
ブラウザの表示幅で100%指定が...
-
<div>で改行させない方法
-
HTMLに同じコードを一括挿入
-
HTML5の終端タグ「 />」について
-
可変長要素を中は左寄せのまま...
-
article、section、hgroup?
-
ヘッダーとフッターだけ背景を...
-
携帯サイト、ナノでのタグ編集...
-
【HP制作】2カラムを3カラムに...
-
<div id="container">の使いか...
-
CSSの作業分担可否につきまして
-
CSS でテキストの点滅をするに...
-
hタグの右横に画像を表示
-
PCサイトを携帯サイトに変換し...
-
h1のテキストサイズよりh2の方...
-
背景として画面の上下に画像を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
セクションをdivで囲むと見出し...
-
グリッドレイアウトで"auto-fit...
-
html5でheaderの中にnav
-
開閉式の隠し要素が一瞬表示さ...
おすすめ情報