どうも！初めましての方は初めまして、初心者のWebサイト勉強のとみーです！
ブログ運営の基本は
質の高い記事を書くこと
ですが、色々記事を書いていくと徐々に頭に浮かんでくるのが
ここの色を変えてみたいなぁ。
ボタンをクリックした時に文字を変えたりはできないのかな？
といった Web デザインに関すること。
そして、自分好みにデザインをカスタマイズするためには
という言語に関する知識が必要になります。
HTML5 のロゴ及び CSS3 のロゴは クリエイティブ・コモンズ 表示 3.0 非移植 ライセンスの下に提供されています。
PHP のロゴは クリエイティブ・コモンズ 表示 – 継承 4.0 国際 ライセンスの下に提供されています。
これ１冊でゼロから学べる Webプログラミング超入門 ーHTML, CSS, JavaScript, PHPをまるごとマスター
とみーが読んだのは「これ１冊でゼロから学べる Webプログラミング超入門 ーHTML, CSS, JavaScript, PHPをまるごとマスター」という本です。
名前が長いので以下では「Webプログラミング超入門」と表記します。
「Webプログラミング超入門」のポイント
本のタイトルからわかるように、全くの初心者が１冊で最低限の知識を身に付けるというコンセプトで作られています。
１冊で済んでしまうというのは助かりますね。
本の構成は、以下の通りです。
- HTML & CSS
- JavaScript
- Webの操作（JavaScript）
- グラフィックの操作（JavaScript）
- サーバープログラム（PHP）
- 本格アプリの作成
- スマホアプリの作成
チャプター１〜５が主に学習編となっており、ここで身に付けた内容を使ってチャプター６で本格的なアプリを作っていくという流れです。
チャプター７は、Web サイト（Web アプリ）を作る技術を使ってスマホアプリを作る方法が取り上げられています。
そもそも HTML・CSS・JavaScript・PHP って何？
Webプログラミング超入門は完全初心者を対象としているので、
そもそも HTML・CSS・JavaScript・PHP って何？
という方でも取り組めるようになっています。
ざっくりとしたそれぞれの言語の役割は、次のようなイメージです。
簡単なカスタマイズ（色や文字サイズの変更）は HTML・CSS の２つだけで行えますが、細かいカスタマイズを行う場合は JavaScript と PHP の知識も合わせて必要になってきます。
それぞれの言語は相互に関わっているため、詰まるところ４つすべてを知っていないと自由自在にはカスタマイズできません。
そして、これを１冊で済ませてしまおうというのがこのWebプログラミング超入門なわけです。
「Webプログラミング超入門」で学べる内容－できるようになること
Webデザインのカスタマイズについて勉強したいと思ったときに考えなければならないのは、何を勉強すべきかということです。
プログラミングの世界は膨大なので、自分がやりたいことに合わせて勉強する内容を決めることが大切です。
お金を出して購入するわけですから、「学びたいのはこれじゃなかった！」とならないように教材選びの際には
それを終えたら何ができるようになるのか
をきちんと確認しましょう。
Webプログラミング超入門の場合、各言語を使って具体的には次のようなことができるようになります。
言葉だけ羅列されてもよくわからないと思うので、１つずつ詳しく見ていきましょう。
HTML でできるようになること
HTML は、Web ページに表示される文章を作るための言語です。
みなさんが今見ているこのページも HTML で書かれています。
Webプログラミング超入門では、HTML で
を作る方法を習得できます。
見出し・段落・画像・表は名前の通りで、Web ページにこれらを表示することができるようになります。
リンクはクリックしたら他のページに移動できる仕組みです。
入力フォームは検索やお問い合わせなどに使われる入力欄です。
WordPress のエディターでは、見出しや段落がクリックだけで簡単に作成できますが、実は裏では HTML に変換して保存されています。裏でどのように HTML が扱われているかがわかると、自分でカスタマイズするときに役立ちます。
CSS でできるようになること
CSS は、HTML で書かれたページに対して色やサイズの変更といったデザインを行うための言語です。
このページの色が付いている部分は全部 CSS が使われています。
Webプログラミング超入門では、CSS で
を設定する方法を習得できます。
文字色・背景色などの色の設定は CSS で行います。
フォントは文字のサイズや太さの設定です。
余白は名前の通り、要素同士の間隔ですね。
どこに何を表示するかという位置の設定も CSS で決められます。
画像のような文字以外の大きさの設定もできるようになります。
JavaScript でできるようになること
JavaScript は、ボタンのクリックやキーの入力によって画面を変化させる、といった、Web ページに動きを与えるための言語です。
このページのスクロールに合わせて画面上に表示される見出しは JavaScript で作っています。
Webプログラミング超入門では、JavaScript の
を習得できます。
JavaScrip を使う上で絶対に必要な変数や条件分岐といった基礎的な知識はもれなく習得できます。
クリックしたときに HTML で作った文字の色を変えるといった HTML 要素に関する操作を DOM 操作と言います。
イベント処理はクリックしたときに〜する、マウスを当てたら〜する、といったユーザーの動きを感知して動作する仕組みです。
Canvas は画面に図形や絵を書くための仕組みで、アニメーションを付けることもできるのでゲームなどによく使われます。