Q&A
HTML 4.0 のころはすでに JavaScript も CSS もあったはずです。
1996年
IE 3 (CSS1対応、JScript搭載)
CSS Level 1 勧告
1997年
HTML 3.2 勧告
IE 4、4.01
HTML 4.0 勧告
1998年
HTML 4.0 改訂
CSS Level 2 勧告
1999年
HTML 4.01 勧告
###前提・実現したいこと
プログラミングに興味を持ったのですがオススメの勉強法を教えて欲しいです。
ATOMってエディターで"OPEN BROWSER-PLUS"ってパッケージでいろんなサイトを見ながら、コードをエディタ内にコピペしていろんな要素をイジってあそんだり、Progateってサイト(無料枠で)でざっくり仕組みを勉強しています。
そこで質問なのですが皆さんはどうやってHTML%、CSS、JavaScriptを勉強しましたか？
参考までに知りたいです！
回答6件
0
私のケースは特異な気がしますが、書いてみます。
Proxomitron
私が HTML/CSS/JavaScript を学習するきっかけとなったのは、Proxomitron というソフトを使い始めてからでした。
Proxomitron とはローカルプロクシ(Local Proxy)の一種で通信をフィルタリングして自由に書き換える事を目的としたアプリケーションであり、具体的には次のような動作が可能となります。
- 広告を削除する
- 掲示板で気に入らないNGワードがある記事を丸ごと削除する
- 掲示板で気に入らないNGワードがある単語を別の単語に置き換える
- HTML文書上の全角英数文字を半角英数文字に置換する
- JavaScript コードで気にいらない部分のコードを別のコードに書き換える
Webブラウザがダウンロードするテキストデータは何でも書き換えられます。
これはある意味、Webコンテンツを自分が思うようにコントロールできる事であり、私はこの魅力に取りつかれました。
書き換え方にもいろいろな方法があり、よりよい方法とは何か、スマートかつエレガントに置換する方法は何か、何度も考えました。
そこで、私は HTML や CSS がW3Cが策定する仕様によって厳格に定めらている事に気が付きました。
例えば、Webコンテンツ上の文字列を全角英数文字を半角英数文字に置換する事を考えます。
Proxomitron はダウンロードしたテキストデータを正規表現に近いメタキャラクタを使って置換処理をお粉ります。
では、Web文書上でテキストと呼べる部分はどこにあるものでしょうか。
HTMLではタグというものを使ってマークアップし、タグで括られた部分をテキストとして描画しています。
HTML
1<p title="Ｈｅｌｌｏ， Ｗｏｒｌｄ！">Ｈｅｌｌｏ， Ｗｏｒｌｄ！</p>
title属性の「Ｈｅｌｌｏ， Ｗｏｒｌｄ！」にはマッチしてほしくない場合、「タグの外側にある文字列」にマッチさせる必要があり、次のように書けます。
(※[ａＡｂＢｃＣｄＤｅＥ...] はもっとエレガントに書けますが、説明のためにあえてこう書いています)
Proxomitron
1(>[^<>]++)([ａＡｂＢｃＣｄＤｅＥ...])
このように、HTML という仕様を知っていれば、Web製作者が書くであろうルールが分かり、汎用的に動作する Proxomitron のフィルタを書く事が出来ました。
HTML リファレンスについて
Proxomitron で出来るだけ汎用的に動作するフィルタを書く為、HTMLのリファレンスを探し回りましたが、多くの個人サイトでは「間違った情報」や「不正確な情報」で説明していることが分かりました。
例えば、Q&Aサイトでは「とほほのWWW入門」がお勧めされる場面が多く見られましたが、このサイトは仕様と比較すると不正確な情報があったり、好ましくない書き方でJavaScriptコードが解説されていたり、といった事が多々ありました。
例えば、次のページですが。
「太字にするには」や「斜体文字にするには」では HTML 4.01 では物理タグとされたタグが説明されていますが、当時は CSS で装飾すべきものでした。
今では、「ただし、HTML5 では」の但し書きが付いていますが、HTML 4.01 では strict.dtd な DOCUTYPE宣言がされている場合に使えない非推奨タグであり、ここで説明されるべきタグではないと私は思います。
そんなわけで、個人サイトは安易に信用しないようになりました。
最も信用できる文書は W3C が定めた仕様書です。
英語が苦手な私は「英語で書かれた仕様書」を読むことが難しかったので、和訳された仕様書を何度も読みました。
個人サイトは仕様書と比較して正誤を確かめる事を常とし、間違いがない事を何度も確かめたサイトに関しては、一定の信用を置くこととしました。
当時は HTML 4.01 と XHTML 1.0 が全盛期であり、XHTML 1.0 への移行が推奨されていた時代でしたが、XHTML 1.0 は日本語訳が少なかったので、ある程度は個人サイトに頼らざるを得ない事情がありました。
(それでも、個人サイトを完全には信用せず、英文を機械翻訳と英和辞書を駆使して翻訳し、正誤を確かめるようにしていました)
TAG index
当時は様々なQ&Aサイトに投稿されたスレッドを読み、他の方の回答で疑問に思った部分は何でも調べました。
また、質問に対して自分が知らない内容に関しても調べて回答する事で自分の知識としていました。
その中でも自分が強く影響を受けたサイトに「TAG index」があります。
(良い点1) 仕様に造詣が深い回答が随所にみられる
質問者は名前を変える前の私ですが、回答は今読んでも素晴らしいものだと思います。
このような仕様に詳しい回答が時々ポストされていた為、定期的に質問スレッドを覗いては、仕様書と比較して学ぶようになりました。
実際、「仕様書」というものを知ったのも TAG index がきっかけです。
(良い点2) 「間違った回答」や「好ましくない書き方」には積極的に指摘が入る
他の方の回答に対して自分から指摘しても良いですし、他人から指摘されることも許される風潮がありました。
何となく思いつくままに書いてみたコードに対しても改善点があれば、誰かしらから指摘が入ります。
その為、回答するだけでより洗練されたコードを書くための知識を覚える機会が多くありました。
私も他人に積極的に指摘するようになりました。
(OKWaveで同様の行為を回答欄で行うと「他人への指摘は回答ではない」として削除された事が何度かありました。
質問者の事だけを考えるなら確かにそうですが、回答者が切磋琢磨する機会は失われていると感じます。)
(良い点3) 複数の回答者でお互いに協力しながら、回答している
上記スレッドでは私の回答に対して、質問者さんが質問をし、アルトさんがフォローしてくださっています。
TAG indexでは他人の回答にフォローを入れることが当然のようにありました。
お互いに協力し合いながら、質問者を解決に導くのが回答者全体の目標でした。
(良い点4) マナー違反な質問/回答には積極的に指摘が入る
マルチポストなどのマナー違反な行為には積極的に指摘が入りましたし、議論もされました。
(良い点5) 評価システム、ベストアンサーシステムがなかった
teratailにあるシステムですが、回答する目的が「評価を得る」「ベストアンサーを得る」に繋がるので、振り返ってみると良くない面もあるように今では感じています。
例えば、他人への質問に対して回答する事でベストアンサーとして選ばれ、他人の回答を乗っ取る行為に発展する事がある為か他人の回答へ質問者が質問している事に対して、回答する事に躊躇があるように思います。
「他人の回答」と「自分の回答」は独立しており、自分自身の自分だけの回答を書かなければならない風潮があります(Aさんのアイデアを使うとこんな書き方も出来ますね、はほぼ見られない)。
他人との摩擦を避ける為か、他人の回答にマイナス評価をしてもコメントで具体的に指摘される事があまりありません。
質問者には回答を選ぶ権利があり、気に入らない回答は無視しても良いですし、必要な回答をベストアンサーに選び、無言でクローズすることが出来ます。
ある意味、質問者優位なシステムだと私は思います。
TAG indexには評価システムがないので、質問者も回答者も「文章」でやり取りする必要がありました。
質問者は回答に対してお礼を言ってクローズしたり、分からなければ補足質問をして更なる回答を得る必要がありました。
回答者は他人の回答に対して改善点があれば、積極的に指摘し、質問内容で不明点があれば、質問者に質問していました。
「質問者を解決に導く」という共通目標に向けて、回答者同士で協力関係がありました。
反面、teratailの評価システムは自分と他人のそれぞれがポイントで評価される為、他人に塩を送る行為は敬遠される傾向にあります。
TAG indexの「文章だけのやり取り」には他人の回答に改善点を指摘する風潮が生まれやすいシステムだったのだと今にして思います。
まとめ
簡単にまとめると次のようになります。
- Proxomitron でフィルタを書くために HTML/CSS/JavaScript を学んだ
- 仕様書を読んだ
- TAG index で仕様に詳しい指摘/回答を得たが、初めはまるで分からなかった
- TAG index で得た指摘/回答内容を理解する為に必死に調べた
- 他人の質問に回答する為に仕様書を何度も読んで回答した
いろいろ書いてますが、プログラミングのような創作活動には目的意識がはっきりしていないと、続けるのが辛いと思います。
私の場合は次のような目的がありました。
- Proxomitronで便利なフィルタを書きたい
- 自分の知的欲求を満たしたい
- 他人の質問に回答する事で喜ばせたい
知的欲求は人並み以上にあったので、プログラミングに向いていたと思います。
「他人の質問に回答する事で喜ばせたい」は今ではかなり減衰しています。
teratailは回答が独立している為、他人の回答を基にした補足回答ができず、markdownで表現方法が増えている事から、TAG indexで回答していた当時よりも間違いなく回答の手間が増えているのですが、質問者の心無い行為に数多く触れてきて質問者に期待を抱かないようになってきています。
k0sukさんが私と同じスタンスでQ&Aサイトで回答するなら、この点に関してはあまり期待しない方が良いと思います。
もう少し、他人との交流を大切にするQ&Aサイトがあるなら、心から知りたいですね…。
回答で何度も触れた仕様書に関しては、今では日本語訳が数多くあるので、私が学んだ当時よりも読み進めるのは楽だと思います。
Re: k0suk さん
投稿2017/10/01 06:25
総合スコア18162
0
私は、一番はじめは必ず書籍で勉強するようにしています。
特に、環境とか、基礎の部分みたいなのは、コピペするだけではどうにもならないので、
紙の本のほうがしっくりきます。
[プログラミング学習として]おすすめかどうかはわかりませんが、「私は」書籍をおすすめします。
投稿2017/10/03 20:09
総合スコア201
0
当時はまだ量も少なく、仕様書自体がもうすごくわかりやすいと思うのですが、一応。
とほほのWWW入門 ラウンジ
http://www.tohoho-web.com/lng/index.htm
TAG index 掲示板
http://www.tagindex.com/bbs/index.html
WEB相談室
http://chaichan.lolipop.jp/cgi-bin/qanda.cgi?modefg=9
この辺の質問掲示板ですかね？
回答ばかりで質問はほとんどしませんでしたが、参考になりました。
残念なことにもうすべて停止していますが。
書籍 スタイルシートWebデザイン (これはHTML版です)
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/index.html
そして文法チェック
Another HTML-lint
http://openlab.ring.gr.jp/k16/htmllint/index.html
これもまた、HTML4 時代のものです。
ほかにも2chとかありますが、いずれも今となっては古いものばかりです。
役に立たない情報でごめんなさい。
あえてリンクしません。
投稿2017/10/01 13:19
総合スコア13749
0
私の場合は、HTMLを勉強しだした時はHTML4.0だったためCSSやJavaScriptはまだ存在していなかったこともあり、まずはHTMLだけを勉強しました。
その後にCSSとJavaScriptを必要に応じて勉強していったのですが、HTMLのタグ以外はWebサイトを見たり、実務の中で経験していきました。
まずは１つずつ確実にやっていってはどうでしょうか？
HTMLのタグではどんなことができるのか
CSSを使うとどんなことができるのか
JavaScriptを使うとどんなことができるのか
これらを知った上で、どんなことをしたいのかによって順番に勉強していけばいいのではないかなぁ？と思います。
技術は広く深いので随時必要な事を勉強していくといいと思います。
とほほさん以外では・・
ドットインストール
とかも勉強になりましたよ。
投稿2017/09/30 11:52
総合スコア454
0
「ポケットリファレンス」（技術評論社）で勉強しました。
自分も個人HPが作りたいと思ったのがきっかけです。
大なり小なりゴールを作ってやるのが、上達の定石です。
PCに詳しい方に、HPビルダーを勧められたのですが、諸々が重くて断念。
自分で全部書けないかと、もう一度その方に聞いて、たどり着いたのが書籍＝リファレンス。
リファレンスを片手に、メモ帳に書いていました。
最初はHTMLだけ。
JavaScriptやCSSが「何者」かわかってからは、徐々にそちらも。
Tipsサイトから拝借する時も、内容を理解してからコピペしてました。
現在のお供は、「JavaScript逆引きレシピ」（翔泳社）です。
やりたいことのコードだけでなく、関連するページも載っているので、逆算して自分に足りないところから手を出せます。
せっかちだけど、自己解決はしたい人向けに…。
投稿2019/04/26 08:32
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/01 06:32
2017/10/03 04:10
2017/10/03 05:10