ブログでHTMLを学ぶ(はてなとblogger)
初めに
HTML、CSS、JavaScriptを簡単に学ぶ方法としてブログが挙げられます。
例としてはてなブログでその方法を紹介したいと思います。
注意点
ブログによっては、HTMLの記述場所が制限されたり、JavaScriptの機能が制限される場合があります。
はてなブログでも、HTMLの記述場所が不明確です。
基本的にHTMLは「head」部と「body」部を持ちますが、自由にHTML文の記述場所を選べません。
例えば、他のアプリケーションによって「body」部の最上部に何らかのHTML文の記述を求められた場合でも、それはできないということになります。
それでも、HTML、CSS、JavaScriptの初歩を学ぶためには、適当だと思います。
何せ、基本的にブログは無料で作成できるのでお手軽だからです。
HTMLを学ぶ方法
HTMLやCSSの記述方法(構文など)を知らない初心者の場合でも、「例」や「慣れ」によって、学ぶ方法があります。
筆者の場合はほとんどそうでした。
ステップ①
はてなブログで記事を書くとき、「みたまま」モードと「HTML編集」モードがあります。
最初は「みたまま」モードで記述して、次の画像のボタンをいじってみてください。
例として、「みたまま」モードで次の画像を用意しました。
ステップ②
次の画像は「HTML編集」モードに切り替えたときの上の例です。
テストは通常の文章です。
リンクは、クリックしたときのリンク先を指定しました。
このように、上のボタンをいじって記事を作成すると、HTMLが自動的に生成されます。
慣れてきたら「HTML編集」モードで何かHTMLを追加してみましょう。
CSSとJavaScript
CSSとJavaScriptは、別記事にしたいと思います。
CSS
CSSは、見た目に直接関係あるのでHTMLより、少し厄介かもしれません。
また、CSSは自動生成されません。
JavaScript
JavaScriptは、「HTML編集」モードのみで編集できます。
例えば、広告を貼るときには必須になると思います。
(サイドバーやヘッダでJavaScriptを記述する方法はあります。)
はてなブログとbloggerブログ
HTMLを「例」として学ぶとき、Bloggerブログをお勧めしたいと思います。
何故なら、はてなブログは次の画像のようにHTMLの自動生成が冗長的で見づらいからです。
最後に
「例」を参考に「慣れ」ていく学習方法はいかがでしたでしょうか。
最下部に、HTMLのリファレンス先をリンクします。
とはいえ、全部の構文を初めから覚える必要はありません。
必要なときにリファレンス(参照)すれば、問題ないと思います。
大事なのは、参照の仕方を覚えることです。
例えば、英和辞典を全部覚えないと英語ができないか?という問題と同じです。