AIと勉強するHTML&CSS+JavaScript

試し読み

AIと勉強するHTML&CSS+JavaScript

田中聡　著

定価 3,300円
（本体 3,000円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入

電子版を買う

電子書籍版を購入
- Kindle
- 楽天kobo

発売日	：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

巻末：用語索引