書店様へのご案内
広告掲載について
FAQ
訂正とダウンロード
お問い合わせ
電子書籍一覧
デザイン・グラフィック
素材集・フォント集
イラスト・アニメ
3DCG・映像
Web制作
プログラミング
IT・ビジネス
写真技法・カメラ
写真集
美術・建築
生活・趣味・実用
カレンダー・手帳・年賀状
料理の本棚
その他
MdN Pickup news
MdNからのお知らせ
月刊MdNバックナンバー
プレスリリース
MdNユーザー会員 新規登録
MdNユーザー会員 ログイン
FAQ
プライバシーポリシー
会社概要
採用情報
特定商取引法
利用規約
閉じる
デザイン・グラフィック
素材集・フォント集
イラスト・アニメ
3DCG・映像
Web制作
プログラミング
IT・ビジネス
写真技法・カメラ
写真集
美術・建築
生活・趣味・実用
カレンダー・手帳・年賀状
料理の本棚
その他
Web制作
Webデザイン
現場のワークフローで覚える Webサイト制作教室
現場のワークフローで覚える Webサイト制作教室
高橋のり 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
紙の本を買う
紙の書籍を購入
Amazon
ヨドバシ.com
電子版を買う
電子書籍版を購入
Kindle
honto
発売日
:
2012-04-20
仕様
:
B5変型判/320pP
ISBN
:
978-4-8443-6260-9
内容紹介
目次
お問い合せ
デザインのやりなおしが頻繁に起こる。モックアップづくりにすごく時間がかかる。CSSでボックスとボックスを離したいのに、なぜかいつもくっついてしまう。──Webデザインのプロセスとコーディングのしくみをきちんと理解していないと、いろいろなところでつまずいてしまうことがよくあります。 本書はこのような悩みをもつ方のために、「Webデザインってなに?」というそもそもの基本から、手戻りの起こりにくい設計図のつくり方、Photoshopを利用したモックアップ作成、HTML+CSSによるコーディングと、制作ワークフローに沿ってつまずきやすいポイントとスムーズな仕事の進め方を紹介しています。さらにHTML5、CSS3、jQuery、TwitterやFacebook等のWebサービスとの連携、スマートフォン対応、WordPress導入法など、いま現場で必要とされる技術を初学者の方にもわかりやすく解説。「HTML+CSSの文法は知っているけれど……」「一歩進んだ技術を修得したい!」という方にぴったりの内容になっています。 サンプルデータもダウンロードできるので、手もとで動作を確認しながら解説を読み進められます。超人気ブログ『Webデザインレシピ』の著者による必修のWebデザインレッスン、本日開講です!
→サンプルデータのダウンロードはこちら
→サンプルページの閲覧
→著者のブログ『Webデザインレシピ』
■ページ見本
目次
【現場のワークフローで覚える Webサイト制作教室】
INTRODUCTION Webデザインってなに?
LESSON001 Webデザインをするなら忘れちゃいけない3つのこと
ユーザビリティ・ターゲット・ゴールを明確に意識する
LESSON002 Webデザインにあたって注意しておきたいこと
ユーザビリティ(1)|見やすさ・読みやすさを犠牲にしない
ユーザビリティ(2)|ユーザーを不安にさせない
ユーザビリティ(3)|表示を軽くする
ターゲットへの訴求を考慮する
ゴールを明確に意識する
LESSON003 ユーザーの閲覧環境とWebデザインの関係
モニタ解像度とWebサイトのサイズ
Webサイトのサイズの決め方
ブラウザと使用できる技術の関係
ターゲットブラウザ・制作ポリシーの決め方
スマートフォン環境での閲覧
[COLUMN]
デザインのヒントはWeb以外にも
────────────────
CHAPTER ONE サイトの設計図をつくる
LESSON001 まず、Webサイト公開の目的とターゲットを明確に
目的とターゲットを決める
設計図にどのような影響があるか
LESSON002 コンテンツにあわせたWebサイトのレイアウト
版面率と図版率
文字のジャンプ率
LESSON003 コンテンツを整理してサイトマップを作成
サイトマップ
必要な機能とCMSの導入の検討
LESSON004 最終的な設計図となるワイヤーフレームづくり
ワイヤーフレームをつくる
ワイヤーフレームに書き込むこと
ページレイアウトのワイヤーフレーム
ラフデザインをつくろう
[COLUMN]
ワイヤーフレームづくりに使うツール
────────────────
CHAPTER TWO デザインモックアップをつくる
LESSON001 Webを制作するときのPhotoshopの設定
Photoshopの環境設定
Photoshopのカラー設定
LESSON002 モックアップづくりに便利なPhotoshopの機能
ガイド・グリッドを使う
スマートガイドを使う
LESSON003 大枠のレイアウトをつくってみよう
シェイプで描いていく
レイヤースタイルで装飾する
ショートカットの活用
シェイプにない形はマスクでつくる
複数のレイヤーを複製する
スマートオブジェクトでパーツづくりを効率的に
LESSON004 操作が伝わるUIエレメントをつくる
UIエレメントの考え方
立体感のあるボタンをつくる
そのほかのUIエレメントを作成する
LESSON005 モックアップから画像を切り出す
画像の切り出しの考え方
スライスの作業
画像を最適化する
残った画像の処理
LESSON006 CSS3による表現と画像による表現の違い
ドロップシャドウのついた角丸ボックス
グラデーションのついたボタン
[COLUMN]
アフォーダンスとUI
レイヤースタイルを2重に適用する
画像の最適化サービス
────────────────
CHAPTER THREE HTMLのマークアップで気をつけたいこと
LESSON001 HTMLは文書構造をマークアップする言語
レイアウトと文書構造の違い
意味が通るようにコーディングするのが大事
LESSON002 アウトライン構造をつくる(1) (X)HTMLのアウトライン
アウトライン構造はhx要素でつくる
アウトライン構造を保つために注意したいこと
LESSON003 アウトライン構造をつくる(2) HTML5のアウトライン
HTML5のアウトライン構造
セクショニング・コンテンツとヘッディング・コンテンツ
LESSON004 HTML5で変わった要素の分類と文法
HTML5の要素の分類
コンテンツモデル
LESSON005 HTML5での追加要素と意味が変わった要素
よりセマンティックになったHTML5
テキストレベルでの新要素
変更になった要素・廃止になった要素
LESSON006 HTML5でのマークアップの実際
シンプルになったHTML5の記述
Internet Explorer対策
[COLUMN]
HTMLの文法の正しさと文書構造の正しさは別のもの
セクショニング・ルート
アウトラインを確認するための便利ツール
────────────────
CHAPTER FOUR CSSで装飾する
LESSON001 ボックスモデルと視覚整形モデルのしくみ
ボックスモデル
視覚整形モデル
包含ブロック内でつくられるボックスの種類
LESSON002 displayプロパティとインライン/ブロックの関係
ブロックボックス
インラインボックス
LESSON003 ボックスの配置(1) 通常フローのしくみ
通常フロー
マージンの相殺
LESSON004 ボックスの配置(2) フロートのしくみ
フロートとは
clearプロパティ
clearを指定した要素に対するマージン
フロートをもっと理解しよう
実際にレイアウトをつくってみよう
横並びのナビゲーションメニューをつくってみよう
LESSON005 ポジションプロパティを使った配置
相対配置──position:relative
絶対配置──position:absolute
固定配置──position:fixed
LESSON006 z-indexで要素の重なり順を変更する
z-indexプロパティのしくみ
複数のスタック文脈が存在するケース
LESSON007 CSS3を使ったさまざまな表現
ボックスシャドウ──box-shadow
角丸──border-radius
テキストシャドウ──text-shadow
グラデーション──gradient
LESSON008 Webフォントを使ってみよう
WEBフォントとは
[COLUMN]
匿名ボックスとは
インラインボックスで上下の間隔を調整するには
br要素へのclearプロパティの指定
z-indexとクリッカブルエリア
角の丸みに楕円を指定する
IEのフィルター機能
CSSのフレームワークを使ってみよう
────────────────
CHAPTER FIVE jQueryでインタラクション
LESSON001 CSSがわかればjQueryは簡単
そもそもjQueryとは?
CSSに似ているjQueryの書き方
jQueryのよく使うメソッド
jQueryの実行のタイミング
LESSON002 jQueryでつくるドロップダウンメニュー
HTML+CSSの準備
jQueryでコーディング
孫メニューをつくってみる
LESSON003 プラグインを利用したコンテンツスライダー
jQueryのプラグイン
コンテンツスライダーの作成
コントロールボタンを設置
Easingプラグインを併用する
LESSON004 フォームの入力項目をチェックする
フォームのバリデーション
チェックのしくみ
パスワードのチェック
選択項目を必須にする
ツールチップの表示オプション
LESSON005 フォームエレメントのデザインを変える
チェックボックス/ラジオボタンを変更する
チェックボックスの変更
ラジオボタンの変更
UI.Elementsを使う(1)|チェックボックス
UI.Elementsを使う(2)|ラジオボタン
UI.Elementsを使う(3)|セレクトボックス
LESSON006 jQuery UIでつくるアコーディオンパネル
jQuery UIとは
jQuery UIでアコーディオンパネルを作成
jQuery UIでタブを作成
LESSON007 jQueryを使ったレイアウトテクニック
高さの違うボックスを揃える
ボックスを敷きつめるMasonry.js
ウィンドウいっぱいの背景画像
開閉するブロック
スクロールで出現するエレメント
LESSON008 jQueryで文字サイズ変更
Font Sizerを使う
[COLUMN]
CSSメソッドの書き方
$()はjQuery()のエイリアス
エラーメッセージの設定
────────────────
CHAPTER SIX ソーシャルサービスと連携する
LESSON001 Twitterのボタンを設置する
ツイートボタンの設置の基本
オリジナルデザインのツイートボタン
LESSON002 Facebookのプラグインを埋め込む
いいね!ボタンを設置する
投稿ボタンをオリジナルのデザインにする
LESSON003 ソーシャルブックマークのボタンの設置
Google+1ボタンの設置
はてなブックマークの登録ボタンの設置
そのほかのソーシャルブックマークボタン
LESSON004 Googleマップをカスタマイズ
通常のGoogleマップの埋め込み
jQueryプラグイン+Google Maps API
LESSON005 Googleを利用したサイト内検索
Googleカスタム検索を利用する
検索結果を別ページで表示する
LESSON006 YouTubeの動画を埋め込む
YouTubeの動画の埋め込み
プレイヤーをCSSでカスタマイズ
[COLUMN]
最新ツイートの表示
Ustream動画の埋め込み
────────────────
CHAPTER SEVEN スマートフォン対応サイト
LESSON001 スマートフォンサイトとPCサイトの違い
スマートフォンサイトはPCサイトと同じ?
使用環境の違い
LESSON002 デバイスにあわせてHTMLやCSSを切り替える
スマートフォン対応の方針を決める
ユーザーエージェントを利用した振り分け
Media Queries(1)|スクリーンサイズに応じた切り替え
Media Queries(2)|解像度に応じた切り替え
LESSON003 スマートフォンサイトコーディングのポイント
Viewportを利用する
そのほかのスマートフォンならではの機能
LESSON004 Media QueriesでレスポンシブWebデザイン
レスポンシブWebデザインとは
レスポンシブWebデザインのメリット/デメリット
LESSON005 jQuery Mobileを使ってみよう!
jQuery Mobileとは
data属性を利用したマークアップ
ページ全体のマークアップ
jQuery Mobileのリンク
UIエレメントのマークアップ
フォームのUIエレメント
────────────────
CHAPTER EIGHT WordPressでサイト構築
LESSON001 WordPressでサイトを構築しよう
WordPressとは
WordPressについての予備知識
開発環境を整える
WordPressのインストール
Webサイトの表示
LESSON002 WordPressサイトのファイル構造
テーマフォルダの中を覗いてみる
部品化されたテンプレートファイル
テンプレートファイルとテンプレート階層
style.cssとfunctions.php
style.css
functions.php
LESSON003 テンプレートタグと記述のルール
テンプレートタグとは?
WordPressループとは?
実際にテーマを作成するには
LESSON004 固定ページ機能で小規模サイトを作成
WordPressの固定ページ機能
お知らせページの作成
トップページの作成
グローバルナビゲーションの作成
LESSON005 カスタム投稿タイプで更新型コンテンツを表示
カスタム投稿タイプを使う
カスタム投稿タイプの作成
カスタム分類を使う
[COLUMN]
WordPressのプラグイン
INDEX
tweet
シェア
はてブ
あわせてよく検索される書籍
制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選
デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊