おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

JavaScriptの勉強の為にHTML5とCSS3の勉強を始めます

ウェブサイト作りやブログ運営を長らくやっている僕ですが、ここに来てテキストを使ってHTML5CSS3を1から勉強しようと思い立ちました。

最終的な目標としてプログラミングのスキルを身に付けたいと思っておりまして、その入門としてJavaScriptを勉強するつもりです。そのJavaScriptを勉強する為にHTML5とCSS3を勉強します。なんかややこしいですね。

ちなみに大学も職場もプログラミングを積極的に使うところではありませんでしたので、完全素人ぐらいに思っていただいて結構です。

プログラミング入門としてのJavaScript

プログラミング入門と一口に言えども、様々な言語があります。

有名なのはCやJavaですが、僕はJavaScriptを勉強したいなぁと思いました。

その理由は、

  1. 勉強や開発の環境が簡単に手に入る(メモ帳とブラウザでOK)
  2. ブログ運営をしているからすぐに知識を活かせる。
  3. 大学時代に講義でちょっとだけかじってる。

ってなところです。敷居が低いところが良いですね。

Excelをよく使う人はVBAもおすすめ

JavaScript以外で敷居が低そうなのはVBAです。Excelを使った業務を自動化できますので事務作業が圧倒的に楽になります。

実を言うと僕はVBAをそれなりに使いこなしておりますので、プログラミングは全くの素人というわけではありません。見よう見まねで適当にやってますので、改めて勉強したいなぁとは思ってますけどね。

VBAは簡単ですし勉強する目的も明確です。1つ難点を言えばVBAってMicrosoft Officeでしか使えませんので環境を選びます。僕のiMacにはMicrosoft Officeが入ってませんしね。せめてiWorkのNumbersで使えればなぁ……。

普段Excelを頻繁に使って作業をするという人はVBAをプログラミング入門に選んでも良いでしょう。

JavaScriptを学ぶにはHTMLとCSSの知識も必要

JavaScriptはブラウザ上で、言い換えればウェブサイト上で動かすプログラミングです。

ただ、ウェブサイトの大部分を構成するのはHTMLCSSです。JavaScriptだけ身に付けても使えません。

そういうわけでJavaScriptを勉強する為にはHTMLの基礎知識は必須です。CSSは必須とまでは思いませんが、どうせならセットで勉強した方が良いと思います。

HTMLとCSSとは

HTMLとはウェブサイトの設計図を書く為の言語、CSSはデザインを定義するための言語です。

普段見ているウェブサイトは元を辿ればHTMLやCSSで書かれたテキストデータです。だからウェブサイトって最初からパソコンに入ってる「メモ帳」で作れるんですよ。

HTMLやCSSによる文字が羅列されたテキストデータをInternet ExplorerやSafariといったブラウザを通して見ると、普段アクセスしているようなウェブサイトが表示されるという仕組みです。

ブラウザの機能で「ソースの表示」をするとそのテキストデータを見ることができます。一見「???」と意味不明に思ってしまいますが、落ち着いて上から順番に読めば少しわかりますよ。さすがに基本的な知識がないと読めるものも読めませんが^^;

ブログサービスやテーマテンプレートのおかげで知識はなくてもブログを書くことはできますが、カスタマイズしようと思うとHTMLとCSSは必須の知識になります。

僕のHTMLとCSSの略歴

このブログも独自でカスタマイズしているだけあって、HTMLとCSSもズブの素人ではございません。

僕がウェブサイト作りを始めたのは10年ぐらい前です。当時もブログサービスはいくつかありましたが、僕はHTMLをメモ帳に記述してFTPソフトでサーバーにアップするという形で個人サイトを運営していました。

その当時はネットで調べたり、既存のサイトのソースをコピペして書き換えたりと見よう見まねの独学でやっておりました。

大学生の頃にテキストを買ってはみたものの、必要だと思ったところを拾い読みしてコーディングに使ってたぐらいで知識を網羅しているわけではありません。

テキストは『HTML5&CSS3レッスンブック』

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

使用するテキストはエビスコムさんの『HTML5&CSS3レッスンブック』です。

テキストに沿ってウェブサイトを作っていくという内容で、テキストを読了する頃には1つのデモサイトが完成して一通りの知識が身に付くという展望です。

スマホやタブレットでの表示を整える、いわゆるレスポンシブデザインにも対応しています。

※6/14追記 よく見たらレスポンシブデザインではなく、スマホやタブレットでもデスクトップ環境と同じように表示する方法でした。すみません。

スタードメインのサーバーを使ってアップします

コーディングしたHTMLファイルをアップするサーバーについて、テキストではFC2ホームページやGoogle Driveが例として挙げられています。

僕はこのブログの独自ドメインをスタードメインで契約しているのですが、契約者には10GBの無料サーバーが付属するのでこれを使うことにしました。

px.a8.net

今後テキストを進めて一区切りしたら、勉強した内容を記事にしつつサンプルページをアップして公開していこうと思います。

マイペースに進めていこうと思います

仕事やプライベートのことをしながらなので更新ペースは遅くなると思いますが、マイペースで勉強していこうと思います。

このブログも更新しつつですからね。家に居る時間で1番時間取られている気もしますしw

勉強した成果がこのブログにも反映される日が来ると良いですね!