MdNCORPORATION

現場でかならず使われている CSSデザインのメソッド

現場でかならず使われている CSSデザインのメソッド

佐々木 恵 著/錦織 幸知 著/山川 祐一郎 著/前川 昌幸 著/棧敷 友香子 著/窪木 博士 著/北川 貴清 著/小浜 愛香 著/KLEE Atelier*Spoon 著
本体 2800円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-09-25
仕様 B5判/224P
ISBN 978-4-8443-6368-2
「レイアウト」「デザインパーツ」「インターフェイス」の3テーマ別に、実際のウェブ制作でよく使用される表現に絞り込んで、スタイルシートのデザインアイデアを多数紹介しました。現在主流となっているデザインや技術、逆に主流でないデザインや技術といったものを明記し、デザイナーのみなさまの疑問を解消します。現在の実際のサイト制作でよく使われていて、なおかつ今風のサイトデザインにすることができるCSSのアイデアブックです。


■ページ見本










目次

PART1. レイアウト
序論 2013年前後のレイアウトのトレンド
オーソドックスな2段組みレイアウトのページ
オーソドックスな3段組みレイアウトのページ
ウインドウ幅にあわせて可変するリキッドレイアウト
グリッドカラムレイアウトのページ
ヘッダ、フッタを固定したページ
ボックス感のあるデザインのページ
フォントサイズを切り替えられるページ
Webフォントを活用したページ
読者を疲れさせない長文レイアウトのコツ
スマートフォン向けのトップページ
PCでもスマートフォンでも見やすいレスポンシブデザイン
コラム CSS3での新しいレイアウト手法

PART2. グラフィック
序論 2013年前後のグラフィックパーツのトレンド
カルーセルを配置したページ
ページ全体が切り替わるカルーセル
隙間なく写真を敷き詰めたギャラリーページ
サイズに合わせてレイアウトが変わるグリッド型ギャラリー
写真を大きく配置したギャラリー
スマートフォン向けのフォトギャラリー
ダイナミックに写真がスライドするパララックスページ
固定背景を活かしたスクロールレイアウト
コンテンツをポップアップ表示するページ
吹き出しのツールチップをうまく使ったページ
情報量が多くても見やすい表組みデザイン
コラム Flashに代わる技術とは?

PART3. インターフェイス
序論 2013年前後のインターフェイスのトレンド
ドロップダウンメニュー付きグローバルメニュー
スムーズスクロールに対応したグローバルメニュー
サイドバー型のグローバルメニュー
多くのメニュー項目を持つメガドロップダウンメニュー
スマートフォン向けのナビゲーション
アコーディオンを活かしたページ
タブを活かしたページ
使いやすいユーザー登録フォーム
手書き風デザインのお問い合わせフォーム
スマートフォン向けのお問い合わせフォーム
コラム HTML5で強化されたフォームの使いどころ

索引
著者紹介

ダウンロードデータ

現場でかならず使われている CSSデザインのメソッド

サンプルデータダウンロード

このたびは、「現場でかならず使われている CSSデザインのメソッド」をご購入いただきまして、誠にありがとうございます。
以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


CSS_Method_sample.zip(25.2MB)


[収録内容]
001_2column_layout
002_3column
003_liquid
004_gridcolumn
005_fixed_header
006_boxlayout
007_fontsize
008_webfont
009_longtext
010_smartphone_top
011_responsive
012_carousel1
013_carousel2
014_gridgallary1
015_gridgallary2
016_bigphoto
017_spgallery
018_parallax
019_bgfix
020_popup
021_tooltip
022_table
023_dropdown
024_smoothscroll
025_sidebar
026_megadrop
027_navigation_for_smartphone
028_accordion
029_tab
030_form
031_handwriting_form
032_spform


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

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

サンプルデータには「サンプルファイルについて.txt」が同梱されていますので、ご使用の前に必ずお読みください。

本サンプルは本文記載のコードの確認用としてご提供するものです。一部のコードの実行には、機種、OSのバージョン、ブラウザのバージョンに左右されるため、環境によってはうまく動作しない恐れがあります。あらかじめご了承ください。

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

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただし「jQuery」等の一般に公開されているJavaScriptライブラリについては、各ライブラリのライセンス条件に従います。


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

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

お詫びと訂正

『現場でかならず使われている CSSデザインのメソッド』

 お詫びと訂正のお知らせ



このたびは、『現場でかならず使われている CSSデザインのメソッド』をお買い求めいただきまして
誠にありがとうございます。

本書の解説内容に誤りがございました。
該当箇所は下記になります。

●58ページ:【4-2】のソースコード
●63ページ:【2-1】のソースコード中のピンク色の文字部分
●66ページ:【8】の本文 および 【8-1】のソースコード
●157ページ:【6-1】のソースコード
●201ページ:【11-2】のソースコード

修正したPDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。


修正PDFのダウンロード

teisei_6368.zip(11.6MB)



ご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。



こだわりの年賀状を送りたい!ワンランク上を目指す助っ人アイテム決定版

新年を気持ちよく迎えよう!日本や世界の感動的な絶景写真集&カレンダー