ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

WebデザインコミュのCSSの勉強法などについて教えてください

  • mixiチェック
  • このエントリーをはてなブックマークに追加
今WEBデザイナーを目指しているのですが、
実際の会社では、SEO対策などでどこまでCSSを使っている
のでしょうか?どのくらいのスキルがあれば会社でやって
いけるか、お伺いしたいです。

私はCSSは文字などの装飾くらいしか使ったことが無かったので今猛勉強中なのですが、元々プログラミング類が苦手なせいかなかなか理解が出来なくて頭を抱えています。
本や参考サイトのCSSのソースコードを見ても完成図が想像できないというか、marginやらpaddingが出てくると、どこをどう指定しているのか「????」状態です(;_;)

しかし、せめてハイブリッドデザイン(テーブルは使うが、レイアウト・装飾類はほとんどCSS)だけでもできるようになりたいと思い、CSSをうまく使っているサイトのソースを見たり、今は自分がテーブルタグで組んで使った昔の作品を、本やネットを見ながらCSSを使って組み直してみたりという勉強法をしているのですが、どうも自分のやり方で合ってるのか間違ってるのか、どこまでCSSを使ってどこでは使わなくていいのか・・・などがイマイチ分かりません。。。

自分のやっている方法が最良の方法かが良く分からないとう感じです・・・。「あれ、ここはdivいるの?いらないの?」とか、ここはテーブルを使うべきかCSSを使うべきか・・・とかいちいち迷います。何かいい勉強法や、みなさんがCSSをマスターした方法をアドバイス頂けないしょうか?

あと、質問が多くなってしまって申し訳ないのですが、
みなさんはCSSを多用してコーディングする時にどうされてますか?DreamWeaver MXだとちゃんと表示されないし(プレビューしたら見れますが)私はメモ帳でCSSを開いていじりながら
Dream Weaverでhtmlをいじってプレビューで確認・・・という感じです。なんか非常に効率が悪い気がするんですが、プロの方はどうやってらっしゃるんでしょうか?
会社などではスピードが求められそうですが。。。

どうかアドバイスよろしくお願いしますm(_ _)m

コメント(6)

DWはサイトのリンク管理とテキストの置換ぐらいにしか
使ってないですね。CSSはメモ帳などで書いてます。

marginやpaddingはCSSじゃなくても使うのでこれがわかって
いないということ基本からちゃんと勉強した方が良いですよ

テーブルはあくまで表なのでレイアウトには一切使いません。
練習法としては数こなすしか・・・。
私はハイブリッドもCSSオンリーもどちらもやりますが、
CSSはたけぽむさんの言うとおり
「数こなす」のが早道かもしれません。

私はDreamWeaverを使っていますが
CSSはDW上で手打ちしているほうが多いです。
そのほうが早くてきれいにまとめられるので。
DWはあくまでもツールだから、お好みだとおもいますが、
機能に頼りすぎてコードの意味をわからないまま
使ってしまうなら、それはやっぱりよくないのかな。
MarginやPaddingはTableでも指定するものだし・・・
Web Designer ではないのでコメントできるところだけ.

margin と padding については,慣れるまで常に border とか背景画像を設定しておくと良いと思いますよ.

CSSを使ったデザインのコツ2
http://www.fromdfj.net/html/usecss2.html
margin と padding のところを見てみましょう

まだ現状ではブラウザによって表示が違うので,そういった情報を集めておくのも重要です.以下参考サイト.

Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/

Web制作板Wiki
http://web2ch.s31.xrea.com/

CSS をどこまで使うかについては,ブラウザによる表示の違いや,管理のしやすさなども絡んできます.理想的(論理的)なCSS使用との葛藤や妥協があります.まあ,最初はそんなに難しく考えずに,雑誌ならここは表にするなってところは table で,それ以外は CSS でレイアウトすることを目指せば良いのではないでしょうか.

div は,division の略,つまり区画(仕切り)なので,おおまかなまとまり毎に区分けしたい時に使うという感じで良いかと思います.左側はメニュー区画だとか,右側はコンテンツ区画だとか.レイアウトしやすいように区分けといった感じで.例えば,MT(Movable Type)は header だとか body だとか footer 区画が設けられていますよね.

開発環境については,私はプログラマ側の人間なので,Emacs を使っていますが,これは難しいでしょう.でもメモ帳はあんまりだと思うので,TeraPad なんかはどうでしょうか.

TeraPad
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

それとか firefox 上で動く支援プログラムを使うのもお勧めです.

Web Developer 0.9.3 日本語版
http://www.infoaxia.com/tools/webdeveloper/
htmlにしろCSSにしろやはり数をこなすのと、数をみることに限るのではないかと思います。基本的にソースは見れますからね。
ソースはネットにも多数ありますが、リファレンス本は一冊手元に持っておいた方がよいかと思います。

私もDWを使っていますのでDWは否定しません。効率的にCSSを作成できます。ただそれぞれの属性等を理解することが目的なら確かに手打ちの方が速いかもしれません。

MXはCSSレンダリングがまだまだです。MX2004で結構かいぜんされていますので、アップグレードをおすすめします。ってかUSではすでにDW8が発表になっています。多分CSSレンダリングも向上しているものと思われます。ぜひアップグレードをするべきだと思います。

ご存知かどうかしりませんが、CSSレイアウトはhtmlの文書構造を理解した上での話で単にデザイン要素をCSSに渡しただけの話ではありません。SEOを考えるならむしろhtmlの文書構造もきちんと把握しておいてくださいね。
皆様、早朝からたくさんのレスありがとうございますm(_ _)m

>カルロス TSUJIMOさん
ほんと人それぞれですよね・・・。
そうおっしゃるお気持ち良く分かります。
愚問ですみませんでした。。。

>たけぽむさん
そうですね、やはり数をこなすしかないですよね。。。
そう言われるだろうなとは思っていました・・。まだまだ色んなサイトなどのコードを見たりして研究して行きたいと思います。

>りえぞうさん
marginやpaddingはtableでも使うのはもちろん知っているのですが・・・。CSSで若干入り組んでくるとごっちゃになってしまって。私もCSSでDWは使っていませんが、テーブルを使うときにpaddingとか打つのではなく、DWで「間隔」「余白」とかの欄に数字を入力しちゃうのが良く無いんですね(>_<)
もっと勉強します☆

>finさん
具体的なアドバイスどうもありがとうございます。
borderを出して数字をいじっていくと分かりやすいですね。早速実践します!色々なサイトも教えてくださって感謝します。やはりCSSだけじゃなくそれを取り巻いている現状なども勉強しないといけないですよね。後で紹介していただいたサイトをじっくり見て、ノートにまとめて勉強します。
葛藤や妥協については、CSSはほんとやっかいですよね(-_-;
とりあえず最初は難しい事を考えずに、基礎をしっかりやりたいと思います。

>あきら@坊主頭さん
やはり数をこなすしかないですよね。。。くだらない質問して申し訳ないです。苦手な分野を独学なので行き詰ってしまって・・・。MX2004はCSSに明るいと聞いた事があり、使ってみたいですが、慣れるまでは手打ちで、苦労した方が理解できて良さそうなのでそうします。
最後に、>CSSレイアウトは〜単にデザイン要素をCSSに渡しただけの話ではありません。
というのは理解しているつもりです。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

Webデザイン 更新情報

Webデザインのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング