オリジナルWordPressテーマ及びメディアサイトの公開準備中です

独学でWEBプログラミングを始める為におすすめの本、サイト【自宅で手軽に始められます】

おはモニ。
どうもひめたそん@himetasonです。
ブログの運営やサイトの運営をしていると、デザインなど色々な分野に興味が出てくると思います。

WordPressのテーマをカスタマイズしたい。思うようなレイアウトを実現したい。
はたまた自分で1から作ってしまいたいという人もいるかもしれません。

WEBプログラミングという分野になってくるのですが、その情報は世の中に沢山あります。
その中で何から覚えていいかわからないという人も多いと思うんですよね。

今回はそんな悩みを解決する内容をお届けします。
参考にしていただければ幸いです。

僕は主に文章執筆のみでプログラムなんて数年前にJAVAアプリ開発を齧ったくらいでした。
しかしちょっと行動に移してみるとWordPressのテーマを1から自分で製作するまで1週間で出来てしまったんですよね。
1から作らなくてもオリジナリティの演出に役に立つことは間違いないです。

もちろん情的サイト(ホームページなど)ならもっと敷居は下がりますよ。

たった2冊の本から学べるWEBプログラミング

さてみなさんが迷うのは、そもそも何を覚えたら良いの?って話だと思います。

WEBサイトで構成されているHTML、CSS、PHP、JavaScript

HTML:サイトを構成する内容
CSS:デザイン
PHP:関数(WordPress)
JavaScript(複雑な動きや機能)

いきなり全ては難しいと思いますし、他にもあります。
その中でもまずはCSS、HTMLから始め、次にPHPを覚えることをお勧めします

いきなり1から全てを作るのは難しいのでまずはデザインを変えるところから始めるのが敷居も低く楽しく感じると思います。
見た目を変えることは変化を感じやすく覚えやすいですしね。

その後からPHPを覚えると良いです。
おそらく同時は地獄ですのでね。

CSSサンプル
.text {
color: #fff;
.background-color: #000;
}

この例だとclassであるtextという要素の文字が白、背景が黒になるという簡単なコードです。
CSSではこのようにデザインを変えることができます。

ブログデザインなどの外見はCSS。
WordPressの機能などはPHP。
静的サイトはHTML。
複雑なボタンや機能、動きの実装にはJavaScript。

詳しいことは割愛しますがだいたいこんなものという認識でオッケーです。
じゃあそれをどう覚えていくかって話なんですが、やみくもに考えても確かに何をしていいかわかりません。

この2冊で基本は押さえられます

この2冊だけでオッケーです。
こちらは僕が実際に利用した本です。

これだけで基本である4つを全部網羅できるということ。
そして読みやすくわかりやすいんです。

実際に手を動かしながら覚えられるので敷居も低いですよ。
独学で学ぶならわかりやすさと実行しやすさが大事ですからね。

参考 自作テーマデモサイト1 参考 自作テーマデモサイト2

テーマを配布しようと考えているので多少応用はしていますが約1週間でこのようなWordPressのテーマを作れました。
また今なら特に何も見ることなく、ただ作るだけなら1日かかりません。

この本をオススメする理由はHTMLやCSSを弄って楽しみながら覚えられること。
そして高校生向きに執筆された本なので読みやすく解説が優しいんですよ。
今回は割とWordPressにフォーカスしていますが、まずはテーマのデザインを弄りながら覚えると良いです。

次に紹介した本でPHPによる根本的な仕組みを理解できます。
特にWordPressはHTMLを動的に吐き出すので独自の関数で定義していくこともあるのですが、2冊目の本も非常にわかりやすいです。
基本が押さえられれば後は応用で幅が広がっていきますので次にやりたいことが見えてきますよ。

基本を覚えた後は応用、次のスキルへ

ベースが理解できてきたら自ずと次に何がしたいか見えてきます。
そんな時に次のステップへどう進むかを書いていきます。

基礎ができてからの応用はサイトでOK

次に覚えたいことは各々変わってくると思うんですよね。
もちろんそのままCSSを極めても良いですし、楽しさを見出したらWEBアプリケーションに手を出してもいいかもしれません。
その先の本も沢山出てはいるのですが僕は断然サイトで学ぶことをお勧めします。

まず、プログラムの世界はめちゃくちゃ広いです。
その全てが収まっている本を読んでも頭に入らないんですよね。
なのでやりたい!と思えたことから学んでいくのが楽しく早く覚えるコツです。

僕の場合は以前記事でも紹介したのですが動きや3Dに興味を持ちました。
先ほど紹介したデモサイトの2つ目はかなり冒険しています。
実用性はあれですがCSSでこんなこともできるっていう参考にはなると思いますよ。

このようにやりたい表現を覚えたり、サイトの構造化についても学びましたね。

前の章で紹介した基本を学んでしまえば次の1つって理解しやすいんです。
それを1つ1つ覚えていくことで出来ることが意識しなくても増えていきます。
それが1番負担のない勉強方法だと思いますよ。

要は楽しんで学ぶスタンスですね。

オススメの参考になるサイトを紹介

参考 【CSS】box-shadowで影をつける方法とサンプル集サルワカ 参考 wordpressテーマ作成の記事一覧Plusers 参考 【CSS】コピペで超簡単に作れる大見出し・中見出しのまとめmanablog

という3つのサイトをオススメします。

1つ目のサルワカはこのブログで採用しているテーマ「SANGO」を製作しているサイトです。
ここはまるで教科書のように丁寧にWEBデザインの基礎から応用まで網羅されています。
下手な参考書よりわかりやすい説明やお洒落なサンプルなど見所満載です。

2つ目のPlusersはWordPressのテーマを1から作ることをコンセプトにその先の応用まで丁寧に描かれています。
基礎の復習も兼ねれますし何よりわかりやすいです。
特にPHPの参考にすると良いと思います。

3つ目は僕の崇拝するマナブログ。
プログラマー目線の解説が多くSEOに関してとにかく強いので、構造化マークアップなど参考にしています。
もちろんわかりやすく自身でテーマを作成していらっしゃるのでぜひ参考にしてみると良いですよ。

内部構造的なことを知るのにも参考になりますね。

先ほど紹介した僕の製作したテーマ2つは大いにこのサイトたちを参考にさせていただきました。
もちろん他にも沢山覚えたことはありましたがだいたいのデザインや構造は網羅できると思います。

内容が濃く有名どころを今回はピックアップしました。
紹介したサイト以外にも沢山参考になるサイトはあります。
これがしたい!って思いついた時その1つ1つを検索してみましょう。

簡素にコードだけ書かれているサイトもありますが、最初の本を参考にすれば大方の仕組みを理解した上で応用できると思います。

結論、独学で学ぶことは可能です

今回は僕の利用している書籍、サイトの紹介でした。
これだけである程度のことはできてしまいますよ。

ちょっとしたカスタマイズから1からのプログラミングまで全対応です。
そして身につけたスキルは間違いなくこの先有用になると思います。
ぜひとも始めてみてください。

それでは良いプログラミングライフを。
ではまた。