MdNCORPORATION

AIと勉強するHTML&CSS+JavaScript

田中 聡 著
定価 3,300円
(本体 3,000円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2026-02-03
仕様 B5判/328P
ISBN 978-4-295-20811-2
ChatGPTなどの⽣成AIを学習に取り入れながら、HTML&CSSと初歩的なJavaScriptを使ったWebサイトのフロントエンド制作を学んでいく本。

コードやプログラムを頭で考えて理解するよりも、「作って動かしてみて」理解することに重点に置いています。

まずは、生成AIやWebサイトの制作環境について基本的な知識を身に付けたら、HTML&CSSを一通り学び、静的なWebページを作成してみます。

次に、レスポンシブWebデザインとCSSフレームワークの基本を習得し、さらに初歩的なJavaScriptとライブラリを使って動的なWebページの制作にチャレンジしてみる、といった構成です。

これからの時代、AIといっしょにプログラムを書くのが、ごく自然なスタイルになっていく一方で、学習の初期段階では、自分でコードを考え、試行錯誤するプロセスがとても大切。

そこで本書では、基本をしっかり学びつつ、生成AIを活用して「AIといっしょに学ぶ」新しい学習スタイルを提案します。

初学者の方も、過去に一度挫折してしまった方も、本書を通じてプログラミングのおもしろさを実感してください!

■ページ見本






目次

■Introduction 学習をはじめる前に
01 プログラミング学習で大切なこと
02 フロントエンド開発とは?
03 なぜ、生成AIを使うのか?

■Chapter1 生成AIの活用
01 生成AIって、どんなもの?
02 プロンプトを書くポイント
03 プログラミングへの活用

■Chapter2 開発環境の準備
01 Visual Studio Code
02 GitHub
03 GitHubに登録する
04 マークダウン記法

■Chapter3 HTML&CSS入門
01 HTML&CSSとJavaScriptのちがい
02 HTMLの構造
03 HTMLの基本的なタグ
04 CSSの基本
05 CSSを使った装飾・レイアウト
06 応用的なセレクタ
07 動作確認と検証ツール
08 総合演習
09 自分の作品をGitHub Pagesで公開する

■Chapter4 レスポンシブWebデザイン
01 レスポンシブWebデザインの重要性
02 レスポンシブWebデザインの基本
03 総合演習

■Chapter5 CSSフレームワークの活用
01 CSSフレームワークとBootstrap
02 Bootstrapを活用する① レイアウト
03 Bootstrapを活用する② ナビゲーションバー
04 Bootstrapを活用する③ ボタン
05 Bootstrapを活用する④ アラート
06 Bootstrapを活用する⑤ カード
07 Bootstrapを活用する⑥ モーダル/フォーム
08 総合演習

■Chapter6 JavaScript入門
01 プログラミングって、どんなもの?
02 JavaScriptを記述する方法
03 変数と関数① 変数
04 変数と関数② 関数
05 制御構文
06 配列とオブジェクト
07 DOM(Document Object Model)

■Chapter7 ライブラリの活用
01 ライブラリって、どんなもの?
02 jQueryを活用しよう
03 HTMLの操作とアニメーション
04 ネットワーク通信
05 DataTables
06 Chart.js

巻末:用語索引

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊