ずかとも（私）：過活動膀胱を患う頻尿おやじ。永遠の２０歳（本当は丙午生まれ）
昨年末から【HTML】と【CSS】の勉強を始めたアラ還の頻尿おやじです。
「これだけで基本がしっかり身につく
HTML/CSS & Webデザイン１冊目の本」
発行：翔泳社
著者：竹内瑠美 竹内直人
この本を買って勉強中です。
近い将来、自分でデザインし、HTML と CSS を用いて、このブログサイトを飾り付けてみたいと企んでます。ヘッヘッヘ。。。
まだ勉強の途中ですが、この「これだけで基本がしっかり身につく HTML/CSS & Webデザイン１冊目の本」の特徴を紹介させて頂き、これから勉強してみようという方の参考にして頂ければ嬉しいです。
|
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2234a207.7f3a9d89.2234a208.a8abe571/?me_id=1213310&item_id=20448468&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F0114%2F9784798170114_1_19.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
目次の紹介
まず「これだけで・・・HTML / CSS ＆ Web デザイン・・・」の目次を紹介します。
Part１ HTML を書いてみよう
01章：ウォーミングアップをしよう
02章：HTML のきほんを学ぼう
Part２ SNS リンク集を作ってみよう
03章：CSS のきほんを学ぼう
Part３ ２カラムページを作ってみよう
05章：ブログサイトの HTML を書いてみよう
06章：ブログサイトの CSS を書いてみよう
Part４ １カラムページを作ってみよう
07章：Web 招待状サイトの HTML を書いてみよう
08章：Web 招待状サイトの CSS を書いてみよう
09章：CSS アニメーションをつけてみよう
10章：レスポンシブウェブデザインに対応させよう
Part５ 複数ページのサイトを作ってみよう
11章：制作の流れと Web デザインのきほん
12章：レストランサイトの CSS を書こう（モバイル）
13章：レストランサイトの CSS を書こう（ＰＣ）
14章：参考サイトの活用方法を学ぼう
15章：Web サイトを公開する準備をしよう
「○章」の下にも「SECTION１」「SECTION２」といった小見出しがありますが、それは省略しています。
この本の特徴
「これだけで・・・HTML / CSS ＆ Web デザイン・・・」の特徴を紹介します。
ストーリー
出演者は、主人公である農園を営むカピバラの「カピぞうくん」。
カピぞうくんの恋のお相手「カピ子さん」。
そしてウェブアドバイザーの著者二人（人間として登場）。
カピぞうくんはカピ子さんに恋をします。
思いを伝え、やがて二人（二頭？）は結婚。
そして最後はレストランをオープン。
これらの過程でアドバイザーとともに HTML と CSS を用いてウェブサイトを作成、勉強していくというものです。
勉強するウェブサイト
以下の３つのサイトを作成することで HTML / CSS を学びます。
カピぞうくんが営む農園の紹介ウェブサイト
多くのはてなブロガーの方が使われている
- ヘッダー：サイトの上にあるブログタイトル
- フッター：サイトの下にある著作権表示（？）がある部分
- メインエリア：記事の部分
- サイドバー：プロフィールや最新記事がある部分
といったページの構成や、その作り方が分かります。
文字の大きさや色、線の太さ、写真の挿入など、基本的なことが理解できます。
二人（二頭？）の結婚パーティ招待サイト
スマホでも見ることができるサイトを作ります。
簡単なアニメーション（線が動くなど）や、ラジオボタンやチェックボックスの使い方も学びます。
二人（二頭？）で営むレストランの紹介サイト
複数ページ（例えば「メニュー」をクリックすると「メニューページ」へ飛ぶ）の構成や作り方を学びます。
２と３は説明の内容が薄いでしょ？？
私の勉強、１までしか進んでいないんです。。。
でも１まで進めば、はてなブログの「HTML編集」や「はてな記法」などが理解できるようになりました。
補助教材つき
最近のこの手の本（何かを勉強する本）は凄いですね。
発行元である翔泳社では、勉強用、練習用の素材（カピぞうくんの写真や、各サイトの HTML や CSS が書かれたデータファイル）が準備されており、本の指示に従えばそれらがダウンロードできる。
しかも動画も準備されていて、それを見ることで、本だけを見て勉強するより、より効率的に勉強できる。
久しぶりに勉強用の本を買った私には新鮮な驚きでした。
お陰で効率よく勉強できています。
勉強の進め方
この「これだけで基本がしっかり身につく・・・」では、ブラウザは「Google Chrome」を勧めています。
それはなぜか？
私も初めて知りましたが「開いたウェブサイトの HTML や CSS を見ることが出来る」からです。
また現れた HTML や CSS を書き換えることで、その変化を確認できます。
（見ているブラウザの上だけでです。どこかのサーバーにあるオリジナルデータには影響を与えません）
具体的な勉強の進め方は
- テキストに従って
- あらかじめ準備された HTML ファイルや CSS ファイルにコマンド（正確にはタグやプロパティなどと言います。要はルールに従った文字です）を記入し
- その変化を一つ一つブラウザ上で確認し理解を深める
といったステップです。
また、私が勝手に先生と思っているＬＳＳ（id:little_strange）さんのアドバイスに
「本の通りに記入した後、自分なりに変更して試してみるといい」
とありました。
色を変えてみたり、コマンドを変えてみたり、消してみたりして変化を確認しています。
これでより理解が深まりました。
皆さんも是非お試しください。
初めて HTML / CSS を勉強される方にはお勧めです。
|
|
ちょっと補足
この手の本は紙の本に限ります！
（電子書籍では利便性が劣ります）
「これだけで基本がしっかり身につく・・・」には電子書籍はないようですが。
＜未来へ向けての私は＞
頻尿ＷＥＢじじいを目指します。
ではまた。
