これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

4つのサイトを楽しく作りながら
自然と知識が身につく
“1冊目”に最適の入門書

Webサイトを作ってみたいけれど、情報がたくさんありすぎる。どこから手をつければよいの?

Web制作について検索をすると、たくさんの情報が見つかるイマ。10年以上サイト制作に携わってきた筆者が考える『まずは1歩目に触れてほしい情報』をまとめた1冊です。

実際にサイトをつくりながら実践的に知識を習得できるので、HTML/CSSに対して広い視野を養える本となっています。

こんな人にオススメ

  • Webサイト制作をゼロから学びたい
  • 1冊目の入門書を探している
  • Web制作の仕事を目指している
  • 基礎から学びなおしたい

学べるPOINT

Part1

  • 学習の準備
  • 情報整理力アップ
  • HTMLのきほん

Part2

  • CSSのきほん
  • ボックスモデル

Part3

  • 構造をあらわすタグ
  • Flexboxレイアウト

Part4

  • CSSアニメーション
  • Webフォント
  • レスポンシブWebデザイン(PC→スマートフォン)

Part5

  • CSSグリッドレイアウト
  • 情報活用力アップ
  • レスポンシブWebデザイン(スマートフォン→PC)

本書で扱うHTMLタグ一覧

  • h1~h6
  • p
  • br
  • ul
  • ol
  • li
  • dl
  • dt
  • dd
  • a
  • img
  • em
  • strong
  • mark
  • i
  • b
  • table
  • thead
  • tbody
  • tr
  • th
  • td
  • address
  • header
  • nav
  • main
  • article
  • aside
  • footer
  • section
  • time
  • figure
  • figcaption
  • small
  • form
  • input
  • select
  • option
  • textarea
  • label
  • iframe

CSSプロパティ一覧

  • background-color
  • font-family
  • font-size
  • border
  • border-width
  • border-style
  • border-color
  • border-radius
  • padding
  • margin
  • width
  • text-align
  • display
  • color
  • font-weight
  • flex-wrap
  • justify-content
  • align-items
  • flex-basis
  • align-self
  • background-image
  • text-decoration
  • box-shadow
  • list-style-type
  • overflow
  • background-repeat
  • background-position
  • line-height
  • letter-spacing
  • background
  • background-size
  • position
  • left
  • top
  • right
  • bottom
  • z-index
  • content
  • vertical-align
  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function
  • transition
  • transform
  • transform-origin
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • max-width
  • filter
  • text-transform
  • background-clip
  • object-fit
  • object-position
  • grid-template-rows
  • grid-template-columns
  • grid-row-start
  • >
  • grid-column
  • >
  • grid-row
  • grid-column-start
  • grid-row-end
  • grid-column-end
  • align-self

特徴

重要パートは動画解説つき

全部で11本、合計130分の動画を収録!
学び初めにつまづかないようにするためのフォロー動画と、難しい箇所をより詳しく解説する補足動画をつけています。
※上記の動画はサンプルです

図解/画像でワークがスイスイ進む

豊富な図解とイラストでわかりやすく説明しています。
手順ごとにBefore/Afterの画像もあるのでワークがスイスイ進みます。

自分でミスに気がつける

よくあるつまずきは「見本と同じにならない」こと。
本書では手順ごとにファイルを用意し、コード行も記載。見本との比較が簡単です。

HTML Living Standardに準拠

HTMLの仕様は正式にHTML Living Standardに一本化されました。
本書では"新"標準の仕様書に基づいて執筆されているので安心です。

”イマの技術”もしっかり学べる

Flexbox・CSSグリッド・CSSアニメーションなど、イマの技術も幅広く対応。
知識をアップデートしたい方にもオススメです。

「情報を扱う力」もアップ!

Web制作で大切なのが「情報を扱う力」。
「情報を整理する力」と「情報を活用する力」をアップさせるワークもあります。

試し読み

本書のPart1(61ページ分)
すべて読めます

試し読みをするlaunch

4大特典

購入するともれなくついてきます

チートシート4種

  • CSSグリッドレイアウト
  • Flexboxレイアウト
  • ショートハンド
  • ショートカット

Webサイトの
公開方法(PDF)

3STEPで手順を実践します。

  1. 1.レンタルサーバー契約
  2. 2.ドメイン契約と反映
  3. 3.ファイルのアップロード

サンプルサイトの
XDデータ

画像の切り出しや色・数値抽出の練習用に。ファイルの作り方の参考に。

おすすめサイト集

筆者がいつも使っているサイトを厳選して紹介。Webデザイン編・コーディング編と合計約50サイトを掲載!

購入はこちら

これだけで基本がしっかり身につく
HTML/CSS&Webデザイン1冊目の本

B5変/288ページ
ISBN:
9784798170114
定価:
2,420円(税込)
出版社:
翔泳社

Amazonの商品ページを見るshopping_cart

試し読みをするlaunch

口コミ(評判)を見るlaunch

その他の販売サイトはこちら

著者について

Capybara Design
竹内直人 / 瑠美

夫婦で企業のWeb領域をお手伝いするフリーランスのデザインユニット。
屋号の由来はカピバラと暮らしたい想いから。
Webサイト:https://capybara-design.com/

運営しているSNSアカウント『1分で学べるHTMLとCSS』は「わかりやすい! 」と好評の声多数。

Instagram:@html_css_webdesign
Twitter:@html_css_1min

本書の執筆にあたり

本書は「Web サイト制作をゼロから学びたい方」や「Web制作の仕事を目指している人」向けに「4 つのサイトを楽しく作りながら、自然に知識が身につく本」をコンセプトに執筆しました。
私はコーディングの講師もしていますが、生徒さんからよく「オススメの書籍はありますか?」と聞かれます。

私としては、最初は専門用語ばかりの難しい本ではなく、いかに「挫折せずに楽しく続けられる」かが大切だと思っています。また、HTML/CSS は実際に書くことが成長への近道です。そのため、本書では座学を少なくし、ワーク(実際にコードを書く)を中心とすることで「自分自身の手でサイトを作る楽しさ」を実感しつつ、自然に知識が身につくような構成になっています。

本書で身につけたことが『なりたい自分』に近づくための助力になり、読み終えた時に「Webサイトを作るのって簡単だけど奥が深い、でも楽しい!」と思ってもらえたら幸いです。