SBクリエイティブ

1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版]

Mana:著者

2019-2024年、5年連続、売上第1位!※
読者の圧倒的な支持! シリーズ40万部突破の大ヒット!
全国の書店員がオススメする本 第1位 受 賞(2019年度 CPU大賞)
Webサイト制作の決定版が最新情報をたくさん盛り込んで大リニューアル!
※日販売上げランキング: HTML関連書籍

Webサイト制作の決定版がリニューアル!
今のWebサイトの作り方が一気に学べる!

Web界隈やデザイナーに大人気!
Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、
Manaによる渾身のHTML & CSSとWebデザインが学べる本

モバイルファースト、アニメーション、トレンドデザイン、HTML Living Standard、WebPなど
最新の情報や5年間の間に更新された情報を多数追加!

5年連続売上第1位、シリーズ累計40万部

・知識ゼロから体系的に学べる!HTMLとCSSの基本
・絶対に覚えておきたい技術! モバイルファースト、レスポンシブ、Flexbox、アニメーション
・手を動かしながら学べる!プロの現場で役立つテクニック
・コードの知識からデザインのことまで1冊ですべて学べる!

WebクリエイターボックスのManaが教える
Webサイト制作の定番&旬のスキル。
この1冊で必要なことがすべて学べる!

コードもデザインも全部学べる!

●本書の対象読者
・これからWebサイトを作り始める初心者
・HTMLとCSSを基本から学びたい人
・美しいデザインのWebサイトを作りたい人
・Webの最新技術を学びたい人
・手を動かし、作りながら学びたい人

サンプルデータはWebサイトよりダウンロードできます。

CHAPTER 1 最初に知っておこう!Webサイトの基本
1-1 よいWebデザインとは
1-2 様々な種類のWebサイト
1-3 ユーザビリティとは
1-4 Webサイトの仕組み
1-5 デバイスの種類
1-6 ブラウザーの種類
1-7 制作の流れ
1-8 制作をはじめる前に

CHAPTER 2 Webの基本構造を作る!HTMLの基本
2-1 HTMLとは
2-2 HTMLファイルを作ろう
2-3 HTMLファイルの骨組み
2-4 HTMLの基本の書き方を身につけよう
2-5 見出しをつけよう
2-6 文章を表示しよう
2-7 画像を挿入しよう
2-8 リンクをはろう
2-9 リストを表示しよう
2-10 表を作ろう
2-11 フォームを作ろう
2-12 より使いやすいフォームにしよう
2-13 ブロック要素でグループ分けをしよう
2-14 よく使うHTMLタグ一覧

CHAPTER 3 Webのデザインを作る!CSSの基本
3-1 CSSとは
3-2 CSSを適用させる方法
3-3 CSSファイルを作ろう
3-4 CSSの基本の書き方を身につけよう
3-5 文字や文章を装飾しよう
3-6 Webフォントを使おう
3-7 色をつけよう
3-8 背景を彩ろう
3-9 幅と高さを指定しよう
3-10 余白を調整しよう
3-11 線を引こう
3-12 リストを装飾しよう
3-13 クラスとIDを使った指定方法
3-14 レイアウトを組もう
3-15 デフォルトCSSをリセットしよう
3-16 よく使うCSSプロパティ一覧

CHAPTER 4 フルスクリーンのWebサイトを制作する
4-1 フルスクリーンとは
4-2 フルスクリーンページの制作の流れ
4-3 「head」を記述しよう
4-4 「header」部分を作ろう
4-5 コンテンツ部分を作成しよう
4-6 ファビコンを用意しよう
4-7 フルスクリーンページのカスタマイズ例

CHAPTER 5 2カラムのWebサイトを制作する
5-1 2カラムのレイアウトとは
5-2 2カラムページの制作の流れ
5-3 ページ全体の見出しを作成しよう
5-4 フッター部分を作成しよう
5-5 横並びの設定をしよう
5-6 メインエリアを作ろう
5-7 サイドバーを作ろう
5-8 レスポンシブに対応させよう
5-9 カラムページのカスタマイズ例

CHAPTER 6 タイル型のWebサイトを制作する
6-1 タイル型レイアウトとは
6-2 タイル型レイアウトの制作の流れ
6-3 ページ上部の紹介文を作成しよう
6-4 タイル型レイアウトを設定しよう
6-5 レスポンシブに対応させよう
6-6 タイル型レイアウトのカスタマイズ例

CHAPTER 7 外部メディアを利用する
7-1 お問い合わせページの制作の流れ
7-2 フォームを設置しよう
7-3 地図を表示しよう
7-4 Facebookプラグインを挿入しよう
7-5 Twitterプラグインを挿入しよう
7-6 YouTube動画を挿入しよう
7-7 レスポンシブに対応させよう
7-8 OGPの設定をしよう
7-9 外部メディアのカスタマイズ例

定価:2,585円(本体2,350円+10%税)

書籍情報

  • 発売日:2024年3月2日(土)
  • ISBN:978-4-8156-1846-9
  • サイズ:B5変
  • ページ数:320
  • 付録:-
5年連続売上第1位! 圧倒的に選ばれている大ベストセラー! この1冊ですべての基本が身につく!

本書はWeb関連書籍の中で5年連続売上第1位を快走している決定版の増補改訂です。この1冊にWebサイトの仕組みから、HTMLとCSSの基本、最新のコードの書き方、Webデザインの知識、制作現場の流れといったことがギュッと詰まっています。Web サイト制作の入門時に必要な知識が一気に身につきます。

  • Manaが書いたやさしい入門書

    大人気ブログ「Webクリエイターボックス」の管理人、Manaが書いたWebサイト制作の学習書です。Webで活躍する人に向けてずっと役立つ情報をわかりやすく書いていたから、説明がやさしくスッと頭に入ってきます。

  • HTMLとCSSの基本が体系的に学べる

    Webの解説サイトを読むだけでは、なかなか体系的な知識は身につきません。これからWebサイトを作りはじめる人なら、HTMLとCSSの基本を体系的に理解するとよいでしょう。この本は知識ゼロから学びはじめられます。

  • 最新情報にブラッシュアップできる

    モバイルファーストやレスポンシブといった制作方法、FlexboxやWebPといった最新技術、デザインのトレンドまで学べます。初心者も、従来の方法で制作している経験者も、これから先、長く使える「今のスキル」を身につけましょう。

  • Webデザインの基本が学べる

    Webページは単に形を作ればよいと言うわけではありません。美しく整えつつ「ユーザーにとって使いやすいデザインを作っていく」必要があります。Webデザインの基礎知識を学ぶことはWebサイト制作にも必ず役に立ちます。

  • 本格的な配色見本があり、すぐ使える

    色や配色はデザインを作る上で制作者がよく悩む場所です。本書では色や配色のページをに多くを割いています。色の持つ印象やイメージから、すぐに活用できる本格的な配色見本まで、詳しく解説があり学べます。

  • 簡単なアニメーションも学べる

    Webサイト制作ではパーツをアニメーションのように動かすこともあります。アニメーションの制作にもポイントがあり、デザインがあります。この本ではCSSを使った簡単なアニメーションの実装方法について学習します。

  • わからない時は動画でも学べる

    はじめてコードを書く時は不安もあると思います。そんな時はQRコードから動画にアクセスしてどう書くのか見てください。本書の導入部分であるHTMLとCSSには動画の用意がありますので、流れがわかるように教えてもらえます。

  • 練習問題で自分の理解度がわかる

    本書の学習は手を動かし、自身で作っていくことで身についていきます。今回、練習問題を新たに用意しましたので、学んだ内容を実際に活用できるか試すことができます。しっかりと身につけるためにも練習問題を活用しましょう。

  • 1つのWebサイトを作りながら学べる

    後半ではシングルカラム、2カラム、タイル型、お問い合わせ、レスポンシブ対応といったよく使われるレイアウトを一緒に作っていきます。実際に1つのWebサイトを制作していくことでWebサイト制作の現場の流れが体験できます。

著者紹介

著者・Mana

Mana(マナ)
日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。現在はWebサイト制作のインストラクターとして教育に携わっている。ブログ「Webクリエイターボックス」は2010年日本のアルファブロガーアワードを受賞。著書『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』(いずれもSBクリエイティブ)は2019年度および2021年度のCPU大賞 書籍部門の大賞を受賞。

関連商品のご案内

もっと見る

試し読み新着お届け

もっと見る