関連サイト
本書の関連ページが用意されています。
内容紹介
実践的なWebサイトを作りながら学べる!
講義+実習のワークショップ形式で、実践的なWebサイトを作りながら学べる「はじめてでも挫折しない」HTML&CSSの入門書。
なぜそうするのかを知りたい、応用できる基礎を身に付けたい、そんな要望に応える新しい教本です。
学習しやすいソースコード&全画像素材付き。
書誌情報
- 著者: 赤間 公太郎, 大屋 慶太, 服部 雄樹
- 発行日: 2016-03-18 (紙書籍版発行日: 2021-07-01)
- 最終更新日: 2016-03-18
- バージョン: 1.0.0
- ページ数: 296ページ(PDF版換算)
- 対応フォーマット: PDF, EPUB
- 出版社: インプレス
対象読者
Webサイトを作りたいが、WordPressなどのCMSではなく、HTMLとCSSで作りたいという人・Web制作者を目指している人・Webサイトを運営している飲食店や小売店の店長・Web担当者
著者について
赤間 公太郎
株式会社マジカルリミックス 代表取締役CEO
宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン／コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。サイト運用に関するコンサルティング、社内ITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb関連講義を担当。
大屋 慶太
株式会社デック 代表取締役社長
名古屋芸術大学美術学部卒業。某大手通信会社系列の企業で印刷物のデザインを担当。その後退職し、愛知県の印刷会社で、Webデザイナー兼コーダーとして5年ほど在籍。大手クライアントの案件も、多数手がける。2005年スタジオ・デックの屋号で、フリーランスとして独立。2006年に株式会社デックとして法人化。近年は制作会社経営のかたわら、講師、本の執筆、制作業界の人々が集う飲酒会運営などさまざまな方面で活躍中。
服部 雄樹
服部制作室 代表
愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。“かっこいいを簡単に”をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。
目次
はじめに
本書の読み方
目次
Chapter1 Webサイトを作成する準備をしよう
- Lesson01 Webサイトが表示される基本的な仕組みを知りましょう
- Lesson02 Webサイト制作の大まかな流れを把握しましょう
- Lesson03 Webサイトの構成とデザインを決めましょう
- Lesson04 「Google Chrome」をインストールしましょう
- Lesson05 テキストエディタ「Brackets」をインストールしよう
- Lesson06 ファイルの種類を表す「拡張子」を表示しましょう
- Lesson07 文字コードを理解しましょう
Chapter2 HTMLの基本を学ぼう
- Lesson08 HTMLとは何かを知りましょう
- Lesson09 HTMLの基本構造を知りましょう
- Lesson10 タグの基本的な書き方を知りましょう
- Lesson11 代表的な要素について学びましょう
- Lesson12 ディレクトリとパスについて学びましょう
- Lesson13 HTMLを書いてみましょう
- Lesson14 Webページに画像を挿入してみましょう
- Lesson15 読みやすいHTMLを書きましょう
Chapter3 共通部分のHTMLを作成しよう
- Lesson16 完成形をイメージしましょう
- Lesson17 ページの骨組みを作成しましょう
- Lesson18 ヘッダーとグローバルナビゲーションを作りましょう
- Lesson19 メインエリアとパンくずリストを作ろう
- Lesson20 サイドバーとフッターを作りましょう
Chapter4 共通部分から個別のページを作成しよう
- Lesson21 共通ページをもとにしてトップページを作成しましょう
- Lesson22 講座案内ページの表組みを作成しましょう
- Lesson23 ギャラリーページの画像リストを作成しましょう
- Lesson24 お問い合わせページのフォームを作成しましょう
Chapter5 CSSの基本を学ぼう
- Lesson25 CSSとは何かを知りましょう
- Lesson26 CSSの基本構造を知りましょう
- Lesson27 セレクタについて理解しましょう
- Lesson28 CSSが競合するスタイルを解決する仕組みを知りましょう
- Lesson29 スタイルの継承について知りましょう
- Lesson30 文字の書式を設定するプロパティを知りましょう
- Lesson31 色の指定方法を知りましょう
- Lesson32 要素のサイズと間隔の指定方法を理解しましょう
- Lesson33 Webページの主なレイアウトパターンを知りましょう
- Lesson34 フロートを利用したレイアウト方法を理解しましょう
- Lesson35 ディスプレイを利用したレイアウト方法を理解しましょう
- Lesson36 ポジションを利用したレイアウト方法を理解しましょう
- Lesson37 CSSを書いてみましょう
Chapter6 CSSで共通部分をデザインしよう
- Lesson38 タイプセレクタを使ってページ全体の書式を整えましょう
- Lesson39 ボーダーと背景でメインコンテンツの見出しを装飾する
- Lesson40 幅を設定してヘッダーエリアを整えましょう
- Lesson41 フロートを利用してグローバルナビゲーションを整えましょう
- Lesson42 メイン部分を2段組みにしましょう
- Lesson43 ボーダーと背景設定を組み合わせてサイドバー内を整えましょう
- Lesson44 グラデーションを利用して立体的なボタンを作りましょう
- Lesson45 フッターナビゲーションをインライン化して整えましょう
- Lesson46 疑似要素を使ってパンくずリストを整えましょう
- Lesson47 アニメーションによる視覚効果を追加してみましょう
Chapter7 コンテンツのデザインを整えよう
- Lesson48 トップページのデザインを整えましょう
- Lesson49 講座案内の表組みを装飾しましょう
- Lesson50 ギャラリーの写真を格子状に並べましょう
- Lesson51 フォームを装飾してみましょう
Chapter8 スマートフォンに対応しよう
- Lesson52 スマートフォンに対応する方法を知りましょう
- Lesson53 スマートフォンでの表示をパソコンで確認しましょう
- Lesson54 Viewportを設定してWebページの表示方法を制御しよう
- Lesson55 メディアクエリでCSSを切り替えましょう
- Lesson56 Webフォントでアイコンを表現してみましょう
Chapter9 Webサイトを公開しよう
- Lesson57 Webサイトを公開するサーバを用意しましょう
- Lesson58 FTPクライアントを使ってファイルをアップロードしましょう
- Lesson59 Webサイトの品質を確認しましょう
Chapter10 機能を追加して集客しよう
- Lesson60 検索結果にWebサイトの情報が詳しく載るようにしましょう
- Lesson61 ブックマークやスマートフォン用のアイコンを設定しましょう
- Lesson62 ソーシャルネットワークを活用しましょう
- Lesson63 Google マップを埋め込みましょう