リファレンスを使う前に読んでほしいWebデザインの心得

概 要

あなたは、知ったかぶりのWebデザインをしていませんか? 優れたWebデザイナーになるには、HTMLとCSSをマスターすることはもちろん、テキストの読みやすさや情報へのアクセスのしやすさなどのデザイン知識も必要です。本書は、Webデザインの意味から、文章の構造化、レイアウトのルール、色使いの心得など、Webデザイナーの基礎知識をざっくばらんな読み物風にまとめました。あなたのWebデザインの起点になる知識が満載です!

著者 園田誠
価格 本体2000円(税別)
ISBN 978-4-7980-4217-6
発売日 2014/11/8
判型 B5変
色数 4色
ページ数 256
CD/DVD
対象読者 入門
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

序 章 知ったかぶりのWebデザインが危ないワケ

心得1 Dreamweaverが使えるからいいじゃん、じゃない。

心得2 すごいサイトを真似すればいいってもんじゃない。

心得3 リファレンスしか使わない、使えないあなたに必要なもの。

第1章 文章構造化の心得

心得4 今さらといわずHTMLの役割を自分で言える方がいい。 [ HTMLの役割 ]

心得5 私は仕事の道具は選ばないとキリッと言えた方がいい。 [ HTMLの作成環境 ]

心得6 たとえHTMLが初めてでも恥じる必要はまったくない。 [ HTMLの書き方 ]

心得7 書いたHTMLが正しいかどうか知るのに特別な方法はいらない。 [ HTMLの見方 ]

心得8 なんだか難しい「構造化」という言葉にビビっちゃいけない。 [ 文書の構造化① ]

心得9 あくまで本文の話が本分。 [ 文書の構造化② ]

心得10 情報を見やすく伝えるためにデザインがあるのだとまず断言しよう。 [ デザインの必要性 ]

心得11 日本語と英語は違うと理解していれば結果は大違いになる。 [ 言語による差異 ]

心得12 強調したければ太い字を使うものとは思い込まない方がいい。 [ 語句を強調するタグ(strong) ]

心得13 言葉で説明しにくい微妙なニュアンスのタグもある。 [ 語句を強調するタグ(em) ]

心得14 タグの役割が永遠不変だと思い込まない方がいい。 [ 語句を引用するタグ(iとq) ]

心得15 ドキュメント(文書)という区切りができたことを知っておく。 [ 新しい構造化のためのタグ(article) ]

心得16 セクション(項目)という区切りができたことを知っておく。 [ 新しい構造化のためのタグ(section) ]

心得17 見た目に影響しないタグだからとバカにしない方がいい。 [ 一見意味のないタグ(divとspan) ]

心得18 CSSに進む前にあえてHTMLを振り返る余裕を持つ。 [ CSS事始め ]

第2章 ページ仕分けの心得

心得19 CSSはHTML専用の化粧品だと割り切った方がいい。 [ CSSの役割 ]

心得20 CSSには3つの書き方があると心得る。 [ CSSの書き方 ]

心得21 フォントサイズは大事な単位の話も入る超キホンと心得る。 [ フォントサイズと単位 ]

心得22 CSSを書くためのもっともエレガントな方法がある。 [ CSSを書く場所 ]

心得23 本当に意味ないものを入れるにはコメントを使う。 [ HTMLとCSSのコメント ]

心得24 脇道に逸れたら逸れたと伝えてやらなくちゃならない。 [ 新しい構造化のためのタグ(aside) ]

心得25 すべての見出しには厳しい上下関係がある。 [ 見出しのためのタグ(h1~h6) ]

心得26 誰々さんちのなんとか子ちゃんのような指定方法がある。 [ 親子関係とセレクタ ]

心得27 名札があるからお気に入りのあの子をズバリ指名できる。 [ id属性の役割 ]

心得28 クラス分けというのは似たものを十把一絡げにする方法である。 [ class属性の役割 ]

心得29 見えないかも知れないけどすべての要素には枠線というものがある。 [ 枠線の考え方 ]

心得30 すべての要素には外と中に余白がある。 [ 余白の考え方 ]

心得31 ヘッダはすべてのページの顔になると心得る。 [ ヘッダの構築(header) ]

心得32 ヘッダの見た目を整える。 [ ヘッダのスタイル設定 ]

心得33 ヘッダにはサイトの案内板の役割もあると心得る。 [ ナビゲーションのためのタグ(nav) ]

心得34 意外と奥の深いアンカーの動きを知る。 [ リンクのためのタグ(a) ]

心得35 ヘッダはキレイに見えるに越したことはない。 [ ヘッダのレイアウト ]

心得36 CSSはHTMLからキレイに切り離せる。 [ CSSとHTMLの分離 ]

心得37 中と外では書き方も微妙に違う。 [ CSSの書き分け ]

心得38 Webデザインもファイル構造抜きには語れない。 [ ディレクトリ構造と参照 ]

心得39 フッタには重要じゃないけど見せたいものを置く。 [ フッタの構築(footer) ]

心得40 デザイン的な意味でのフッタを作る。 [ フッタのスタイル設定 ]

第3章 色使いの心得

心得41 色使いがヘタなのはキミのせいじゃない。 [ 色使いの意味 ]

心得42 白が明るく黒が暗いなんてあたりまえじゃないとは言わせない。 [ 色の3要素:明度 ]

心得43 あらゆる色が花輪のようにぐるっと全部つながっている。 [ 色の3要素:色相 ]

心得44 澄んだ色と濁った色が清濁あわせて語れれば色の道は一人前。 [ 色の3要素:彩度 ]

心得45 色の指定はコンピュータの都合に合わせて決められている。 [ 16進数による色の指定方法 ]

心得46 コンピュータ的記述法になじめないときのための救いの神がいる。 [ 10進数による色の指定方法 ]

心得47 色作りは当てずっぽうでやればいいわけじゃない。 [ 色相環による色の選択① ]

心得48 肌色の作り方で悩むのは小学校の写生と同じ。 [ 色相環による色の選択② ]

心得49 どうせなら相性のよい配色を使う方がいいに決まっている。 [ よい配色の考え方 ]

心得50 斜め向こうの配色は人間と同じでなぜか相性が悪くなる。 [ 悪い配色の考え方 ]

心得51 色に寒さや暖かさのある印象などすべては言葉で説明できる。 [ フッタのスタイル設定 ]

心得52 桃太郎にふさわしい色を付けてみる。 [ 配色の実践 ]

心得53 痩せ対策のために太るってスゴイうらやましい。 [ 基本フォントの配色 ]

第4章 配置と装飾の心得

心得54 四角いブロックを置いていくのが配置の基本。 [ 視覚的ブロックの作り方 ]

心得55 ブロックはどこにでも置ける…ワケじゃない。 [ ブロックの位置指定 ]

心得56 ブロックを横並びにするだけなのに意外と難しい。 [ ブロックの横並び配置 ]

心得57 ワイド画面やタブレット横置きを考えないと離脱される。 [ ワイド画面に対する考え方 ]

心得58 長い文を読ませるのに有効な段組を活用する。 [ 段組の考え方 ]

心得59 今風のページに必須のサイドバーはこう作る。 [ サイドバーの構築 ]

心得60 画像はただ配置すればいいってもんじゃない。 [ 画像の扱い方 ]

心得61 装飾はここぞというところに効果的に使わなければうるさいだけ。 [ その他の装飾要素 ]

終 章 おわりに

心得62 Webデザインはインダストリアルデザインの最たるものだ

PR

秀和システム