HTML5+CSS+JavaScriptプログラミングを初心者が読んだら

HTML5+CSS+JavaScriptプログラミングという、プログラムの勉強本を読んでみました。読んだのは、Kindle版の「ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］」です。 HTML5+CSS+JavaScript初心者として、以下のような気づきがあり非常に参考になりました。 どうすればプログラミングは上達できるのか HTML5+CSS+JavaScriptのデバッグはどうやるのか HTML5+CSS+JavaScriptでどんなことができるのか 何となくHTML5+CSS+JavaScriptを読めるような気がしてきた Kindle本…

Gitによるソースのバージョン管理を行うようにしました

バージョン管理の必要性 JavaScriptとCSSで、ソースコード貼り付け用ボックスの作成を行いましたが、その時にソースのバージョン管理の必要性を感じました。 少しづつ開発していったので、はてなブログのデザインに登録したJavaScriptとCSSの日別のバックアップ・ファイルを、手で作成していました。また、そこから切り出してテストもしていたので、テスト結果を元ソースに反映するのも手で行っていました。特にテストで、変更してはテストし、戻しては変更してテストするを繰り返していると、どこを変更したのか管理するのが大変でした。 やはり、これらの事はバージョン管理のソフトウェアで行うべきと思い、Gi…

JavaScript⑦：ソースコードを貼り付けるボックスを非表示にする

ソースコード貼り付け用ボックスの表示について 前回の「JavaScript⑥：ソースコードを貼り付けるボックスを作成 (3)」で、ソースコードを張り付けるボックスの作成ができました。しかし、今までに書いたウェブのページを見てみると、ソースコードを張り付けたために長くなっており、読んでいくためにはスクロールをたくさんしなくてはいけません。 そこで、初期はソースコードのブロックを非表示にしておき、「表示」ボタンを押すことにより表示されるようにしたいと思います。今までのJavaScriptとCSSを基に、ソースコード・ブロックの表示/非表示を作成しました。 ソースコード貼り付け用ボックスの表示につい…

JavaScript⑥：ソースコードを貼り付けるボックスを作成 (3)

ソースコード貼り付け用ボックスの課題 前回の「JavaScript⑤：ソースコードを貼り付けるボックスを作成 (2)」で、ソースコードを張り付けるボックスの作成がほぼできました。 残りは次の2つの項目ですが、ちょっと手間取ってしまいました。両方ともCSSの設定に関するものですが、どのようにデバッグして解決したのかをメモリます。 NO. カスタマイズ項目 修正部分 4 ソースタイプのブロックをソースコードのブロックより少し上に出す (結果的に、出すと別の問題があり出せませんでした) CSS 5 ソースコードのテキスト部分に枠と背景色がつくのを消す HTML CSS ソースコード貼り付け用ボックス…