質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • JavaScript

    15265questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    3717questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1908questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML、CSSをみなさんはどのように勉強しましたか?

受付中

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 412

k0suk

score 2

前提・実現したいこと

プログラミングに興味を持ったのですがオススメの勉強法を教えて欲しいです。
ATOMってエディターで"OPEN BROWSER-PLUS"ってパッケージでいろんなサイトを見ながら、コードをエディタ内にコピペしていろんな要素をイジってあそんだり、Progateってサイト(無料枠で)でざっくり仕組みを勉強しています。

そこで質問なのですが皆さんはどうやってHTML%、CSS、JavaScriptを勉強しましたか?
参考までに知りたいです!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+4

私のケースは特異な気がしますが、書いてみます。

 Proxomitron

私が HTML/CSS/JavaScript を学習するきっかけとなったのは、Proxomitron というソフトを使い始めてからでした。

Proxomitron とはローカルプロクシ(Local Proxy)の一種で通信をフィルタリングして自由に書き換える事を目的としたアプリケーションであり、具体的には次のような動作が可能となります。

  • 広告を削除する
  • 掲示板で気に入らないNGワードがある記事を丸ごと削除する
  • 掲示板で気に入らないNGワードがある単語を別の単語に置き換える
  • HTML文書上の全角英数文字を半角英数文字に置換する
  • JavaScript コードで気にいらない部分のコードを別のコードに書き換える

Webブラウザがダウンロードするテキストデータは何でも書き換えられます。
これはある意味、Webコンテンツを自分が思うようにコントロールできる事であり、私はこの魅力に取りつかれました。
書き換え方にもいろいろな方法があり、よりよい方法とは何か、スマートかつエレガントに置換する方法は何か、何度も考えました。
そこで、私は HTML や CSS がW3Cが策定する仕様によって厳格に定めらている事に気が付きました。

例えば、Webコンテンツ上の文字列を全角英数文字を半角英数文字に置換する事を考えます。
Proxomitron はダウンロードしたテキストデータを正規表現に近いメタキャラクタを使って置換処理をお粉ります。
では、Web文書上でテキストと呼べる部分はどこにあるものでしょうか。
HTMLではタグというものを使ってマークアップし、タグで括られた部分をテキストとして描画しています。

<p title="Hello, World!">Hello, World!</p>

title属性の「Hello, World!」にはマッチしてほしくない場合、「タグの外側にある文字列」にマッチさせる必要があり、次のように書けます。
(※[aAbBcCdDeE...] はもっとエレガントに書けますが、説明のためにあえてこう書いています)

(>[^<>]++)([aAbBcCdDeE...])

このように、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 15:32

    改めて読んでも、長いですね。
    基本的に方法論ではなく、「目的意識」が重要だと思っているので、「具体的な方法」についてはあまり触れていません。
    目的に至るまでの経緯を長々と書いていますが、人それぞれだと思いますので、質問者さんの目的が何かを見つめなおすきっかけになれば幸いです。
    私の経験上、重要なのは「仕様に厳格に書くこと」だと思っていますので、「仕様書を読むこと」を強く推奨したいところですが、初めて仕様書を読むと大抵は分からない単語が多く出てきて戸惑います。
    分からない事が多岐にわたっている時には「分からない要素」を小さな単位に分解して一つ一つ学習していくことで私は乗り切ってきました。

    キャンセル

  • 2017/10/03 13:10

    なんでマイナス? 長いから?

    キャンセル

  • 2017/10/03 14:10

    多分、役に立たない経験談ばかりで「具体的な方法」が回答されてないからなんだろうと思いますが、実際のところはどうなのか…。
    無言でマイナス評価を押す文化はやっぱり、少し苦手ですね。

    キャンセル

+3

当時はまだ量も少なく、仕様書自体がもうすごくわかりやすいと思うのですが、一応。

とほほの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とかありますが、いずれも今となっては古いものばかりです。

役に立たない情報でごめんなさい。
あえてリンクしません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

私は、一番はじめは必ず書籍で勉強するようにしています。

特に、環境とか、基礎の部分みたいなのは、コピペするだけではどうにもならないので、
紙の本のほうがしっくりきます。

[プログラミング学習として]おすすめかどうかはわかりませんが、「私は」書籍をおすすめします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

とほほのWWW入門

いまでも、ど忘れしてしまったときなど、ときどき拝見しています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

私の場合は、HTMLを勉強しだした時はHTML4.0だったためCSSやJavaScriptはまだ存在していなかったこともあり、まずはHTMLだけを勉強しました。

その後にCSSとJavaScriptを必要に応じて勉強していったのですが、HTMLのタグ以外はWebサイトを見たり、実務の中で経験していきました。

まずは1つずつ確実にやっていってはどうでしょうか?
HTMLのタグではどんなことができるのか
CSSを使うとどんなことができるのか
JavaScriptを使うとどんなことができるのか

これらを知った上で、どんなことをしたいのかによって順番に勉強していけばいいのではないかなぁ?と思います。
技術は広く深いので随時必要な事を勉強していくといいと思います。

とほほさん以外では・・
ドットインストール

とかも勉強になりましたよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/01 22:03

    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 勧告

    キャンセル

  • 2017/10/01 22:23

    すいません。存在していたとしてもCSSを利用したコーディングはまだ一般的ではなかったため「存在していない」と記載してしまいましたm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    Rails アイコンの表示右に揃える

    ボールドテキスト参考サイトのカテゴリのようにアロー(矢印)アイコンを右に揃えて表示したいです。 text-rightでは何も変化はありませんでした。 私の開発環境はFlat ui

  • 解決済

    atom.ioのキーバインド設定について

     atom.ioのキーバインドの設定をいじっているのですが、いまいちatom-text-editor,.editor:not([mini]),body,atom-workspace

  • 解決済

    CSSがブラウザに反映されない

    こんにちは。 ドットインストールのCSS入門 #03 セレクタとプロパティを理解しよう というところを学習しておりますが、 下記のHTMLファイルをGoogle Chromeで実行

  • 解決済

    org-modeのHTML出力CSSについて

    こんにちは。 現在emacsのorg-modeでいろいろ試しているところなんですが、HTML出力する際にCSSが読み込まれません。 CSSを反映させるのに設定ファイルでなにか記述

  • 受付中

    タグでお問い合わせはこちらまでという受信ボックスでメールが来るように設定したい、

    僕のホームページをATOMを使ってタグで未完成ですが打ちました。それで、お問い合わせはこちらとか最後につけるボタンのタグがほしいです。ボックスみたいな感じでしょうか?それをプログラ

  • 受付中

    monaca タブで切り替え先ページにjsを実行したい

    前提・実現したいこと monacaでwebサイトのアプリを制作中です。 webサイトをiframeを使って読み込み、monacaでメニュー等つけたいと思っています。 in

  • 受付中

    wordpressでコメントを>の後ろに書く方法

    wrodpress.orgのテキストでコメントを書くばあい  >のうしろにコメント書くにはどういう命令いれればいいんですか? //とかやりましたが全部改行され ビジュアルでただ

  • 解決済

    XAMPPでホームページ作成

    XAMPPを使いプログラムの作成を行いたいとも思い、知人にXAMPPとMySQLでブラウザにコードの指示通りに反映するところの方法まで教えてもらいました。 HTMLとPHPをブ

同じタグがついた質問を見る

  • JavaScript

    15265questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    3717questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1908questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。