全部ちゃんと知りたい! HTML&CSSの基本とWebデザイン
発売日: 2026/3/19
想定ページ数: 320ページ
ISBN: 9784295023500
全文検索: 非対応
★★★★★
★★★★★
0件
-
-
-
-
※本書はEPUB(固定レイアウト型)で作成されております。検索機能や文字列のコピーがご利用できません。
一歩ずつ着実に進めていくから挫折しない! Web制作のはじめの一歩として最適な1冊。
本書は1冊でHTML/CSS/Webデザインの基本を達成感を味わいながらやさしく学ぶことができ、読み終えれば現場ですぐに役立つ実践力が身に付きます。普段Web制作会社を経営しながら講師をしている著者が丁寧に解説。
1章~4章の基本編で「HTMLとCSSの基本」を学び、5章~6章の実践編で「実際にサイトを作成」します。自分が入力したコードがブラウザ上でどのように反映されるかということをこまめに確認しながら進めていくので、コーディングしてその場で確認、その場で修正、という現場の流れに即したプロセスが自然と身につきます。作成するサイトは2つで、5章でシンプルなPCサイト「シンプルかわいいポートフォリオサイト」を、6章でレスポンシブにも対応している「フラワーショップ」サイトを作成します。
そのほか、基本編では「HTML Living Standard、CSS3」などいま標準の仕様をベースに基礎を学び、実践編では「Flexboxレイアウト、CSSグリッドレイアウト、レスポンシブデザイン」など最新のトレンドを盛り込んでいます。
本書は「初心者だけどWebサイトを作りたい!」という人やWeb制作を仕事にしたい人、副業として始めたいという人におすすめです。自分のペースで楽しく学んでいきましょう。
-
Lesson1 本書で制作するWebサイトの構成
-
Lesson2 Webページの設計図、ワイヤーフレームについて知ろう
-
Lesson3 Webサイトのデザインの方向性を決めよう
-
Lesson4 Webページが表示される仕組みを覚えておこう
-
Lesson5 フォルダとファイルの基本を知ろう
-
Lesson6 学習に必要なソフトウェアを準備しよう
-
Lesson1 HTMLの基本的なルールを知ろう
-
Lesson2 h1タグで見出しを作ろう
-
Lesson3 pタグとbrタグで改行と段落を作ろう
-
Lesson4 blockquoteタグとqタグで引用しよう
-
Lesson5 strongタグとemタグでテキストに強弱を付けよう
-
Lesson6 imgタグとfigureタグで画像を表示させよう
-
Lesson7 aタグでリンクを貼ろう
-
Lesson8 pictureタグで表示する画像を変えよう
-
Lesson9 tableタグでシンプルな表を作ろう
-
Lesson10 formタグでフォームを作ろう
-
Lesson11 Webページのヘッダーのブロックを作ろう
-
Lesson12 Webページのナビゲーションのブロックを作ろう
-
Lesson13 Webページのメインコンテンツのブロックを作ろう
-
Lesson14 Webページの記事のエリアを作ろう
-
Lesson15 Webページの補足情報や関連情報のブロックを作ろう
-
Lesson16 Webページのフッターのブロックを作ろう
-
Lesson17 そのほか知っておくと便利なタグ
-
Lesson18 読みやすいコードの書き方を知ろう
-
Lesson1 CSSの役割とHTMLとの関係を知ろう
-
Lesson2 CSSファイルを作ってみよう
-
Lesson3 文字を装飾してみよう
-
Lesson4 背景をスタイリングしてみよう
-
Lesson5 表をスタイリングしてみよう
-
Lesson6 線をスタイリングしてみよう
-
Lesson7 余白を作ってみよう
-
Lesson8 箇条書きマーカーをスタイリングしてみよう
-
Lesson9 リンクテキストをスタイリングしてみよう
-
Lesson10 ボタンをスタイリングしてみよう
-
Lesson11 CSSでボタンのレイアウトを整えよう
-
Lesson12 画像を枠にあわせて表示しよう
-
Lesson13 画像にエフェクトを適用しよう
-
Lesson14 タイトルとメニューだけ固定しよう
-
Lesson15 フレックスボックスレイアウトで要素を並べよう
-
Lesson16 グリッドレイアウトで要素を整然と配置しよう
-
Lesson17 レスポンシブに対応させよう
-
Lesson18 CSSアニメーションの基本を知ろう
-
Lesson19 いろいろなセレクタを使ってみよう
-
Lesson1 まずはこれから作るサイトを知ろう
-
Lesson2 最初の準備をしよう
-
Lesson3 HTMLでページの枠組みを作ろう
-
Lesson4 HTMLでヘッダーとメインの枠組みを作ろう
-
Lesson5 「About」と「Profile」の中身を作ろう
-
Lesson6 「Works」のセクションを作ろう
-
Lesson7 「News」のセクションを作ろう
-
Lesson8 「Contact」のセクションを作ろう
-
Lesson9 フッターを作ろう
-
Lesson10 CSSでページ全体の共通部分を作ろう
-
Lesson11 CSSネストを使おう
-
Lesson12 ヘッダーのナビゲーションを見やすく横並びにしよう
-
Lesson13 「About」セクションをデザインしよう
-
Lesson14 「Profile」セクションをデザインしよう
-
Lesson15 「Works」セクションをデザインしよう
-
Lesson16 「News」セクションをデザインしよう
-
Lesson17 「Contact」セクションをデザインしよう
-
Lesson18 フッターをデザインしてサイトを完成させよう
-
Lesson19 アクセシビリティを考えよう
-
Lesson1 まずはこれから作る複数カラムのサイトを知ろう
-
Lesson2 サイト全体に共通するCSSを設定しよう
-
Lesson3 複数のCSSファイルを効率よく扱おう
-
Lesson4 Webサイトの枠組み部分を作ろう
-
Lesson5 ヘッダーのタイトルロゴとナビゲーションを作ろう
-
Lesson6 フッターを作ろう
-
Lesson7 トップページのメインエリアの余白と表示領域を設定しよう
-
Lesson8 メイン部分を組み立てよう
-
Lesson9 商品一覧セクションの枠組みを作ろう
-
Lesson10 商品一覧のお知らせを作ろう
-
Lesson11 「商品一覧」を作ろう
-
Lesson12 カード型コンテンツをスタイリングしよう
-
Lesson13 商品一覧をグリッドレイアウトにしよう
-
Lesson14 サイドバーのメニューを作ろう
-
Lesson15 Photogramセクションを作ろう