これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 電子書籍|翔泳社の本
  1. ホーム >
  2. 電子書籍 >
  3. これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

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



形式:
電子書籍
発売日:
ISBN:
9784798170121
価格:
2,420(本体2,200円+税10%)
カテゴリ:
Web制作
キーワード:
#グラフィックソフト・ツール,#デザイン,#ビジネスデザイン,#イラスト集・作品集
電子書籍

Webサイト制作をこれから学ぶ人へ送る
“1冊目”に最適の入門書!【学びをサポートする4大特典つき】

本書は手を動かしてWebサイトを作りながら
HTML/CSSとWebデザインの基本を楽しく学べる入門書です。

初学者が1冊目に読む本としてふさわしい内容を盛り込んでいるため、
これを読めば必要な基礎知識がひととおり身につきます。

制作できるサイトは計4種。
初歩的な内容から少しずつレベルアップしていき、
Flexboxレイアウト・CSSグリッドレイアウト・
レスポンシブデザイン・CSSアニメーションも作れるようになります。

またコーディングの知識だけではなく、
学習を続ける上での学び方のコツやポイントも紹介。
知識ゼロからスタートした人でも、1冊を読み終えるころには
自ら学習を深めていけるようになるでしょう。

■わかりやすい!楽しい!ポイント
・やさしく要点をおさえた解説
・手を動かして作ることを重視した構成
・おしゃれでバリエーション豊かなサンプルサイト
・豊富な図解とイラスト、キャラクターによるガイド
・重要ポイントの理解を助ける補足動画

■こんな方におすすめ!
・Webサイト制作をゼロから学びたい初心者
・1冊目の入門書を探している人
・Web制作の仕事を目指している人

■学習をサポート!嬉しい4大特典つき
(※翔泳社サイトにて無料のID登録とダウンロードの必要があります)
1.サンプルサイトのXDデータ
- 画像の切り出しや色/数値抽出の練習用に
- デザインファイルの作り方の参考に

2.特典PDF:Webサイトの公開方法
- 最後に必要な公開作業の手順も解説!
- レンタルサーバー/ドメインについてやFTPソフトの使い方

3.制作に役立つおすすめサイト集
- 実際のしごとで使っているサイトを厳選!
- Webデザイン編/コーディング編と合計、約50サイトを紹介

4.初学者必携のチートシート
- 横において学習すると学びやすい!
- Flexboxレイアウト/CSSグリッドレイアウト/CSSのショートハンド/キーボード入力サポートの4種

※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。
※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。
※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。

(翔泳社)

1冊目の本

ストーリーと連動した4つのWebサイトをつくります。簡単なサイトから少しずつレベルアップ!

【SNSリンク集】

【SNSリンク集】

基本のHTML&CSS / ボックスモデル

【ブログサイト】

【ブログサイト】

Flexboxレイアウト / 構造化タグ

【Web招待状サイト】

【Web招待状サイト】

レスポンシブWebデザイン / CSSアニメーション / Webフォント

【レストランサイト】

【レストランサイト】

複数ページサイトの構築 / CSSグリッドレイアウト

読者目線にたった手厚いフォローがあるから最後までつまずかない!

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

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

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

●自分でミスに気がつける

●自分でミスに気がつける

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

●動画で理解が深まる

●動画で理解が深まる

Flexbox、CSSアニメーションなど動画があるとわかりやすい項目は動画で補足。つまずきがちな導入部分も動画でフォローします。

基本から”イマの技術”までカバーしているから現場で使える力まで身につく

●「HTML Living Standard」に準拠

●「HTML Living Standard」に準拠

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

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

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

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

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

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

Web制作で大切なのが「情報を扱う力」。ワークを通じて「情報を整理する力」と「情報を活用する力」が身につきます。

4大特典
目次の登録はありません。

付属データはこちら

会員特典はこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。

  • 特典のデザインデータのFigma対応について

    「Adobe XD」の無料利用終了に伴い特典のデザインデータに新たにFigma用のファイルを追加しました。

    FigmaもXDと同様にAdobe社から提供されているデザインツールです。

    制限の範囲内で無料でご利用いただけます。

    【Figma】
    https://www.figma.com/


  • ワーク用ダウンロードデータの更新

    ワーク用ダウンロードデータを更新しました(最終更新2023年7月10日)。

    詳しい修正内容はこちらからご覧ください。

  • VSコードのバージョンアップに伴う操作方法の変更について

    VSコードのバージョンアップに伴い、書籍で解説している一部の操作方法に変更がありました(2022年3月22日)。

    該当箇所は書籍30ページに掲載されている、
    「VSコードのテーマを変えよう」の
    「STEP2 配色テーマの選択メニューを開こう」の項目です。

    配色テーマの選択メニューを開く際は、
    「その他の色のテーマを参照...」の右端にある歯車のマークをクリックをしてください。



  • macOSでVSコードを利用する際の注意

    macOSでVSコードを開こうとすると、「開発元を検証できないため開けません。」といった警告が出る場合があります。

    これはmacOS Sierraよりバージョンが新しいOSでは、AppStoreに登録されていないアプリケーションに対して、セキュリティ制限が厳しくなっているためです。VSコードもまた、この「AppStoreに登録されていないアプリケーション」に含まれます。

    そのため、下記のような方法で制限を解除する必要があります。

    ■右クリックメニューからアプリを開き、許可する方法
    1.VSコードのアイコンを右クリックし、メニューから「開く」を選択
    2.「●●の開発元を検証できません。開いてもよろしいですか?」というメッセージが表示されるので、「開く」を選択

    ■システム環境設定から、許可する方法
    1.「開発元を検証できないため開けません。」というメッセージの表示後、システム環境設定より「セキュリティとプライバシー」を選択
    2.「一般」タブ内で開けなかったアプリ(VSコード)が表示されているので、「このまま開く」を選択
    3.「●●の開発元を検証できません。開いてもよろしいですか?」のメッセージが表示されるので、「開く」を選択


    また、VSコード以外のエディタでも本書の内容は学習可能ですが、コード部分の配色などの違いがある点はご了承ください。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付(書籍の最終ページ)に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2023年08月24日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 004
目次1~6行目
2刷
はじめに・・・003 本書の読み方・・・010 一連の流れ・・・011 ワーク用のデータをダウンロードしよう・・・012 4大特典をダウンロードしよう・・・016 特典のダウンロード・・・017
はじめに・・・003 本書の読み方・・・010 Partごとの学習ポイント・・・011 本書でつくるサイト・・・012 ワーク用のデータをダウンロードしよう・・・016 4大特典をダウンロードしよう・・・017
2021.10.06
1刷 010
(5)重点ポイントには動画のフォロー
6刷

(画像クリックで拡大)

(画像クリックで拡大)

QRコードを追加します。
2023.02.08
1刷 018
「サンプルデザイン XDデータ」
6刷
本書で使用したサンプルデザインのカンプデータです。Part2のリンク集サイトにはアレンジ版のおま けつき。 ※ Adobe XDアプリケーションを使用しています。閲覧には「Creative Cloudの登録」と「アプリケー ションのダウンロード」が必要となります。 2021年9月現在、Adobe サイトより無料で登録・ダウンロードできます。
本書で使用したサンプルデザインのカンプデータです。Part2のリンク集サイトにはアレンジ版のおま けつき。データはAdobe XDアプリケーションを使用しています。 閲覧には「Creative Cloudの登録」と「アプリケーションのダウンロード」が必要となります。2021年 9月現在、Adobeサイトより無料で登録・ダウンロードできます。 ※ 2022年4 月に変更がありました。詳細はAdobe 公式サイト「XDスタータープランへの変更 (https://helpx.adobe.com/jp/xd/kb/changes-to-xd-starter-plan.html)」をご確認ください。

018
6刷で上記修正をいたしましたが、見出しと「※」以降の文章を変更いたします。

【変更前】
「サンプルデザイン XDデータ」

※ 2022年4月に変更がありました。詳細はAdobe公式サイト「XDスタータープランへの変更
(https://helpx.adobe.com/jp/xd/kb/changes-to-xd-starter-plan.html)」をご確認ください。

【変更後】
「サンプルデザイン デザインデータ」

※ 2023年8月にXDアプリの状況を鑑みて特典にFigma用のデザインデータを追加しました。
2023.02.08
1刷 039
ラブレターの図の連絡先
7刷

(画像クリックで拡大)

(画像クリックで拡大)

40ページ「ラブレターの図の解答例」の連絡先も同様に修正します。


(画像クリックで拡大)


(画像クリックで拡大)
2023.08.24
1刷 046
STEP 1
6刷

(画像クリックで拡大)

(画像クリックで拡大)
2023.02.08
1刷 051
STEP3「2章/step/04/04_list_step3.html」23行目
7刷
<dt>名前:</dt><dd>かぴぞう</dd>
<dt>名前:</dt><dd>カピぞう</dd>
2023.06.30
1刷 054
「STEP1 カピぞうの画像を<img>タグを使って表示しよう」 画像下のキャプション
2刷
画像が表示されました。
画像が表示されない場合、編集中のファイルと画像ファイル(capyzou.png)が同じ場所に置いてあるかを確認しましょう。
2021.11.11
1刷 060
「インデントをつけよう」の吹き出し
7刷
字下げの幅は、VS コードの初期設定では「半角スペース2個分」です。
字下げの幅は、VS コードの初期設定では「半角スペース4個分」です。
2023.08.24
1刷 072
STEP2
3刷
見出し:<link>タグのsrc属性を確認しよう 本文:<link rel="stylsheet" src="css/style.css">のsrcの属性値
見出し:<link>タグのhref属性を確認しよう 本文:<link rel="stylsheet" href="css/style.css">のhrefの属性値
2021.12.03
1刷 120
表内「classセレクタ」の「説明」
2刷
calss属性を持った要素に~
class属性を持った要素に~
2021.11.10
1刷 134
STEP3 1つ目のコードブロックの2行目
5刷
<time datetime="3021-10-23">
<time datetime="3021-08-08T12:03">
2022.07.11
1刷 183
STEP7 コードブロックの3行目の行番号
5刷
167 ~~ 168 ~~ 160 ~~ 170 ~~ …
167 ~~ 168 ~~ 169 ~~ 170 ~~ …
2022.07.11
1刷 188
表内 2行目のキーワード
5刷
liner ライナー
linear リニア
2022.07.11
1刷 190
「変形の種類」の「translate(移動)」
7刷
tarnslate(20px);
translate(20px);
2023.08.24
1刷 191
図版のピンク色文字キャプション
3刷
スクロールマークがキーフレームの指定通りに「1.8秒」かけて「ease-in」で動きます。
スクロールマークがキーフレームの指定通りに「1.8秒」かけて「ease-out」で動きます。
2021.11.30
1刷 197
STEP2
5刷
プレビューするデバイスを上部のツールバー([Responsive ▼]のセレクトボックス)で選択します。今回はiPhone Xの見え方を基準にしますのでiPhone Xを選択しましょう。
プレビューするデバイスを上部のツールバー([Responsive ▼]のセレクトボックス)で選択します。今回はiPhone Xの見え方を基準にしますのでiPhone Xを選択しましょう。 一覧にiPhone Xがない場合は、機種一覧の最下にある「Edit...」をクリックし、iPhone Xにチェックを入れると追加されます。

文章を追加します。
2022.07.11
1刷 205
STEP2 コードブロックの3行目、4行目の行番号
5刷
277 ~~ 278 ~~ 289 ~~ 290 ~~ 281 ~~
277 ~~ 278 ~~ 279 ~~ 280 ~~ 281 ~~
2022.07.11
1刷 206
ページ右上の画像
3刷
2021.12.22
1刷 229
「filterの書き方」の説明文
5刷
効果は, (カンマ)で区切って複数指定できます
効果は半角スペースで区切って複数指定できます
2022.07.11
1刷 240
「画像の表示位置を指定する」枠内、右側の画像
4刷

(画像クリックで拡大)

(画像クリックで拡大)

「object-position: 100% 0;」の画像を修正します。
(2022_04_15更新)
2022.01.21
1刷 275
STEP2 コードブロックの2~4行目
5刷
<ul class="menu"> <li> <a href="index.html">home</li> <li> <a href="concpet.html">concept</li> <li> <a href="menu.html ">menu</li> <li><a href="info.html">info</a></li> </ul>
<ul class="menu"> <li> <a href="index.html">home</a></li> <li> <a href="concept.html"> concept</a></li> <li> <a href="menu.html ">menu</a></li> <li><a href="info.html">info</a></li> </ul>
2022.07.11
1刷 275
STEP3 コードブロックの5行目の行番号
5刷
314 ~~ 315 ~~ 316 ~~ 317 ~~ (略) 390 ~~
314 ~~ 315 ~~ 316 ~~ 317 ~~ (略) 389 ~~
2022.07.11
1刷 275
STEP4 コードブロックの行番号
5刷
391 ~~ 392 ~~ 393 ~~ 394 ~~ 395 ~~ 396 ~~ 397 ~~ 398 ~~ 399 ~~
390 ~~ 391 ~~ 392 ~~ 393 ~~ 394 ~~ 395 ~~ 396 ~~ 397 ~~ 398 ~~
2022.07.11
1刷 278
STEP1「OGP の情報を指定しよう」11行目のコード
7刷
<link rel="icon alternate" href="images/favicon.png" type="images/png" >
<link rel="icon alternate" href="images/favicon.png" type="image/png" >
2023.08.24
1刷 280
マンガの下の見出し
6刷
HTML/CSSの知識を深める
HTML/CSSの理解を深める
2023.02.08
6刷 018
「サンプルデザイン」の見出しと「※」以降の文章
7刷
「サンプルデザイン XDデータ」 ※ 2022 年4 月に変更がありました。詳細はAdobe 公式サイト「XDスタータープランへの変更 (https://helpx.adobe.com/jp/xd/kb/changes-to-xd-starter-plan.html)」をご確認ください。
「サンプルデザイン デザインデータ」 ※ 2023年8 月にXD アプリの状況を鑑みて特典にFigma 用のデザインデータを追加しました。
2023.08.24

感想・レビュー

v・_・v さん

2022-02-25

前に読んだやつ同じような本で軽く予習してたのでより分かりやすかった。一つ一つのプロパティの解説が詳しく載ってるし、基本は身につくと思う。