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

４つのサイトを楽しく作りながら
自然と知識が身につく
“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大特典

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

チートシート４種

  • 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サイトを作るのって簡単だけど奥が深い、でも楽しい！」と思ってもらえたら幸いです。

カピバラサウンドを配信（2023年12月1日公開）

カピバラサウンドは著者自身が本書に関する補足解説などをする音声配信です。この取り組みをする理由としては以下の通りです。

・書籍の諸々の制限によりお話できなかったあれこれを載せたい
・書籍を読んだ方からよく頂く「つまづきポイント」や質問について解説したい

また、一人で書籍での学習をしていると孤独を感じやすいものと思います。

音声を聞きながら学習をすることで講師が横にいて教えてくれるような雰囲気を作り出せたらなと思い、そしてそれが挫折を防ぐための助けになったらと考え音声配信を開始しました。

無料で聴けるサンプル音声などもありますので、是非以下のバナーからご確認ください。