CSSで簡単に早くページを作成・デザインしたいと考えているのですがCSSを勉強したことが無く、どう勉強をしようか悩んでいます。


お勧めの勉強方法ややり方や参考ページ / CSSを導入するに当たっての注意点がありましたら教えてください。

<< これからやりたい事 >>

●テンプレート(CSS)をダウンロードして改修後オリジナルのCSSを作成する。

●オリジナル構造のCSSにデザイン(フリー画像やアイコン、外注した画像等)を入れ込み独自のページを作成する。

●デザインのいいテンプレートがある場合、作成している人に直接話をして改修後使わせてもらう。

<< 現実問題点 & 知りたいこと >>

●少しいじると一気に形が崩れるためとても難しそうに見える。

●CSSテンプレート改修のコツ(使われている命令は以外に限られているような気がするのですが、、)

●CSSを導入する際に抑えておきたい点

●HTMLと組み合わせる時に注意する点。

●早く・良質のページを作成するコツ

ブログの使用は考えていません。

お手数をおかけしますがよろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/09/06 13:59:25
  • 終了:2008/09/13 14:00:02

ベストアンサー

id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332008/09/06 15:05:14

ポイント20pt

まず、気をつけていただきたいことは、

  1. CSSでできることには限界がある
  2. OSやブラウザによって見た目が変わる場合がある

ということです。


たとえば、我が家がリリースしている「ぱふぅ家のホームページ」は、CSSでプルダウンメニューを実装しているのですが、実はFlashで作った方が簡単で安定します。こうした動的なデザインはCSSはOSやブラウザの違いによる影響を受けやすいのです。

以前はFlashのメニューを置いていましたが、実験的にCSSにしています――動きがおかしかったらご指摘ください(苦笑)。


「テンプレート(CSS)をダウンロードして改修後オリジナルのCSSを作成する」という方法もあるのですが、CSSの限界を知らないで他人のコードをいじろうとすると、「少しいじると一気に形が崩れるためとても難しそうに見える」となってしまいます。


「CSSでデザインをする」という発想ではなく、「どんなデザインにしたいか」を決め、それがCSSでできるかどうかを調べることから始めてはいかがでしょう。

そこで、やりたいことから逆引きができるリファレンスとして、下記の書籍をお勧めします。

HTML+CSS逆引きクイックリファレンス―HTML4.01&CSS2対応 for Windows & Macintosh

HTML+CSS逆引きクイックリファレンス―HTML4.01&CSS2対応 for Windows & Macintosh

  • 作者: 森 理浩
  • 出版社/メーカー: 毎日コミュニケーションズ
  • メディア: 単行本


ある程度CSSの“癖”が分かってきたら(この時点で使うプロパティは20以下に絞られてくると思います)、ご自身が目指すデザインに似たサイトを探し、そのCSSを改造することに挑戦してみましょう。

そのときは、以下のようなテンプレート集が参考になるでしょう。

id:aiomock

とても参考になります。ありがとうございます。

2008/09/06 20:13:07

その他の回答(4件)

id:nake No.1

nake回答回数87ベストアンサー獲得回数02008/09/06 14:17:45

ポイント20pt

無料のブログを使えるところで、ダミーでブログを作って、そのCSSを読むことで、CSSの勉強をするのが一番良いと思います。SeesaaBlogとかがよいと思いますよ。作りたいのとにた物を選んで、そのCSSを解析するという手段で勉強できます。

id:aiomock

ご回答ありがとうございます。参考になります。

2008/09/06 14:24:00
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332008/09/06 15:05:14ここでベストアンサー

ポイント20pt

まず、気をつけていただきたいことは、

  1. CSSでできることには限界がある
  2. OSやブラウザによって見た目が変わる場合がある

ということです。


たとえば、我が家がリリースしている「ぱふぅ家のホームページ」は、CSSでプルダウンメニューを実装しているのですが、実はFlashで作った方が簡単で安定します。こうした動的なデザインはCSSはOSやブラウザの違いによる影響を受けやすいのです。

以前はFlashのメニューを置いていましたが、実験的にCSSにしています――動きがおかしかったらご指摘ください(苦笑)。


「テンプレート(CSS)をダウンロードして改修後オリジナルのCSSを作成する」という方法もあるのですが、CSSの限界を知らないで他人のコードをいじろうとすると、「少しいじると一気に形が崩れるためとても難しそうに見える」となってしまいます。


「CSSでデザインをする」という発想ではなく、「どんなデザインにしたいか」を決め、それがCSSでできるかどうかを調べることから始めてはいかがでしょう。

そこで、やりたいことから逆引きができるリファレンスとして、下記の書籍をお勧めします。

HTML+CSS逆引きクイックリファレンス―HTML4.01&CSS2対応 for Windows & Macintosh

HTML+CSS逆引きクイックリファレンス―HTML4.01&CSS2対応 for Windows & Macintosh

  • 作者: 森 理浩
  • 出版社/メーカー: 毎日コミュニケーションズ
  • メディア: 単行本


ある程度CSSの“癖”が分かってきたら(この時点で使うプロパティは20以下に絞られてくると思います)、ご自身が目指すデザインに似たサイトを探し、そのCSSを改造することに挑戦してみましょう。

そのときは、以下のようなテンプレート集が参考になるでしょう。

id:aiomock

とても参考になります。ありがとうございます。

2008/09/06 20:13:07
id:ingot07 No.3

ingot07回答回数11ベストアンサー獲得回数02008/09/06 15:09:04

ポイント20pt

はじめに|CSS HappyLife

http://css-happylife.com/log/cssbeginner/000094.shtml


参考URLの、「CSSビギナー向け」カテゴリがお勧めです。

サンプルを使用して、簡単なレイアウト作成が学べるので、初学の頃はお世話になっていました。

id:aiomock

ご回答ありがとうございます。

2008/09/06 20:13:20
id:omusubi69 No.4

omusubi69回答回数5ベストアンサー獲得回数02008/09/06 16:12:23

ポイント20pt

CSSを作成するのにまず考えるのは外部ファイルに書くか、内部(htmlファイル)に直接書くか、その両方を使うかです。

どちらがオススメというのは特にないですが、私は外部ファイルに書いています。

内部に書くとそのファイル内のタグが長くなって見にくくなるのが嫌いだから外部を利用しています。

外部にはリンクなど考えなければいけないし、変更するときにhtmlファイルとcssファイルの二つを開かなければならないという不便さ?もあります。

自分が使いやすそうな方を利用するのが良いのではないでしょうか?

たぶん学校などでは外部で教えられていることが多いと思います。

しかしCSSを作成する時に一番重要なのはブラウザによってずれるって事ではないでしょうか?

IE6とその他のブラウザとのずれは・・・結構大変です。

現在IE6を使っている方が一番多いですが、Web標準により近いのはFireFoxやOperaなどといわれています。

仕事で利用などされるのであれば、出来る限り多くのブラウザでずれないようにしないといけません。

これはcss hack等で検索してもらえれば出てくると思います。

参考にhttp://d-lover.com/css/hack.shtml

Webページの印刷もいずれでてくる問題点になると思います。

このcss hackと印刷の問題は勉強しておいた方が良いと思います。

早く良質のページを作るには一番に慣れです、、、

その次ならどこかのファイルにベースを書いておきコピーペーストするとか、自分でテンプレを作るみたいなものです。

自分がよく使うコードは結構決まってくるので(癖みたいなものですね)


余談ですが、IE6が遠くない未来に消えていくだろうと予想できるのでIE6は無視してもいいかも、、、

IEの次期ブラウザIE8はWeb標準だそうです。

今IE6を主に作ってるサイトは・・・大変でしょうね

id:aiomock

ブラウザにより変わるとは知りませんでした。ありがとうございます。

2008/09/06 20:13:43
id:hirotie No.5

hirotie回答回数25ベストアンサー獲得回数12008/09/06 18:02:31

ポイント20pt

HTML作成ツールの

HTML Project(フリー)

を使用されてはどうですか?

これは、CSSファイルを読み込むことによって、それぞれの要素設定が、どういった視覚的な

影響を及ぼすのかが、直感的に確認できます。

これで、テンプレートをコピーして読み込んでみて、色々といじって見ればいいんじゃないですか。

すべての技術は習うより慣れろだと思いますよ。

id:aiomock

ありがとうございます。試してみます。

2008/09/06 20:14:45

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません