翔泳社の公式通販SEshopは全国送料無料!
ヘルプ 新規会員登録 ログイン
SEshop

CSS3逆引きデザインレシピ

株式会社サイバーエージェント 原 一成(著)

商品番号
132190
販売状態
品切れ
納品形態
宅配便にてお届け
発売日
2013年09月18日
出荷開始日
2013年09月19日
ISBN
9784798132198
判型
B5変
ページ数
320
キーワード
デザイン  逆引き  CSS  Web制作

3,080円(税込)(本体2,800円+税10%)
送料無料

280pt (10%)
ポイントの使い方はこちら

初回購入から使えるポイント500円分プレゼント

現在、本商品は販売しておりません。

※1点の税込金額となります。 複数の商品をご購入いただいた場合のお支払金額は、 単品の税込金額の合計額とは異なる場合がございますので、予めご了承ください。

現場の旬がわかる デザイン×ワークフロー実践レシピ集

モバイル端末の普及にともない、CSS3は知識として理解するものから、現場で使うものへと急速に変化してきています。本書は現場でCSS3を実装している方に向けた実践的なレシピ集です。CSS3で実装する際に、具体的にどのプロパティをどのような用途で使えばよいのか、デザインへの落とし込みで悩むケースも多いものです。

本書では、ボタン、ナビゲーション、背景、イメージ、フォーム、インタラクションなどの旬なデザインアイデアを集め、実装のコツをサンプルコードとともに解説しています。さらには、メンテナンス性を高める記述方法、SassやLESSといったCSSプリプロセッサの導入、CSSのコンポーネント化、サイト効率化など、開発現場の実践ノウハウも逆引き形式でまとめています。「現場のトレンド」がわかる1冊です。

第1章 CSS3時代のワークフロー

これからのワークフロー
これからのワークフロー
001 Web技術の歴史を学ぶ
002 Web制作の現場の分業について知る
003 CSS3時代のワークフローを知る
004 CSS3時代に必要なスキルとは?
CSS3の基礎知識
005 CSSの記述方法をおさらいする
006 CSS3で追加されたセレクタを知る
007 CSS3の代表的なプロパティを知る 角丸(border-radius)
008 CSS3の代表的なプロパティを知る 影(box-shadow,text-shadow)
009 CSS3の代表的なプロパティを知る グラデーション(linear-gradient,radial-gradient)
010 CSS3の代表的なプロパティを知る 透明度(opacity,rgba)
011 CSS3の代表的なプロパティを知る フレキシブルボックスレイアウト(flexbox)
012 befor/after疑似要素を使いこなす
013 Webフォントの基本を知る
014 ベンダープリフィックスについて知る
015 ブラウザ対応の方針と方法
016 メンテなすしやすいCSSとは?

第2章 デザインサンプル UIパーツ編

ボタン・ナビゲーション
017 吹き出しをデザインする
018 角丸ボタンを量産する
019 葉尿性のあるリストを作る
020 CSSだけでカウントする
021 タグアイコンを作る
022 パンくずリストを作る
023 ページネーションを作る
024 ナビゲーションを固定表示する
025 スマートフォンでhoverを表現する
026 CSSだけで様々な図形を 027 CSSだけで夕プ表現をする
028 区切リ線をデザインする
029 要素をカウントしてランキング表示する
030 擬似セレクタでわかりやすい表を作る
フォーム
031 ブラウザ標準のUIを変更する
032 デフォルトボタンを拡張する
033 入力フィールドを拡張する
034 ラジオポタン・チェックボックスを拡張する
035 ダイアログビューを作る

第3章 デザインサンプル 文字・背景・イメージ編

文字・背景
036 字にマーカーをつけて目立たせる
037 テキストシヤドウで魅力的な文字を作る①
038 テキストシヤドウで魅力的な文字を作る②
039 どんな背景でも読みやすい文字にする
040 テキストの中に背景画像を表示する
041 領域に収まらない文字を「...」にする
042 複数行の省略処理をする
043 Webフ才ン卜を使って伸縮可能なアイコンを表示する 044 Webフオン卜を使ってテキス卜を美しく表示する 045 光源を表現する
046 魅力的な背景を作る①
047 魅力的な背景を作る②
イメージ
048 透過でレイヤー表現をする
049 画像を可変表示する
050 写真のフL^一ムを作る
051 魅力的な力パー画像を作る
052 写真の上にキャプションを表示する
053 マウス才一パーで詳細情報を表示する
054 写真アルパムをリスト表示する
055 写真のフレームに画像を適用する
056 画像にフイル夕をかける

第4章 デザインサンプル インタラクション編

インタラクション
057 CSSで可能なインタラクションとは?
058 CSSTransformを使し、たし、
059 CSSTransitionsを使いたい
060 CSSAnimationを使いたい
061 ロ一デイングアニメーションを作る
062 アイキャッチになる動くアイコンを作る
063 効果的なマウスオーバ—表現をする
064 カウントダウンする
065 更新情報をそっと知らせる
066 スライドするメニューを作る
067 3Dでリストを作る
068 動く円グラフを作る
069 動く棒グラフを作る
070 動ぐシンプルな積み上げグラフを作る
071 動く立体的な積み上げクラフを作る

第5章 効率化

コンポーネントスタイル
072 コンポーネントスタイルとは?
073 スタイルガイドを作成する
074 コンポーネントを使ったサイト作り  075 CSSプリプロセッサとは?
076 CSSプリプロセッサの機能を知る
077 CSSプリプロセッサを使った開発の流れは?
078 CSSプリプロセッサを導入する
079 サイト高速化の鉄則
080 CSSはボトルネックになる?
081 パフオーマンスを調査する方法は?
CSSプリプロセッサ
パフォーマンス

各種問い合わせは以下のリンクからご連絡ください

関連商品

美大式 ビジネスパーソンのデザイン入門

1,980円(税込)

2024.05.17発売

おすすめ特集

法人・教育機関のお客様へ

【法人・教育機関のお客様へ】新年度の大口注文・お見積りなど、お気軽にご相談ください

Webデザイン特集

デザインやコーディングなど、Webデザインに役立つスキルが身につく書籍を揃えました

生成AI特集

テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介

新社会人におすすめの本

新社会人の役に立つスキルが身につく本。ビジネスパーソンとしてスタートダッシュを切ろう!

プログラミング教育の本

小学校から必修化!人気の『ルビィのぼうけん』ほかプログラミング教育の本はこちら

翔泳社のセミナー・講座

開発・ビジネス・マーケティング・EC運営・営業支援など、幅広いジャンルの講座を開催

特集をもっと見る