6ステップでマスターする 「最新標準」HTML+CSSデザイン フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック

  • 著作者名:エビスコム
    • 書籍:3,110円
    • 電子版:3,110円
  • B5変型判:320ページ
  • ISBN:978-4-8399-6022-3
  • 発売日:2016年08月24日
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

フレキシブルボックスレイアウトを使ったレスポンシブWebデザインをきっちり習得!

本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。

Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。
スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも1段組みをベースとしたシンプルなものが求められるようになっています。
そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。
サンプルサイトの制作工程を6ステップに分け、

CHAPTER1 下準備
CHAPTER2 トップページの作成 - コンテンツ編
CHAPTER3 トップページの作成 - ナビゲーション編
CHAPTER4 コンテンツページの作成
CHAPTER5 記事一覧ページの作成
CHAPTER6 アレンジ

と順に進めていくことで、基本からアレンジの方法まで、効率よくマスターできるカリキュラムとなっています。
本書サポートサイトから学習用のファイルをダウンロードできますので、それを使って学習することができます。

「HTML5は2014年に正式勧告がリリースされ、2年が経とうとしていますが、まもなくHTML5.1の勧告もリリースされる予定です。CSSはさまざまな機能がCSS3やCSS4の規格として採り入れられ、策定作業が進められています。
同時に、OSレベルでのサポートの打ち切りなどにより、ブラウザの世代交代も強制的に進んでおり、主要ブラウザは最新のHTML+CSSをフルにサポートした状態になっています。
こうした現状をあらためてみると、
そろそろHTML5+CSS3の真価を発揮させてもいい時期
になったのではないでしょうか。」(著者「はじめに」より)

巻末にはHTMLとCSSのリファレンスも用意し、学習中に適宜参照できるようになっています。
これからWebページ制作を学びはじめる方にも、最新のHTML+CSSに興味がある方にも、これからのWebページ制作に求められるスキルやテクニックをまとめた1冊として、役立てていただければ幸いです。

続きを読む

商品を選択する

フォーマット 価格 備考
PDF 3,110 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

  

備考

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書: 『これからの「標準」を学ぶ マルチデバイス対応サイト構築』マイナビ出版刊
『これからの「標準」を身につける HTML+CSSデザインレシピ』同上
『HTML5 スタンダード・デザインガイド』同上
『CSS3 スタンダード・デザインガイド【改訂第2版】』同上
『スマートフォンサイトのためのHTML5+CSS3』同上
『XHTML/HTML+CSS スーパーレシピブック』同上
『WordPress3 サイト構築スタイルブック』同上
『WordPress3 デザイン&カスタマイズ スタイルブック』同上
『Movable Type サイトデザイン&レシピ事典』同上
『Dreamweaverデザインブック CC2015対応』ソシム刊
『WordPress デザインブック HTML5&CSS3準拠』同上
『HTML5&CSS3 デザインブック』ソシム刊
『WordPress レッスンブック HTML5&CSS3準拠』同上
『WordPress ステップアップブック』同上
『HTML5&CSS3 レッスンブック』同上

関連ページ

目次

CHAPTER1 下準備
1-1 1段組みをベースとしたページを最新のHTML/CSSで作成する
  1-1-1 1段組みをベースとしたWeb ページとは
    レスポンシブWeb デザイン
    セマンティクス
  1-1-2 最新のHTML/CSS
    古いブラウザのサポートについて
1-2 構築するページとサイト
  1-2-1 Webサイトの構造
  1-2-2 ページの構造と作成手順
  1-2-3 ページの配色
1-3 Webページのベースを用意する
  1-3-1 HTMLファイルに記述する設定
  1-3-2 CSSファイルに記述する設定
    HTML/CSSの編集に使用するテキストエディタ
    ページの表示確認に使用するブラウザ
    さまざまな画面サイズでの表示を簡単に確認する方法

CHAPTER2 トップページの作成 - コンテンツ編
2-1 ヒーローイメージ
  2-1-1 画像に重ねるテキストを表示する
  2-1-2 Webフォントで表示して字間を調整する
  2-1-3 ブラウザ画面いっぱいに画像を表示する
  2-1-4 SVGでロゴ画像を表示する
  2-1-5 リンクボタンを表示する
2-2 概要(アイコン+テキスト)
  2-2-1 概要のテキストを表示する
  2-2-2 アイコンを表示する
  2-2-3 3つの概要を横に並べる
2-3 概要(画像+テキスト)
  2-3-1 画像とテキストを表示する
  2-3-2 画像とテキストを横に並べてレイアウトする
2-4 概要(画像+テキスト:逆配置)
  2-4-1 コンテンツCをベースに新しいブロックを作成する
  2-4-2 画像の横幅を固定して並び順を変更する

CHAPTER3 トップページの作成 - ナビゲーション編
3-1 サイト情報
  3-1-1 サイト情報を表示する
  3-1-2 フッターのデザインを指定する
3-2 フッターメニュー
  3-2-1 フッターメニューを作成する
  3-2-2 3つのメニューを横に並べる
3-3 コピーライト
  3-3-1 コピーライトを表示する
  3-3-2 フッター内のパーツのレイアウトを調整する
3-4 SNSメニュー
  3-4-1 SNSメニューを表示する
  3-4-2 SNSメニューのデザインを指定する
3-5 ヘッダーのサイト名
3-6 ナビゲーションメニュー
  3-6-1 ナビゲーションメニューを作成する
  3-6-2 大きい画面ではナビゲーションメニューを横に並べる
3-7 トグルボタン
  3-7-1 トグルボタンを作成する
  3-7-2 トグルボタンでナビゲーションメニューを開閉する

CHAPTER4 コンテンツページの作成
4-1コンテンツページ
  4-1-1 コンテンツページを作成する
  4-1-2 記事のデザインを指定する
  4-1-3 パンくずリストを表示する
4-2アバウトページ
  4-2-1 アバウトページを作成する
  4-2-2 画像と沿革を表示する
4-3お問い合わせページ
  4-3-1 お問い合わせページを作成する
  4-3-2 地図を表示する

CHAPTER5 記事一覧ページの作成
5-1 カード型(画像+テキストを上下に配置)
  5-1-1 記事一覧Aのページを作成する
  5-1-2 記事の概要を表示する
  5-1-3 ブラウザ画面の横幅に応じて概要を横に並べて表示する
5-2 カード型(画像+テキストを左右に配置)
5-3 サムネイル型(画像+テキストを重ねて配置)

CHAPTER6 アレンジ
6-1 ヘッダーの色をアレンジする
6-2 ヘッダーとヒーローイメージを一体化したデザインにする
6-3 ヘッダーを画面上部に固定する
6-4 関連記事メニューを追加する
6-5 メタデータを記述する
6-6 ページの基本色をアレンジする

APPENDIX
HTMLリファレンス
  HTMLの基本文法
  HTMLの基本設定
  メタデータ
  セクション
  コンテンツ
CSSリファレンス
  CSSの基本文法
  セレクタ
  メディアクエリ
ボックスモデル
  ボックスの基本設定
  ボックスの種類
  フレキシブルボックスレイアウト
  ポジションレイアウト
  ボックス内のコンテンツのデザイン
  単位
  色の値
  変数
最適化
主要デバイスの画面サイズ
古いブラウザ用の設定

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?