サイトを作りながらデザインの流れを学ぼう！ [書評]HTML/XHTML&スタイルシートレッスンブック
公開日：
:
最終更新日：2014/01/08
デザイン
記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
実際に1つのサイトを作り上げていく過程を体験することによって、HTMLとCSSでどうやってサイトをデザインしていけば良いのかが分かる。自分が求めていたのはこういう本。
2011年9月12日現在、Amazonベストセラー商品ランキングのHTMLカテゴリで2位。
個別のタグやCSSは分かるけれど・・・という方に
僕は約16年くらい前からインターネットを始めている。ホームページを初めて作ったのも16年くらい前だ。当時はテキストエディタを使って、タグを手で打ってHTMLを書いていた。なので、基本的なHTMLタグは当時から理解しているし、今も理解している。
しかし、2002年くらいからしばらくはWeb系ではなくWindowsやVisual StudioやVisual C++などの仕事にドップリつかっていた。なのでHTMLやCSS、Perlなどの話題からはしばらく離れていた。
2008年くらいからWeb開発の仕事に携わり始めたけれど、僕が主に関わっていたのはRubyやRailsやSQLなどで、やはりHTMLやCSSなどからは遠ざかっていた。
最近になってブログが楽しくなってきたり、あるいはherokuなどを使って独自のサイトやサービスを作る機会が増えてきて、「そろそろHTMLやCSSを自由自在に扱えるようになりたいなー、ならないとなー」とは思っているけれど、タグ辞典やCSSリファレンスを見ても、個々の知識が頭に入るだけで、「じゃあ実際にどうやってサイトのデザインを進めていけばいいの？」という疑問はずっと残っていた。
そして今回紹介するHTML/XHTML&スタイルシートレッスンブックを書店で手にとった際、「これだ！」と思った。
実際に1つのサイトを作り上げていく過程を体験することによって、HTMLとCSSでどうやってサイトをデザインしていけば良いのかが分かる。
自分が求めていたのは、こういう本だったのだ。
欲を言えば、こういったステップバイステップ形式で様々なデザインのウェブサイトを作りこんでいく過程が分かる事例集的な本、あるいは中級や上級などの本があればいいのに・・・と感じている。
他の書評記事はこちらからどうぞ。
目次
Chapter1 ページを作ってみる
1.ホームページを設計する
2.Webページの土台を作る
3.Webページにタイトルを付ける
4.見出しを表示する
5.文章を表示する
6.コピーライトを表示するChapter2 文字のデザイン
1.文字の大きさを変える
2.フォントの種類を変える
3.すべての文字の色を変える
4.一部分の文字の色を変える
5.文字を強調する
6.文字の斜体を解除する
7.文書中心のコンテンツページを作る
8.改行をコントロールする
9.行の間隔を広くするChapter3 リンクを作る
1.ページとページをリンクで結ぶ
2.リスト形式でメニューを作る
3.メール送信用のリンクを作る
4.リンクの色を変える
5.カーソルを重ねたときのリンクの色を指定する
6.一部分のリンクの色を変える
7.メニューを横に並べて表示する
8.リンク部分の下線を消す
9.トップページに戻るリンクを用意するChapter4 背景と罫線のデザイン
1.コンテンツを罫線で囲む
2.背景に色を付ける
3.メニューバーを作成する
4.ヘッダーバーを作成する
5.見出しにマークを付ける
6.見出しに下線を表示するChapter5 画像のデザイン
1.画像作りに必要なものを用意する
2.Webページに画像を表示する
3.タイトル画像を作成する
4.背景に画像を表示する
5.行頭にマークを表示する
6.文章の中に画像をレイアウトする
7.一部の画像のレイアウトを変更するChapter6 横幅と配置のアレンジ
1.コンテンツの横幅を指定する
2.文字や画像を中央揃えで表示する
3.段落などを画面の中央に配置する
4.コンテンツの間隔を調整するChapter7 テーブルとフォームのアレンジ
1.テーブルを作成する
2.文字と罫線の間隔を指定する
3.テーブルの大きさを指定する
4.文字の位置揃えを指定する
5.テーブルの背景色を指定する
6.罫線のデザインを指定する
7.罫線をつなげて表示する
8.コメント送信フォームを作成する
9.フォームのデザインをアレンジするChapter8 ページを公開する
1.Webページの公開に必要なものを用意する
2.Webページのデータをサーバーに置くChapter9 パワーアップアレンジ
1.ページの左側にメニューを表示する
2.デザイン設定を共有する
