コンピュータとプログラムを学ぶ

初めての方、初心者から上級者まで

ブログでHTMLを学ぶ(はてなとblogger)

 

初めに

 HTML、CSSJavaScriptを簡単に学ぶ方法としてブログが挙げられます。

例としてはてなブログでその方法を紹介したいと思います。

 

注意点

 ブログによっては、HTMLの記述場所が制限されたり、JavaScriptの機能が制限される場合があります。

 はてなブログでも、HTMLの記述場所が不明確です。

基本的にHTMLは「head」部と「body」部を持ちますが、自由にHTML文の記述場所を選べません。

 例えば、他のアプリケーションによって「body」部の最上部に何らかのHTML文の記述を求められた場合でも、それはできないということになります。

 それでも、HTML、CSSJavaScriptの初歩を学ぶためには、適当だと思います。

何せ、基本的にブログは無料で作成できるのでお手軽だからです。

 

HTMLを学ぶ方法

 HTMLやCSSの記述方法(構文など)を知らない初心者の場合でも、「例」や「慣れ」によって、学ぶ方法があります。

 筆者の場合はほとんどそうでした。

 

ステップ①

 はてなブログで記事を書くとき、「みたまま」モードと「HTML編集」モードがあります。

 最初は「みたまま」モードで記述して、次の画像のボタンをいじってみてください。

 

f:id:tsp371:20170619060756j:plain

例として、「みたまま」モードで次の画像を用意しました。

 

f:id:tsp371:20170619060923j:plain

 

ステップ②

 次の画像は「HTML編集」モードに切り替えたときの上の例です。

 

f:id:tsp371:20170619061203j:plain

 

 テストは通常の文章です。

リンクは、クリックしたときのリンク先を指定しました。

 

 このように、上のボタンをいじって記事を作成すると、HTMLが自動的に生成されます。

 慣れてきたら「HTML編集」モードで何かHTMLを追加してみましょう。

 

CSSJavaScript

 CSSJavaScriptは、別記事にしたいと思います。

 

CSS

 CSSは、見た目に直接関係あるのでHTMLより、少し厄介かもしれません。

また、CSSは自動生成されません。

 

JavaScript

 JavaScriptは、「HTML編集」モードのみで編集できます。

例えば、広告を貼るときには必須になると思います。

 (サイドバーやヘッダでJavaScriptを記述する方法はあります。)

 

はてなブログbloggerブログ

 HTMLを「例」として学ぶとき、Bloggerブログをお勧めしたいと思います。

何故なら、はてなブログは次の画像のようにHTMLの自動生成が冗長的で見づらいからです。

  

f:id:tsp371:20170619063615j:plain

 

最後に

 「例」を参考に「慣れ」ていく学習方法はいかがでしたでしょうか。

 

 最下部に、HTMLのリファレンス先をリンクします。

とはいえ、全部の構文を初めから覚える必要はありません。

必要なときにリファレンス(参照)すれば、問題ないと思います。

 大事なのは、参照の仕方を覚えることです。

例えば、英和辞典を全部覚えないと英語ができないか?という問題と同じです。

 

www.htmq.com