好評いただいた「例題30+演習問題70でしっかり学ぶ HTML+CSS標準テキスト」の改訂版です。本書は、HTMLの主要なタグの使い方を例題を通してわかりやすく紹介し、HTML+CSSによるWebサイトの作成法から公開までを解説する書籍です。改訂で、HTMLのバージョンを「HTML Living Standard」に対応させ、Webのスマホ対応に必要なレスポンシブデザインの解説も追加しました。節末には実力アップのための演習問題も用意しています。例題&演習問題で、習熟度の確認・弱点チェックができ、HTMLの基本をしっかり身に付けることができます。
HTML作成からアップロードまで、解説+操作でしっかりわかる。
1日30分からはじめる。スキルを磨くなら、最初に選ぶ本!制作現場のコーディングが全部わかる。
11刷突破のベストセラーが最新情報にアップデート!
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!
絶対に外せない! レイアウト4つの原則とレスポンシブWebデザイン
今日から使える! 配色の基本と、実例デザインの配色見本集
ユーザーの心を動かす! 写真と図版の使い方、タイポグラフィの選び方
フレックスボックス、CSSグリッド、インタラクション、マーケティングの知識まで
この一冊でWebデザイナーに必須の基礎知識が網羅できる!
<本書の対象読者>
●これからWebデザインを学びたい初心者の方
●Webサイト制作に自信が持てない方
●1冊でWebデザイナーの基礎知識を網羅して学びたい方
CONTENTS
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Chapter 01 Webデザインの基本
Chapter 02 レイアウト
Chapter 03 配色
Chapter 04 写真と図版
Chapter 05 タイポグラフィ
Chapter 06 HTML5とCSS3
Chapter 07 インタラクション
Chapter 08 運用とマーケティング
Web制作にとどまらず、Webアプリやクラウドでも使われているHTML&CSS。本書は最低限必要な知識に絞って解説しています。これまでHTML&CSSを勉強したことがない方はもちろん、Web制作の概要を大まかに知りたい方、アプリ開発に先立ってHTMLとCSSの要点を短期間で知りたいエンジニアの方にもおすすめです。
「そろそろ常識?」シリーズは、会話形式の解説をマンガテイストに進化させ、マンガ、会話、チュートリアルをシームレスに組み合わせたニュースタイルの解説書。常識とされながらも覚えにくいテーマをピックアップし、要点をマンガでわかりやすく解説します。
Webページの基本3要素、HTML(構造)・CSS(デザイン)・JavaScript(動き)の解説を1冊に盛り込みました。第6版となる本書では、最新HTML5、CSS3の解説を増量。モダンブラウザ/iPhone&Androidにも対応し、近年のWebトレンドに合わせた、より実践的な内容になっています。ダウンロード可能なサンプルソースも一新して、よりわかりやすくなりました。これからWeb制作を学びたいビギナーから、実務でのリファレンスとして使いたい上級者まで、広くおすすめできる1冊です。
基礎から応用までステップバイステップでマスター。Web制作の現場で実際に使える機能を厳選して紹介。
Webがこれだけ普及しているにもかかわらず、HTTPやURIといったWebの基本技術をきちんと解説している書籍はあまりありません。右記は、執筆者やRubyで有名な高橋征義さんのHTTP関連本の出版状況に関するコメントです。「悲惨、のひとこと。状況は劣化しているとしか言いようがないような。今どきのひとはどうやってHTTPを勉強するんだろう? ソース読めとRFC読めだけ? いやそれは酷というものでしょう」WEB+DB PRESSの人気連載をもとにした本書では、Webの基本技術について丁寧に解説していきます。
新標準 HTML Living Standard 対応
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
必要な3つの基礎知識が1冊でわかる。
HTMLとCSSとJavaScriptを活用するためのWeb制作者必携書籍。
本書のテーマはWebサービスの実践的な設計。まず良いWebサービス設計の第一歩として、HTTPやURI、HTMLなどの仕様を歴史や設計思想を織り交ぜて解説。そしてWebサービスにおける設計課題、たとえば望ましいURI、HTTPメソッドの使い分け、クライアントとサーバの役割分担、設計プロセスなどについて、現時点でのベストプラクティスを紹介。
Webがこれだけ普及しているにもかかわらず、HTTPやURIといったWebの基本技術をきちんと解説している書籍はあまりありません。右記は、執筆者やRubyで有名な高橋征義さんのHTTP関連本の出版状況に関するコメントです。「悲惨、のひとこと。状況は劣化しているとしか言いようがないような。今どきのひとはどうやってHTTPを勉強するんだろう? ソース読めとRFC読めだけ? いやそれは酷というものでしょう」WEB+DB PRESSの人気連載をもとにした本書では、Webの基本技術について丁寧に解説していきます。
理工系大学の基礎情報処理の講座用に向けたテキストで、半期2単位15コマ程度の学習に使えるように意識されています。本書は第1部がHTML編、第2部がJavaScript編の構成になっており、いずれも例題で実際に新たな知識を確認しながら、学習を進めていく形式をとっています。学生に履修させる最初のプログラミングの授業で使うことを想定しており、単なるHTML+JavaScriptの学習ではなく、プログラミングの基礎を学べるようになっています。そのため、プログラムの設計手順やデバッグなどについても解説しています。HTML+JavaScriptによるプログラミングであるために、自宅でも学習が可能なように、特別なソフトのインストールは不要で、Webブラウザとテキストエディタだけで実習できます。
第2版では、主なCSSプロパティの解説を充実させました。
はじめに
第1部 HTML編
第1章 Webとは
1.1 Web
1.2 Webページ
1.3 簡単な例
1.4 歴史
第2章 HTMLの基礎知識
2.1 構造タグ
2.2 使用する文字について
2.3 見出しと本文
第3章 よく使うタグ
3.1 テーブルの例題
3.2 リスト
3.3 ハイパーリンク
3.4 イメージ
3.5 フォーム
3.6 その他のタグ
3.7 チェッカー
第4章 スタイルシート
4.1 使用例
4.2 働き
4.3 指定方法
4.4 スタイル指定の形式
4.5 セレクタ
4.6 divとspan
4.7 主なCSSプロパティ
第2部 JavaScript編
第5章 JavaScriptとは
5.1 JavaScript
5.2 JavaScriptの働き
5.3 scriptタグ
5.4 JavaScriptの有効化
5.5 簡単なプログラム
第6章 JavaScriptの基礎知識
6.1 基本
6.2 定数
6.3 変数
6.4 配列
6.5 関数
6.6 読みやすく書く
第7章 演算子
7.1 算術演算子
7.2 文字列連結演算子
7.3 代入演算子
7.4 「1を加減する」演算子
7.5 比較演算子
7.6 論理演算子
7.7 演算子の一覧
第8章 制御文
8.1 判断
8.2 繰り返し
8.3 エラー処理
第9章 最大値のプログラム
9.1 仕様を考える
9.2 手順を考える
9.3 プログラムを書く
9.4 レビューする
第10章 プログラミングの話題
10.1 テスト
10.2 不具合修正
10.3 デバッグ・ツール
10.4 関数とのやり取り
第11章 ソートのプログラム
11.1 仕様を考える
11.2 手順を考える
11.3 プログラムを書く
11.4 レビューする
11.5 動作を確認する
第12章 オブジェクト
12.1 オブジェクトとは
12.2 JavaScriptのオブジェクト
12.3 プロパティの参照と更新
12.4 オブジェクトを作る
12.5 for-in文(繰り返し文)
12.6 DateオブジェクトとMathオブジェクト
第13章 オブジェクト・モデル
13.1 Browser Object Model(BOM)
13.2 Document Object Model(DOM)
13.3 jQuery
第14章 その他の話題
14.1 Webストレージ
14.2 canvas
第15章 グラフィックスのプログラム
15.1 マウスの軌跡
15.2 ドラゴン曲線
15.3 シェルピンスキーの三角形
15.4 アニメーション
第16章 電卓のプログラム
16.1 仕様を考える
16.2 手順を考える
16.3 プログラムを書く
索引
本書は、Webページを制作するために必要なHTMLとスタイルシート(CSS)を使ってWebページのデザイン、レイアウトを習得するためのトレーニングブックです。本書では、新たにスマートフォンなどのサイト作成に必要なWebアプリケーションも作成できるHTML5という規格についても解説しています。
HTML5は2014年中には最終勧告として策定され、いよいよHTMLコーディングの中核技術となります。
●ホームページをデザインするためのスタイルシート
HTMLは、比較的簡単に誰でも覚えられるWebページ制作に最低限必要なマークアップ言語です。しかし、HTMLだけでは文字の間隔や大きさ、罫線、幅や高さ、マージンなどを数値指定して細かく調整することが困難です。スタイルシートを覚えると、簡単に好みの文字組みデザインや段組レイアウトを実現できます。
スタイルシートが昨今Webページで重用される背景には、ブラウザがCSSに対応してきたことが挙げられるでしょう。これにより、どのようなOS環境やブラウザでもCSSが表示できるようになってきました。
本書では、HTMLをこれから覚えたい方向けに作例等はXHTMLによって解説を記述しています。
また、最新ブラウザではCSS3にもベンダープレフィックスなしで対応しはじめ、CSS3で追加された主なプロパティの基本的な使い方も今回の改訂で解説しています。
●「基礎知識」を覚え、「トレーニング」で確認とテスト
本書では、HTMLとCSSの両者を解説しつつ、また、実際にHTMLとCSSでホームページを制作しながらマスターします。
「基礎知識」ではHTMLとCSSの構文、属性、プロパティ、値、解説、使用例をリファレンス的に記述しています。これによって、必要な知識を得ることができます。
「トレーニング」では、実際にサイトに用意した素材を使用しながら、ホームページをデザインする過程を操作の手順を追って学んでいきます。
●HTML5にも親しもう
HTML5は、従来のHTML4やXHTMLのようなマークアップだけの機能でなく、Webアプリケーションをつくるための各種APIを含めた広範で総合的な技術です。初心者の方は、従来のh要素による階層化からセクション要素による階層化と、HTML5で追加、変更、廃止となった要素などを大まかに理解しておきましょう。
●本書が対応するブラウザバージョンと環境
本書にでてくるブラウザのプレビュー画面は、主にWindows 8環境のInternet Explorer11を使用しています。
Windows Vista/7環境でサイトを制作される方も、Internet Explorer11を使う限りほとんど同じプレビューになりますので、安心して本書をお読みください。
また、本書執筆時点において最新のFirefox、Google Chrome、Opera、Safariでもテストを行っています。
「背景」や「理由」を知ることで、一生役立つ応用力が身につく。Web制作入門書のロングセラー。最新仕様に合わせてアップデート。
ゼロから学べるWeb制作学習書がHTML5とCSS3に完全対応!
わかりやすいと好評のWeb制作入門書が、現在の標準規格である「HTML5」と「CSS3」に完全対応して登場です。HTML5とCSS3の初歩的な文法学習から始めて、本格的なサイト制作までの流れを通して学ぶことで、初心者でも正しいマークアップの作法が身に付きます。用語や考え方を解説する講義パートと、実際にサンプルページを制作していく実習パートからなるレッスンを順に進めて、ステップアップしながら学んでいけます。サンプルソースはダウンロードが可能。Web制作をこれから始める人に最適の1冊です!
ORIENTATION レッスンを始める前に
Chapter01 HTMLで文書を作成する
LESSON01 HTMLの概要
LESSON02 文書をHTMLでマークアップする
LESSON03 改行や強調・画像やリンクを挿入する
LESSON04 表とフォームを設置する
補講 文法チェックのすすめ
補講 DOCTYPEをHTML4.01/ XHTML1.0にする場合の注意点
Chapter02 CSSで文書を装飾する
LESSON05 CSSの概要
LESSON06 基本プロパティとセレクタの使い方
LESSON07 背景画像を使って装飾する
LESSON08 初歩的な文書のレイアウトとボックスモデル
LESSON09 表組みと入力フォームのスタイリング
Chapter03 CSSレイアウトの基本
LESSON10 レイアウトの種類
LESSON11 floatレイアウト
LESSON12 positionレイアウト
補講 新しいレイアウト手法
Chapter04 本格的なHTML5によるマークアップを行うための基礎知識
LESSON13 セクション関連の新要素
LESSON14 新しいカテゴリとコンテンツ・モデル
LESSON15 その他の新要素と属性
補講 HTML5 の全体仕様と実装上の注意点
Chapter05 本格的なWeb制作のための設計と準備
LESSON16 Webサイトのコーディング設計
LESSON17 効率的なCSSコーディングの下準備
Chapter06 実践的なWebサイトのコーディング
LESSON18 大枠のレイアウトフォーマットを作成する
LESSON19 displayプロパティを活用したレイアウト
LESSON20 CSSスプライトの仕組みを理解する
LESSON21 メインコンテンツ領域を作成する
Chapter07 CSS3入門
LESSON22 CSS3の概要
LESSON23 CSS3セレクタ
LESSON24 CSS3プロパティ
LESSON25 変形・アニメーションとメディアクエリ
Chapter08 マルチデバイス対応の基礎知識
LESSON26 デバイスの特性を理解する
LESSON27 モバイル対応Webサイト制作の基礎知識
Chapter09 レスポンシブ・ウェブデザインのコーディング
LESSON28 レスポンシブの画面設計とベースコーディング
LESSON29 メディアクエリを使ったレイアウトの調整
LESSON30 Retinaディスプレイ対策
補講 レスポンシブにまつわる各種TIPS
索引
はじめて学ぶ人でも安心!オールカラーでコードを丁寧に解説。HTMLとCSSの基本を順番に学んで実践的なWebサイトを完成させる!勘違いしやすい箇所は講師がフォロー!ワークショップ感覚で読み進められる。
「パソコンやインターネットに詳しくないけど、Webサイトを作りたい」「知識ゼロでも手取り足取りやさしくWebデザインを教えてほしい」「今のWebサイトは成果が上がらないので、デザインを見直したい」そんなあなたに朗報です! イラストを見るだけでサクッと学べると評判の「見るだけノート」シリーズに、待望のWebデザイン登場! これ一冊で、専門知識がなくてもラクラクWebサイトが作れます。デジタル対応必須のウィズコロナ時代の必読書。
詰め込みすぎないわかりやすい解説。コレならわかる!できる!1単元=1時間。基本の知識をこの1冊で!
これからWeb制作をはじめる人のためのコーディング入門。より実践的なHTML、CSSの書き方を覚えられる。正しいコードの知識が身につく。「基礎」「応用」「実践」と段階的にステップアップしながら学べる。フロントエンド、コーダーを目指すなら必携の実践ワークブック。