MdNCORPORATION

プロとして恥ずかしくない 新・CSSデザインの大原則

プロとして恥ずかしくない 新・CSSデザインの大原則

Atelier*Spoon 著/大藤 幹 著/北川 貴清 著/きむら あつとし 著/境 祐司 著/高橋 としゆき 著/錦織 幸知 著/長谷川 広武 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2015-07-02
仕様 B5変形判/224P
ISBN 978-4-8443-6510-5
CSSによるデザインは、近年のスマートフォンの普及やブラウザの進化により、実力を発揮できる場面が増えています。従来は画像に頼っていた角丸やシャドウなどの凝った演出も、CSS3を利用すればコードだけで表現できます。画像と異なり解像度に依存しないため、モバイルデバイスの高解像度ディスプレイにも対応が容易です。PC側でも非対応ブラウザの淘汰が進んだことから、CSS3を積極的に活用できる状況が生まれているといえるでしょう。 本書ではこのような現状を踏まえ、Web制作者が必ず知っておかなくてはならないCSSの情報を改めてまとめました。CSSの基本文法から、各プロパティの詳細、迷いやすいCSSによる配置の仕組みまで、初学者の方に必要な基礎情報を網羅しています。また、CSSを使いこなすためには、文法の理解だけでなく、実際のWebページでどのようにコードを書くのかのノウハウの蓄積も大切です。本書の後半では「実践編」として、多彩なページレイアウト、各パーツの作り込み、そのほかのCSSに関連した手法や技術を盛り込んでいます。ベースとなる基礎知識と実際のコードをあわせて学ぶことで、現場で役立つCSSの総合的な実力を養える一冊です。


■ページ見本










目次

CONTENTS

本書の使い方

■CHAPTER1 [基礎編①]CSSの基本
01 CSSとは
02 CSSの文法
03 CSSのセレクタ
04 CSSのプロパティ
05 CSSによる色指定
06 CSSのボックスモデル
07 CSSとブラウザ&デバイス
08 CSSとアクセシビリティ+ユーザビリティ
09 CSSを書くときの注意点
[Column]リセットCSSとノーマライズCSS

■CHAPTER2 [基礎編②]CSSによる装飾
01 テキストのプロパティ
02 ボックスのプロパティ
03 画像のプロパティ
04 テーブルのプロパティ
05 リストのプロパティ
06 その他のプロパティ
[Column]CSSを検証する

■CHAPTER3 [基礎編③]CSSによる配置
01 フロートの仕組み
02 ポジションの仕組み
03 配置がくずれる場合のチェックポイント
[Column]CSS設計とは

■CHAPTER4 [実践編①]CSSによるページレイアウト
01 カラムレイアウト
02 部分的な多カラムレイアウト
03 固定+リキッド(フルード)レイアウト
04 グリッドレイアウト
05 要素をタイル状に並べるMasonryレイアウト
06 グリッドフリーなリキッドレイアウト
07 スマートフォンサイトのレイアウト
08 レスポンシブレイアウト
09 フロート以外のカラムレイアウト
[Column]SassをはじめとするCSSプリプロセッサー

■CHAPTER5 [実践編②]CSSによるパーツの作り込み
01 Font Awesomeを使ったアイコン付きゴーストボタン
02 文字の装飾
03 ロールオーバーエフェクト
04 Masonryで使えるボックスのデザイン3種
05 ナビゲーションの構築
06 プレースホルダーの弱点を補ったフォームのデザイン
07 背景の装飾
08 画像の効果(シャドウ・角丸・ぼかしなど)
[Column]CSSフレームワークとは

■CHPATER6 [実践編③]その他のテクニック
01 CSSスプライト
02 ページカールの透過PNG画像で視線を誘うレイアウト
03 CSSだけで実装するパララックス(視差効果)のシングルページ
04 サイトのテキストにWebフォントを使って表示する
05 CSSによる3D効果・アニメーション

INDEX

ダウンロードデータ

プロとして恥ずかしくない 新・CSSデザインの大原則
サンプルデータダウンロード


このたびは、「プロとして恥ずかしくない 新・CSSデザインの大原則」をご購入いただきまして、誠にありがとうございます。以下に本書を利用して学習を進める際の参考用として、掲載サンプルページのデータをダウンロードにてご提供しております。


MdN_CSS_Daigensoku.zip (約76MB)



■ダウンロードにあたってのご注意■


ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。



■ダウンロードファイル解凍時のご注意■


Windowsをご利用の場合は、ダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。


[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される



※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。


※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。


※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。


※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工しているため、ダウンロードしたサンプルデータとは異なる場合があります。あらかじめご了承ください。


※サンプルのなかには、オンライン上のライブラリやWebフォント機能を利用している等の理由から、ネットワークに繋がっていない環境、もしくはローカル環境では正常に動作しないものがあります。このような場合は、ネットワークに繋がったパソコン、もしくはWebサーバ上に設置したうえで機能をお試しください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊