【初心者向け】HTML・CSS・JavaScript・PHPの基礎を1冊で学べる本

HTML•CSS•JavaScript•PHP の基礎を1冊で学べる本カスタマイズ
スポンサーリンク

どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!

ブログ運営の基本は

質の高い記事を書くこと

ですが、色々記事を書いていくと徐々に頭に浮かんでくるのが

ここの色を変えてみたいなぁ。

ボタンをクリックした時に文字を変えたりはできないのかな?

といった Web デザインに関すること。

そして、自分好みにデザインをカスタマイズするためには

  • HTML
  • CSS
  • JavaScript
  • PHP

という言語に関する知識が必要になります。

そこで今回は、実際にとみーが読んだ HTML・CSS・JavaScript・PHP の基礎を1冊でまるごと勉強できる本について、感想・レビューを交えながらご紹介していきます!

クリエイティブ・コモンズ・ライセンス

HTML5 のロゴ及び CSS3 のロゴは クリエイティブ・コモンズ 表示 3.0 非移植 ライセンスの下に提供されています。

クリエイティブ・コモンズ・ライセンス

PHP のロゴは クリエイティブ・コモンズ 表示 – 継承 4.0 国際 ライセンスの下に提供されています。

スポンサーリンク

これ1冊でゼロから学べる Webプログラミング超入門 ーHTML, CSS, JavaScript, PHPをまるごとマスター

とみーが読んだのは「これ1冊でゼロから学べる Webプログラミング超入門 ーHTML, CSS, JavaScript, PHPをまるごとマスター」という本です。

とみー
とみー

名前が長いので以下では「Webプログラミング超入門」と表記します。

「Webプログラミング超入門」のポイント

この本のポイント
  • プログラミング完全初心者
  • HTML・CSS・JavaScript・PHP の4言語を
  • 1冊で勉強できる

本のタイトルからわかるように、全くの初心者が1冊で最低限の知識を身に付けるというコンセプトで作られています。

とみー
とみー

1冊で済んでしまうというのは助かりますね。

\ Kindle版がおトク! /

本の構成は、以下の通りです。

  1. HTML & CSS
  2. JavaScript
  3. Webの操作(JavaScript)
  4. グラフィックの操作(JavaScript)
  5. サーバープログラム(PHP)
  6. 本格アプリの作成
  7. スマホアプリの作成

チャプター1〜5が主に学習編となっており、ここで身に付けた内容を使ってチャプター6で本格的なアプリを作っていくという流れです。

とみー
とみー

チャプター7は、Web サイト(Web アプリ)を作る技術を使ってスマホアプリを作る方法が取り上げられています。

そもそも HTML・CSS・JavaScript・PHP って何?

Webプログラミング超入門は完全初心者を対象としているので、

そもそも HTML・CSS・JavaScript・PHP って何?

という方でも取り組めるようになっています。

ざっくりとしたそれぞれの言語の役割は、次のようなイメージです。

各言語の役割イメージ
  • HTML:Web ページの文章の内容と構造決定
  • CSS:レイアウトとデザイン
  • JavaScript:アニメーションやクリック時の動作などの機能拡張
  • PHP:データ検索や WordPress のカスタマイズ

簡単なカスタマイズ(色や文字サイズの変更)は HTML・CSS の2つだけで行えますが、細かいカスタマイズを行う場合は JavaScript と PHP の知識も合わせて必要になってきます。

とみー
とみー

それぞれの言語は相互に関わっているため、詰まるところ4つすべてを知っていないと自由自在にはカスタマイズできません

そして、これを1冊で済ませてしまおうというのがこのWebプログラミング超入門なわけです。

スポンサーリンク

「Webプログラミング超入門」で学べる内容-できるようになること

Webデザインのカスタマイズについて勉強したいと思ったときに考えなければならないのは、何を勉強すべきかということです。

とみー
とみー

プログラミングの世界は膨大なので、自分がやりたいことに合わせて勉強する内容を決めることが大切です。

お金を出して購入するわけですから、「学びたいのはこれじゃなかった!」とならないように教材選びの際には

それを終えたら何ができるようになるのか

をきちんと確認しましょう。

Webプログラミング超入門の場合、各言語を使って具体的には次のようなことができるようになります。

  • HTML:見出し・段落・画像・表・リンク・入力フィールドの作成
  • CSS:文字色・背景色・フォント・余白・位置・大きさの設定
  • JavaScript:プログラミングの基礎、DOM操作、イベント処理、Canvas、Ajax
  • PHP:プログラミングの基礎、フォーム処理、テキストファイルの読み書き

言葉だけ羅列されてもよくわからないと思うので、1つずつ詳しく見ていきましょう。

HTML でできるようになること

HTML5でできるようになること

HTML は、Web ページに表示される文章を作るための言語です。

とみー
とみー

みなさんが今見ているこのページも HTML で書かれています。

Webプログラミング超入門では、HTML で

  • 見出し
  • 段落
  • 画像
  • リンク
  • 入力フォーム

を作る方法を習得できます。

見出し・段落・画像・表

見出し段落画像は名前の通りで、Web ページにこれらを表示することができるようになります。

リンクはクリックしたら他のページに移動できる仕組みです。

入力フォームの例

入力フォームは検索やお問い合わせなどに使われる入力欄です。

WordPress ユーザーの方へ

WordPress のエディターでは、見出しや段落がクリックだけで簡単に作成できますが、実は裏では HTML に変換して保存されています。裏でどのように HTML が扱われているかがわかると、自分でカスタマイズするときに役立ちます。

CSS でできるようになること

CSS3でできるようになること

CSS は、HTML で書かれたページに対して色やサイズの変更といったデザインを行うための言語です。

とみー
とみー

このページの色が付いている部分は全部 CSS が使われています。

Webプログラミング超入門では、CSS で

  • 文字色
  • 背景色
  • フォント
  • 余白
  • 位置
  • 大きさ

を設定する方法を習得できます。

文字色•背景色の例

文字色背景色などの色の設定は CSS で行います。

フォントの例

フォントは文字のサイズや太さの設定です。

余白の例

余白は名前の通り、要素同士の間隔ですね。

余白の例

どこに何を表示するかという位置の設定も CSS で決められます。

大きさの例

画像のような文字以外の大きさの設定もできるようになります。

JavaScript でできるようになること

JSでできるようになること

JavaScript は、ボタンのクリックやキーの入力によって画面を変化させる、といった、Web ページに動きを与えるための言語です。

とみー
とみー

このページのスクロールに合わせて画面上に表示される見出しは JavaScript で作っています。

Webプログラミング超入門では、JavaScript の

  • プログラミングの基礎
  • DOM操作
  • イベント処理
  • Canvas
  • Ajax

を習得できます。

JS基礎

JavaScrip を使う上で絶対に必要な変数や条件分岐といった基礎的な知識はもれなく習得できます。

クリックしたときに HTML で作った文字の色を変えるといった HTML 要素に関する操作を DOM 操作と言います。

イベント処理はクリックしたときに〜する、マウスを当てたら〜する、といったユーザーの動きを感知して動作する仕組みです。

Canvas は画面に図形や絵を書くための仕組みで、アニメーションを付けることもできるのでゲームなどによく使われます。