初心者以下だけどwebデザインを学びたい

質問

10年ほど前になると思いますが、趣味でFireworksMXのスライス機能と
DreamweaverMXで今思えば最悪なテーブルレイアウトでweb作成をしていました。
divタグすら使ったことない、CSSは行間開けたりするのにちょっと使ったことがあるレベルです。

その時の感覚が抜けない、ゼロの初心者以下の人間なのですが、
Photoshopからのwebデザインやブログ機能の組み込み、
WordPressのテーマカスタマイズ等を学びたいと思っています。

まずは基礎とばかりに『web標準の教科書(http://www.amazon.co.jp/dp/4798010928)』
片手に手打ちでポチポチやり始めたところですが、このあと何から覚えていけば効率が良いか、
この書籍ならステップアップに最適といったものがあればアドバイスいただけないでしょうか？

漠然とした質問で恐縮ですがよろしくお願いします。
すっかり浦島状態です…

回答No.3

dasainer

本を読むのであれば、デザインの本質を知ることも重要です。
初心者はテクニカルな方向へ行くことが多いんですが、事前に地味ですが大事なものも知っておきましょう。

誰のためのデザイン?―認知科学者のデザイン原論
http://www.amazon.co.jp/dp/478850362X/

また、Webデザインならではのノウハウや、組織としての案件フローをイメージするのもポイントですね。

Webデザイン受発注のセオリー　デザインコントロールが身につく本
http://www.amazon.co.jp/gp/product/486267111X

上記はすごく役に立ちました。
地味ですが、けっこう深くて実践的です。
と、下記はデザインの感覚やアイディアを貯めたり練ったりするのに使うサイトです。

http://www.ikesai.com/
http://www.designlinkdatabase.net/
http://www.web-mihon.com/

定期的にみると、けっこう楽しくて自分に合ったデザインも見つかります。
ポイントなのは「デザイン」の本質・意味を自分で持つこと、その実現のための手段と引き出しをおおく持っておくことです(技術的にも人間的にも)。
どちらが欠けても質は上がらないですね。

回答No.2

ORUKA1951

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト ( http://www.amazon.co.jp/Web%E6%A8%99%E6%BA%96%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8%E2%80%95XHTML%E3%81%A8CSS%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%E2%80%9C%E6%AD%A3%E3%81%97%E3%81%84%E2%80%9DWeb%E3%82%B5%E3%82%A4%E3%83%88-%E7%9B%8A%E5%AD%90-%E8%B2%B4%E5%AF%9B/dp/4798010928/ref=sr_1_1?ie=UTF8&qid=1320828555&sr=8-1 )
のことかな？
　う～ん、2005年ですか？？？この世界では「古書」ですね。
　HTML4.01がHTMLの最後の仕様で、今後はXHTMLに移行すると言われていた時代の頃の書籍です。
　一方W3Cとは別のWHAT WGが、HTMLの新版を作り始め、2006年にはW3Cも同意し、2007年にはHTML5の策定がW3Cの正式な次期仕様となりました。さして、XHTMLは1.1まで勧告(2001/5/31)されて、XHTML2.0の作業は中断されました。

　現在は、HTML5に向かっています。

　そのHTML5ですが、正式な勧告までは、まだまだ日数があるのですが、肝心なことは
・HTML4.01の改訂版ですが、あくまでstrictです。transitionalではありません。
　これは、HTML4.01で、すでにtransitinalは著者は使うべきでないとされていました。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書-4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML5 では、製作者のためオーサリング言語をシンプルにした結果、表象的な要素をはじめとするいくつかの要素や属性が含まれていません。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#backwards-compatible )］より

・HTML5では、より明確に文書構造にしたがってマークアップすることが求められます。
　これは、「3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」を見るとわかると思います。

★最短で、HTMLを学ぶなら、HTML4.01strict(Transitinalじゃない)を、しつかり身につけること
　そしたら、HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )だけで済むかも

★tableでデザインしていたということは、単にtableが問題なのではなく!!!
　『どのように表現(プレゼンテーション)するか』を基準にHTMLを作成していたことが失敗なのです。tableだけじゃなく、<font color="red">ここは重要</font>が非推奨だから<span class="color:red">ここは重要</span>とすることも不可と言うことです。<strong>ここは重要</span>としてマークアップして、スタイルシートでspan{color:red;}としなさいと言うことです。
　このHTMLを、読み上げソフトで読めばstrongは、強い口調で読んでくれるでしょうし、スタイルシートで男の低い声で読めとも指定できる。
　tableだけがダメなのじゃなく、この様にデザインしたいから、この様にHTMLを書きなさいということがダメなのです。
　あくまで、その部分が他の文書の引用なら<blockquote>でマークアップすすると同じように、その文書の「頭書き」に当たるなら、<div class="header">としなさい。本文なら<div class="section">でしょうし、フッタなら<div class="footer">でしょう。独立した記事なら<div class="footer">としなさい。余談的なものなら<div class="aside">、ナビゲーションなら<div class="nav"・・・
　その上で、プレゼンテーションはスタイルシートで指定しなさい!!
　ここであげたclass名は、そのままHTML5では<header><section><footer><aside><nav>となります。

　このあたりが、あなたが学ぶべきもっとも肝要な部分です。

＞Photoshopからのwebデザインやブログ機能の組み込み、
＞WordPressのテーマカスタマイズ等を学びたいと思っています。
Wordpressはともかく、「Photoshopからのwebデザイン」は、tableと同じ過ちを犯そうとしているとしかいえません。

　HTMLは、デザインのツールではない!!!!---ずうっとHTML4.01の時代から言い続けられています。

★2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
★2.3.5 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 )
★14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　残念ですが、書籍は探すのが大変です。日々刻々変化するこの世界、最新の本ですらすぐ過去のものになります。
　何よりも、仕様書を含め、参考にすべきたくさんのデータがウェブ上にあるのに、その存在を知っていれば、恥ずかしくて本に書けない。という根本的な問題がある。無知なうちしか、原稿を書く気にならない--（笑）

回答No.1

noname#158634

とりあえず正しいHTMLを学ぶことが先決です。
デザインなんて正しいマークアップあってこそ。テーブルレイアウトという汚点の経験者なのでそこは分かってるかと思いますが。

参考URL：

http://www.amazon.co.jp/dp/4798030279/