ホームページを作ろうと思ったときに0から作る場合はもちろんですが「Wordpress」などのCMSを利用して作ろうと思ったとしても細かいところを変更したいときなどに最低限のHTMLやCSSの知識があることはとても役に立ちます。
今の時代検索すればいろいろなやり方が書いてありコードをコピーするだけにしてくれている親切な情報提供者もたくさん存在しますがコードの意味が分かっていなければ最悪ホームページが壊れる危険性もあります。
一から作れるほどやる気はないけれど文字のサイズや色を変えたり簡単な表やリストを作ってみたい。
少しレイアウトを変更してみたい。
そんな欲求はサイトを作っていくうちに必ず出てきます。
そんな時何もわからない状態では満足に編集することができません。
HTMLやCSSはWeb構成の基本ですので他の「Javascript」や「PHP」の勉強にも必要です。
基礎の基礎だけであればそんなに時間をかけずに学習できるので興味のある人はぜひおすすめする参考書で勉強してみてください。
HTML/CSSって何？
参考書を紹介する前にまずはHTMLやCSSがどういったものなのか素人ながら軽く説明したいと思います。
知ってるから参考書を早く知りたいという人は→初心者が選んだおすすめ参考書へ飛んでください。
HTMLとは何か？
HTML（Hyper Text Markup Language」とはホームページを構成するためのマークアップ言語です。
W3C（World Wide Web Consortium）によって決まりが決められており現在はHTML5が主流になっているのでこれから勉強する人はHTML5を勉強していくといいと思います。
基本的に数年に一回バージョンアップされていくのでそれぞれの学習する時期の最新の言語を勉強するのがいいでしょう。
言語なので決まった組み合わせがあり、例えば
とすれば間の「サンプル」がタイトルであることを示します。
他にも例えば
<table>
<tr>
<th>リンゴ</th><td>100円</td>
</tr>
<tr>
<th>メロン</th><td>500円</td>
</tr>
</table>
といった風にHTMLで書くと
| リンゴ | 100円 |
|---|---|
| メロン | 500円 |
こんな感じの表を作れたりします。
枠をつけたり背景色を変えたりはCSSでの修飾も入っているのでHTMLで書くだけでは同じ表にはなりませんがそんなものだと思っておいてください。
「Internet Explorer」や「Google Chrome」といったブラウザはこういったHTMLで書かれたものを読み取り普段インターネットをするときに見慣れたページを表示しています。
このページでもいいですし好きなページで右クリックして「ページのソースを表示」をクリックしてみてください。
アルファベットをメインとした文字の羅列がみられると思います。
これを読み込んで普段目にしているサイトを表示しているのです。
CSSとは何か
CSS(Cascading Style Sheets)は簡単に言うとHTMLを装飾するためのものです。
こちらもW3Cによって規定されており現在の最新のバージョンはCSS3です。
CSSはバージョンによって異なるのではなく基本的に次々に機能が追加されていくというものなので古いものしか知らないから困ったことになるということは基本的にはないようです。
装飾とはどのように表示するかというものです。
例えば
h1{color :#af0c0c;}
と書くとHTMLで書いた例の<h1></h1>で囲った「サンプル」の文字の色が赤い色になります。
他の例だと画像を文章の右に配置するか左に配置するかといったことを決めたりします。
この二つがホームページを作るために必要な最低限の知識だと思っておけば問題ないです。
初心者が選んだおすすめ参考書
まだまだ勉強を始めたばかりで学習した参考書は少ないですが最低限の知識は身につけられたのでおすすめの参考書を紹介したいと思います。
いろんなレビューを見て厳選して選んだものであり、実際に学習して問題なく理解できたので自信をもっておすすめします。
実は前に適当に買ったHTMLの参考書をやってみたことがあったのですがいまいち理解が深まらず途中でやめてしまったという経緯があるのでできるだけ評判の高い参考書を選び不安であるなら書店で実際に中身を確認してから購入することをおすすめします。
スラスラわかるHTML&CSSのきほん
HTMLを始めて学習する人が無理なく理解を進められるように考えられたわかりやすい参考書です。
「webはどのように構成されているのか」といった基本的なことから「実際にHTMLを書くときのテキストエディタのダウンロード方法」といった道具の準備の段階から説明が始まるのでパソコンがあまり得意ではない人でも躓かないよう配慮されています。
操作方法もWindowsとMACどちらも画像付きで別に分けて書いてあるのでどちらのOSを使っている人でも安心して選ぶことができます。
そしてHTMLやCSSの基本的な用語や書き方のきまりを優しく丁寧に解説してくれているのでこれらの世界にすんなりと入っていくことができます。
最後には実際にサーバーを契約して誰でも閲覧できるようにサイトをネット上に置くやり方まで解説してくれています。
またこの参考書は説明に従ってサンプルサイトを作っていくので少し進めるごとに達成感を感じることができます。
また入力するコードも実際に入力する画面の写真と入力内容が分けて表示されているので何を書いているのか読み取ることが大変なんてことは起こりません。
しかしながらこれだけ初心者に配慮してくれている都合上あくまで基本中の基本だけしか書かれていないのでこの本だけで基本的なことはすべて網羅するのは少し難しいでしょう。
まあこの本をやってみてもっと勉強したいと思う人はステップアップして他の参考書を勉強して知識を増やせばいいですし、疲れたからもういいやと思う人はこの本だけでやめても最低限の知識がみにつくのでWordPressなどを利用する際の助けになります。
ちなみに僕は日曜日の朝9時から初めて4時頃に一冊を終えました。
間に食事をとったりと休憩を挟んでもこれぐらいでできたので学習者のレベルやタイピングの速さにもよるとは思いますが気軽に始められる参考書であることは間違いありません。
作りながら学ぶHTML/CSSデザインの教科書
こちらも初心者を対象にHTML、CSSの基礎から学ぶことができます。こちらもおすすめのテキストエディタや画像編集ソフトの紹介からサーバーにアップロードするところまで解説してあり初心者が勉強しやすいように工夫されています。
しかしながら初心者を対象にしてはいるのですが先ほどの本に比べるといささか硬派な印象を受ける参考書です。先ほどの本が誰でも興味をもって理解できることに関心を注いでいるのに対し、こちらの参考書は興味があってやる気にあふれている人対象の解説です。
小中学生相手の授業と大学生向けの授業の違いといった感じです。なので最低限の基本の説明はしてくれてはいるのですが全く知識がない状態だと非常に苦労することでしょう。
それゆえこの本は二冊目以降の参考書としておすすめします。逆に誰でもわかることに気を使いすぎていない分内容はしっかりと充実しているのでこれ一冊で基本的な知識は大体完成します。
昔HTMLは勉強していたからある程度はわかっている人や他のプログラミング言語を知っているから大丈夫というできる人以外はまず「スラスラわかるHTML&CSSのきほん」で基本的な知識を身に着けてからこの本を始めてください。
ちなみに僕はkindle版を購入しました。値段が半額近くだったのも理由ですがページ数が340ページもあるので本としてはとても分厚く持ち運べないと感じたからです。
Kindle版の欠点としては見る端末によっては見にくくて困るだろうとがあります。この本には当然htmlやcssのコードが書いてあるのでどうしても細かい字になっているところがあります。
僕はFire8 タブレットを使っていたのでさほど不便は感じませんでしたが小さな端末しか持っていない人は困るかもしれません。
まぁこれらの参考書はパソコンの横に置いて読みながら作業するのが基本で外で読むものではないので重いというのはさほど欠点にはならないかもしれません。もしKindle版と紙の本で値段が変わらないなら紙の本の方が便利だとは思います。
補足
おまけで個人的に読んでいてわかりにくかったところを簡単に解説しておきます。
これは本を買った後の話なので本を購入してない人は飛ばしてください。
一つ目
この本のCSSの記述で
” #pageBodySub .newsList ul li time{ ”
のようなセレクタの指定をしていますがこれは
pageBodySub のid のタグの間の newsListのクラスを持ったタグの間の ul タグの間の li タグの間の timeを指定するというように初めに書いたものから順に範囲を狭めて指定していっています。
セレクタの指定はこのように半角スペースを間に挟むことで広い範囲から順に指定していくことができます。
ちなみに<p class=”main”>を直接指定したいときは
p.main
のようにすることで指定できます。
二つ目
8章の”スライドショーを作ろう”というページではプラグインを自分でサイトからダウンロードするよう指示されていますが本が書かれた時から更新されて現在は本の内容と全く同じものではなくなっています。
なので説明の通りにしても結果が異なってしまう可能性があるのでダウンロードした完成品のサンプルからプラグインをコピーしてきて学習することをおすすめします。
HTML5 & CSS3 デザインレシピ集
先ほど紹介したスラスラわかるHTML&CSSのきほんと同じ作者の本です。上記が初心者向けにわかりやすくまとめてくれていたのに対してこちらは実際にサイトを作っていくときに使える手法が文字通りレシピのようにまとめてあります。
一からHTMLやCSSを学ぶという点では不向きですが実際にサイトを作っていく中でこの本があるととても便利です。実際に表を作ってみようと思った時などに目的のところだけを参照するという使い方をしていますがとても便利に使えています。
300通りのテクニックが書かれておりページ数も639ページまであるととても分厚い本ですがその分辞書のように使えるので実際にホームページなどを作っていく人は横に置いておくだけで安心できます。
紙か電子版かの選択ですが外でも見たいと言う人以外は紙の本の方が便利なような気がします。よく使うところには付箋などを張っておくと便利ですし見たいページを参照するまでにかかる時間は紙の本の方が早いと思います。
ただ大きくて重いので思いのほかスペースをとるのも事実です。場所をとりたくない場合は電子版を選んでおくのがいいかもしれません。
まとめ
入門におすすめの二冊の参考書はどうでしょうか？
僕もまだまだ勉強中なので今も別の参考書を空き時間にちょこちょこ進めています。
そちらも終わったらレビューしますね。
いきなり難しい参考書を手にして難しさにモチベーションを保てなくなるのは損なのである程度簡単で親切な参考書からステップアップしていくのをおすすめします。
実際に僕自身初めて勉強を始めて挫折してから丸一年ぐらい何もやってませんでした。
初めに使った時間と参考書の購入費用はほぼ無駄だったといっていいでしょう。
自分に合った簡単な参考書を選ぶことがとても大切になります。
せっかくのやる気を無駄にしないよう参考書選びは慎重に！
ちなみにこれらの参考書もAmazon student会員であれば10%のポイントとして還元されます。
普通に購入するよりお得なので会員の方はAmazonでの購入をおすすめします。 →Amazon Studentに入ろう
