HTML CSSを学ぶための教材の基本情報・価格・レビュー。
PR・広告を含みます対象講座なら受講料の最大80%(給付区分・上限・要件あり)が後日戻り、実質負担を抑えられます。独学の本+スクールの併用も。
▶ あなたの講座でいくら戻るか試算(無料・30秒)
はじめての方へ:教育訓練給付のしくみと損しない選び方 / 申請手順5ステップ
学んだ後に「作って公開する」ための環境例です。サーバー・ツールは教育訓練給付/補助の対象外です。
※給付率・実質額は区分(一般20%/特定一般40%/専門実践 最大80%)と要件で変わり、即時値引きでなく後日支給です。最終可否はハローワーク・厚労省でご確認ください。掲載はPR(送客手数料を受領)。
好評の初心者向けデザインシリーズ「デザインの学校」に、Dreamweaver CCの解説書が登場! 「作例を作りながら学べる」「短期間で基本操作を習得できる」「大きな文字と画面で読みやすい」といった特徴はそのままに、2019年最新のDreamweaverに対応。一流の講師が解説しているので、手順に沿ってサンプルを作るだけで必須のテクニックが身に付きます。なるべくかんたんなDreamweaverの本が欲しい、Dreamweaverによるwebサイト制作の流れを学びたい、という方に最適な、一番やさしい入門書です。 ●Chapter 1 webページを作成しよう Visual Index 01 新規ファイルを作成しよう 02 原稿をファイルに貼り付けよう 03 ファイルを保存しよう
●Chapter 2 HTMLタグを編集しよう Visual Index 01 テキストを見出しやリストにしよう 02 画像を挿入しよう 03 リンクを設定しよう 04 内容を組み立てる要素を設定しよう 05 複数の要素をひとつにまとめよう
●Chapter 3 ビデオや地図を挿入しよう Visual Index 01 work.htmlファイルを開こう 02 ビデオを挿入しよう 03 地図を埋め込もう
●Chapter 4 CSSでスタイルを設定しよう Visual Index 01 CSSデザイナーを表示しよう 02 CSSファイルを作成しよう 03 全体のスタイルを設定しよう 04 見出しのスタイルを設定しよう 05 テキストのスタイルを設定しよう
●Chapter 5 CSSでデザインを整えよう Visual Index 01 レイアウトに関するスタイルを設定しよう 02 画像のサイズに関するスタイルを設定しよう 03 ナビゲーションに関するスタイルを設定しよう 04 ボーダーに関するスタイルを設定しよう 05 要素の表示形式に関するスタイルを設置しよう
●Chapter 6 スタイルを関連づけよう Visual Index 01 CSSファイルを関連づけよう 02 web ページにスタイルを追加しよう 03 ビデオと地図のスタイルを設定しよう 04 ブラウザーで確認しよう
●Chapter 7 スマートフォン用のスタイルを定義しよう Visual Index 01 スマホ用のスタイルを設定しよう 02 リストのスタイルを設定しよう 03 リスト項目のスタイルを設定しよう 04 ニュースのスタイルを設定しよう 05 画像のスタイルを設定しよう 06 スタイルを手動で修正しよう
判型:単行本
HTMLはWebページの内容をどこに置くかを記述する言語で、見出し・段落・リンクなど情報の骨組みを作ります。CSSはその骨組みの上で文字、色、余白、配置を整え、ページの見た目を定義する言語です。両方を組み合わせることで、意味のある構造と使いやすいデザインを一体で設計できます。
こんな人向け:想定読者は、Webページを自分で作ってみたい初心者や、業務で既存画面を修正する機会がある人です。前提としてはPC操作ができることと、基礎用語を読める程度のITリテラシーがあれば十分です。
HTML/CSSはWeb制作学習の土台にあたり、まず最初に押さえるべき領域です。構造を設計し、次に見た目を決める順で進めると、後でJavaScriptや高度な運用設計へ自然につなげやすくなります。
独学では、完成イメージを小さく区切って短いサイクルで作る方が継続しやすいです。教材選びのポイントは、説明が具体的で実践例が豊富か、手を動かして結果を確認できる構成かです。複数教材を同時に進めるより、1冊を起点に疑問点を都度実装で検証する流れが効果的です。
独学が不安な人や期限がある人には、進捗が管理できる体系的な学習形式の選択が有効です。学習順が明確で、定期的に自分の手で成果物を見直せる環境は、継続率を上げる助けになります。 ▶ 給付でいくら戻るか試算
Q. HTMLとCSSはどちらから始めるべきですか?
まずはHTMLから入り、ページの意味構造を作ることを優先すると理解しやすいです。次にCSSで見た目を重ねると、どこを変えるとどう見えるかが追いやすくなります。最終的には両者を往復しながら同時に整えるのが一般的です。
Q. 学習中に理解が飛ぶのですが対処法はありますか?
一度に広く進めるより、1テーマずつ完了条件を決めると安定します。たとえば「この画面を作れるようにする」を終点にしてから次へ進みます。詰まったら原因を一段階ずつ切り分け、原因が見えたらすぐに再現確認することで再発を防げます。
Q. 書籍で独学するときの失敗を避けるコツは?
演習が少なく説明だけが多い教材は、理解の浅さを見落としやすいです。実例があり、作業手順が段階的に示されているものを選ぶのが安全です。分からない点は同じ表現を別の方法で作ってみる比較学習にすると理解が深まります。
次の一冊:次に読む方向はJavaScriptの基礎で、ページの振る舞いを扱う視点を追加すると理解が広がります。あわせてアクセシビリティとデザイン基準の考え方を学ぶと、実用的な品質を上げる設計に進めます。