サイトを作りながらデザインの流れを学ぼう! [書評]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.デザイン設定を共有する

関連記事

サンフランシスコのピア39にあるチャウダーズでクラムチャウダーを食す!

アップルの開発者向けイベント「WWDC2014」に参加するため

ミスドのカルピスドーナツとカルピスポンデリングを食べてみた!

ミスドで期間限定のカルピスコラボ商品「カルピスドーナツ」と「カルピ

十三カレー計画で牛すじカレーネギのせを食す!(大阪・十三)

「iPhoneアプリ開発キャンプ@大阪」のランチで、十三カレー計画

大阪・難波の加寿屋 法善寺でかすうどんを食す。ランチタイムはおにぎり2個まで無料!

大阪・難波の加寿屋 法善寺 (かすうどん KASUYA)で、かす

ライブドアブログで運営していた「あきお商店」を「卵は世界である」に改名しました

少し前からライブドアブログで「あきお商店」というブログをやって

→もっと見る

PAGE TOP ↑