Blogger Labo：Bloggerカスタマイズに必要な知識を無料で身につける方法

Bloggerをはじめとするブログサービスで、自分のサイトを思い通りにカスタマイズには HTML・CSS・JavaScript の知識が必要になります。

これらは断片的な知識でもある程度は対応できますが、テンプレートを構成するソースコードを読んだり、書き換えたりするには、やはり一貫した知識を身に着けておいた方が効率がよく、その他のことにも応用を効かせることができるので便利です。

そこで、実体験に基づいたHTML・CSS・JavaScriptの学習方法を以下にまとめておこうと思います。


何から学習するべきか？


1．HTML


最初は断然 HTML から学習すべきです。

HTMLはWEBサイトの骨組みを構成する言語なので、サイト作りには必要不可欠になります。逆にHTMLさえ理解すれば、ある程度のWEBサイトを作ることができるようになります。

自分がHTMLに触れたのは今から20年前くらいだと思いますが、当時はCSSなんかはメジャーではなく、多くのサイトはHTMLで作られていたと思います。ですので、未だにHTMLのみで作られたサイトもあるんじゃないでしょうか？

要するに、HTMLさえ理解しておけば、基本的なWEBサイトは作れるレベルにあると言えるわけです。今は多くのブログサービスで直感的にコンテンツを設定できる仕様になっていますが、HTMLを覚えておけば こうしたサービスでちょっとだけ高度なカスタマイズができるようになるというメリットがあります。

2．CSS


HTMLを理解したならば、CSSを学習すべきです。

CSSは、スタイルシートというものを使ってサイトをデザインするための言語で、これを覚えておくとサイトを一括してデザインしたり、サイトにちょっとした動きを付けることができるようになります。

最近ではCSSでできることの範囲が結構拡大しているので、JavaScriptを使わなくても同じような動きを付けることができたりしますし、JavaScriptよりも読み込みが高速なので、閲覧者にストレスのない形でリッチなデザインのサイトを構成することができます。

個人的には、こだわらなければ HTML と CSS だけでサイトを構成するのもアリだと思います。

3．JavaScript


HTML と CSS を覚えたら、JavaScriptを学習するとできることの幅が広がります。

JavaScriptは、サイト内の要素を抽出して動きを命じることのできる言語で、ボタンクリックで要素に動きを付けたり、読み込み時に要素を特定位置に動かしたりすることなんかができます。また、高度なプログラムを組めば、関連記事ガジェットを自作することなんかもできてしまいます。

しかし、JavaScriptはHTMLやCSSとは文法が全く異なるので、基礎を覚えるのが結構大変です。ですが、一回覚えてしまえば、PHPやRubyなどのスクリプト言語と文法に親和性があるので、他の言語を学習する際に応用が効くようになるというメリットがあります。

どうやって学習するべきか？


1．youtubeを使う


上記の言語を学習するには、youtubeが一番手っ取り早いです。

教材となるチャンネルは様々ですが、多くのチャンネルで情報がプレイリストにまとめてあるのでスムーズに学習できます。個人的には以下のチャンネルにお世話になったので、ここにリンクを載せておきます。

Akichonプログラミング講座

Akichonプログラミング講座

■2020/9/15 ★宣伝★ 2020年9月14日よりオンラインサロンを開設しました。 「楽しいプログラミングサークル」 https://music-book.jp/salon/detail/17 まだコンテンツは少ないですが、色々な学習動画をアップする予定です。 また、メンターとして質問にも答えたいと思います...

超初級者向け～中級者向けの内容になっています。
HTML/CSS/JavaScriptをはじめ、PHPやC言語などの講座もあります。

しまぶーのIT大学

しまぶーのIT大学

👨‍💻 自己紹介 「Yahoo! JAPAN」でプログラマーとして働いていました。現在は起業家として新規サービスを開発中です。プログラミング講座、就活対策、IT業界ニュースについて発信しています。 🔥タグ #IT業界 #Web系 #自社開発 #プログラミング講座 #駆け出しエンジニア #就職活動 #転職活動 #就...

初級者～中級者向けの動画が多めです。
HTML/CSS/JavaScriptの基礎的な講座がまとめてあります。

たにぐちまことのともすたチャンネル

たにぐち まことのともすたチャンネル

学ぶ。をちゃんとをコーポレートテーマに、プログラミングを学びたい人を応援しています。YouTube動画の他、Udemyでの動画教材販売、書籍等の執筆や販売を行っています。

中級者向けの内容の講座になっていますが、より詳しく理解することができます。
JavaScriptの学習にオススメで、JavaScriptのほか、jQueryなどのライブラリの講座もあります。

youtubeを使った学習方法について

当然ながら、動画を見ているだけでは学習になりません。基本的には動画を見ながら、同様の作業を写経のように真似るというやり方で学習していきます。ですので、PCの傍らにスマホ、タブレット、サブPCなど動画を見られる環境を整えておくと効率よく学習できます。

また、動画自体が長めなので、youtubeの倍速機能を使って高速再生の設定にしておき、必要に応じて止めたり、戻したりしながら見るのがオススメです。

2．オンライン学習サイト/アプリを使う


web上にはエンジニアを目指す人向けのオンライン学習サイトや学習アプリがあります。ドットインストールや
Progate（プロゲート）なんかが有名です。

ドットインストール

ドットインストール

HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。

ドットインストールは、プログラミングのオンライン学習サイトで、会員登録すれば ある程度は無料で講座を受けることができます（高度な講座を受けるには課金が必要です）。

様々な言語やソフトの学習講座が用意されており、一回あたり3分程度の動画を見て学習するような形になっているので、時間がある時に少しずつ学習をすすめることができます。使用するソフトもインストール方法から教えてくれるので、初心者にも分かりやすくなっていると思います。

Progate（プロゲート）

Progate(プロゲート) | Learn to code, learn to be creative.

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progate（プロゲート）は、PCやスマホでプログラミングを学習することができるアプリで、会員登録すれば基本的な学習講座を受けることができます（高度な講座を受けるには課金が必要です）。

様々な言語の学習講座が用意されており、穴埋め問題を数ある候補から選択して埋めていくという方式なので、超初心者でも簡単な操作で学習できるようになっています。

両者の比較

両者を比較すると、プロゲートの方が簡単ですが、実際にコードを打ち込むわけではないので実践的なスキルには繋がりづらいと思います。なので、ある程度PCを使い慣れている人なら、ドットインストールで学習するのがオススメです。

いずれにせよ、こうしたサイトやアプリを使うことで点で集めた知識を線で結ぶことができるので、その知識をより盤石にまとめて理解することができるようになります。すると、ブログなので紹介されているコードを読んで理解できるようになったり、自分自身である程度のコンテンツを作ったりできるようになります。

3．エディタを選定する


エディタとは、ソースコードを書くためのアプリのことですが、Windowsであればメモ帳なんかがこれに当たります。Bloggerなど、web上でサイトのソースコードを編集できるサービスでは標準のエディタを使うのが一般的ですが、現在は こうした標準エディタよりも効率よくソースコードをかけるようになっているエディタがいくつもあります。個人的なオススメエディタはVS CodeとAtomです。

Visual Studio Code（VS Code）

Visual Studio Code – コード エディター | Microsoft Azure

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。
Visual Studio Code（ビジュアル・スタジオ・コード）はMicrosoftが開発したコードエディタで、コードの補完機能や自動整形機能があったり、拡張機能を使った作業の効率化が図れる仕様になっているので、一番オススメのエディタです。

Atom

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
Atom（アトム）はGitHubが開発したコードエディタで、VS Codeと同じくコードの補完機能が備わっていたり、拡張機能を使った作業の効率化ができる仕様になっています。自分の場合は、VS Codeと共に両方インストールしていて、必要に応じて使い分けています。

サービスの標準のエディタとの併用方法

個人的には、ソースコードを打つ場面においてはソースコードを上記で紹介したエディタにコピペして、そのエディタで編集作業をします。で、完成したら標準のエディタにコピペして更新します。コピペ自体は簡単操作でできますので、こうした使い方をすればテンプレートなどの編集作業が捗ります。

どれぐらいの期間がかかるのか？


HTML/CSSは大した時間はかからない


HTML/CSSはマークアップ言語と呼ばれており、プログラミング言語よりも易しい言語といわれています。自分もHTML自体は学生時代から使っているので、大した知識が無くても、ある程度は経験でなんとかなるイメージです。

今はネット上に教材が山ほどある時代なので、分からないことはググればすぐに答えを得ることができますし、基本的な学習も上記で紹介した方法を使えばすんなりと理解できると思うので、学習する本人の現在の知識やセンスにもよりますが、おそらく2週間もあればおおよそのことは理解できるようになると思います。

学習のコツは、とにかくコードを書いてみて、そのタグがどのような動きを見せるのかを経験で覚えていくことです。なぜなら、ソースコードが同じでも、ブラウザやサービスの環境によって想定外に表示されることも多いので、座学だけでは対応できないからです。また、とにかく書き続けることで頭だけではなく、目や指がタグを覚えてくれるので、頭で理解するよりも効率が良くなります。

JavaScriptは やや難度が高め


JavaScriptはスクリプト言語という比較的記述しやすい文法のプログラミング言語ですが、HTML/CSSとは親和性のない全く別物なので、HTML/CSSを極めていたとしても覚えるのに時間がかかります。この辺は、基本的な文法を一つ一つ抑えていく必要がありますので、書けるようになるまで少なくとも1ヶ月は見ておいたいいと思います（自分も読めるけど、調べないと書けないレベルです）。

とはいえ、JavaScriptの文法は他の言語とも親和性があるので、例えばJavaScriptを覚えてからPHPやRubyを覚えるとなると、結構スムーズに学習できるようになります。しかし、JavaScriptは基本的な文法のVanilla JSというものから、jQuery・Vue・Anime.jsなどのライブラリだったり、かなり奥深く幅が広いので、極めようと思うと大変です（Bloggerユーザの場合はVanilla JSだけでも十分です）。