TECHNICAL MASTER はじめてのHTML+CSS HTML5対応 (単行本)

TECHNICAL MASTER はじめてのHTML+CSS HTML5対応
フォーマット:
単行本 電子書籍
著者 大藤幹
ジャンル IT系書籍 > インターネット一般
シリーズ TECHNICAL MASTER
書店発売日 2018/04/28
ISBN 9784798051000
判型・ページ数 B5変・392ページ
定価 2750円
(本体2500円+税10%)
在庫 品切れ・重版未定
その他 ダウンロード:有

この本に関するお問い合わせ・感想

ホームページを自分の手で自由にデザインしたい! HTMLとCSSを学ぶと、自分の好きなウェブデザインができるようになります。本書は、HTMLとCSSを学びたい初心者のために、制作環境の準備からHTMLタグの意味、CSSスタイルシートの正しい使い方までを、段階的にわかりやすく解説した教科書です。簡単なスマホ用ウェブページの制作で基礎を学び、PC用の難しいウェブページ制作にステップアップすることで実力が身につきます!

【サポートはこちら】https://www.shuwasystem.co.jp/support/7980html/5100.html
Part 01 はじめる前の準備編
Chapter 01 ホームページは何でできているのか?
01-01 ウェブページとウェブサイト
1ホームページという用語は複数の意味で使われている
2ブラウザで表示されるページは、基本的に全部ウェブページ
3ウェブページのまとまりがウェブサイト
01-02 ウェブページは何でできているのか?
1ウェブページの本体であるHTML文書はテキスト形式のファイル
2ウェブページの表示指定をおこなうCSSもテキスト形式のファイル
3ファイルのある場所と名前を指定することで、ウェブページに画像や動画を表示させることも可能
Chapter 02 ウェブサイト制作のための準備をしよう
02-01 必要となるアプリケーションを揃えよう
1「メモ帳」や「テキストエディット」のようなテキストエディタを用意する
2画像を編集するアプリケーションは、本書の作業では不要
3本書では、表示確認は基本的にGoogle Chromeでおこなう
02-02 作業全体の流れを把握しておこう
1はじめにサイト全体のページ構成と各ページの内容を考えておく
2HTMLで各ページを作成し、その表示方法はCSSで指定する
3完成したデータをサーバーにアップロードすることでウェブサイトが公開される
02-03 サンプルファイルを用意しよう
1本書のサンプルファイルをダウンロードしてハードディスクなどに入れておく
2HTMLファイルの拡張子は「.html」、CSSファイルの拡張子は「.css」
3ファイルの種類が明確に区別できるようにするために拡張子を表示させる

Part 02 やさしい入門編
Chapter 03 HTMLってどんなもの?
03-01 HTMLはマークアップ言語
1元のデータに目印を埋め込む形式の言語がマークアップ言語
2 目印には、開始位置を示すものと終了位置を示すものがある
3HTMLでは目印のことをタグと呼ぶ
03-02 HTMLのテンプレートを見てみよう
1HTMLの先頭にあるのはタグではなく「DOCTYPE宣言」
2DOCTYPE宣言のあとの内容はすべて <html> と </html> の間に書き入れる
3ブラウザで表示させるコンテンツは <body> ~ </body> の間に書き入れる
Chapter 04 HTMLでマークアップしてみよう
04-01 HTMLのテキストはどう表示されるのか
1HTML文書の中で改行を入れても、ブラウザでは改行されずに表示される
2半角スペース・タブ・改行をまとめて空白文字と呼ぶ
3HTMLの中にある空白文字は、ブラウザで表示されるときには1つの半角スペースに置き換えられる
04-02 見出しと段落のマークアップ
1大見出しは <h1> と </h1> で囲う
2段落は <p> と </p> で囲う
3それぞれのタグは初期状態で表示指定されている
04-03 箇条書きのマークアップ
1箇条書きは全体を <ul>~</ul> で囲い、その内部で各項目を <li>~</li> で囲う
2連番つきの箇条書きは全体を <ol>~</ol> で囲い、内部の各項目を <li>~</li> で囲う
3箇条書きの行頭記号はブラウザが自動的に表示させる
04-04 タイトルを入力してみる
1文書のタイトルは <title>~</title> で囲う
2<title>~</title> は、<head>~</head> の内部で使用する
3文書タイトルは一般に「ページ名 | サイト名」のような形式で、大見出しにサイト名を追加したものにする
Chapter 05 画像を表示させてみよう
05-01 画像を表示させるタグの使い方
1画像を表示させるには <img> タグを使用する
2タグの中の「src=○○○」で、表示させる画像ファイルを指定する
3タグの中の「alt=○○○」で、画像の代わりに使える「予備のテキスト」を設定しておく
05-02 画像ファイルの場所の示し方
1ファイルの場所を示す書式には「絶対パス」と「相対パス」がある
2相対パスで1つ上の階層を示すには、ファイル名の前に「../」をつける
3相対パスで1つ下の階層を示すには、ファイル名の前に「フォルダ名」をつける
05-03 画像の表示サイズの変更と強制改行
1タグの中の「width=○○○」で画像の幅を指定できる
2タグの中の「height=○○○」で画像の高さを指定できる
3ブラウザで表示させるときに改行させたい箇所には <br> タグを配置する
Chapter 06 CSSで表示を変えてみよう
06-01 CSSを使うサンプルファイルの確認
1CSSの表示指定は、<p> に適用させたいのなら p { } と書いてその { } 内に記入する
2CSSは、別に用意した専用ファイルに記述するのが基本
3HTMLとCSSのファイルを関連づけるには <link>タグを使用する
06-02 段落の表示指定
1CSSの書式を構成する各部分のあいだには空白文字を自由に入れることができる
2行の高さを設定するには「何を」の部分に line-height を指定する
3line-height の「どのようにする」の部分には、フォントサイズの何倍かを示す数値が指定できる
06-03 画像の表示指定
1幅を設定するには「何を」の部分に width を指定する
2widthの「どのようにする」の部分には、単位をつけた数値が指定できる
3幅だけを指定すると、高さは自動的に元の比率を保ったサイズに調整される
06-04 ページ全体の表示指定
1余白を設定するには「何を」の部分に margin を指定する
2marginの「どのようにする」の部分には、単位をつけた数値が指定できる
3ページ全体にCSSを適用したい場合は、<body>~</body> に指定する
06-05 箇条書きの表示指定
1箇条書きの行頭記号を画像に変えるには「何を」の部分に list-style-image を指定する
2list-style-imageの「どのようにする」の部分には、url(画像のパス) を指定する
3画像以外のファイルでも、CSSでパスを示す場合には、url( ) という書式を用いる
06-06 見出しの表示指定
1フォントサイズを変えるには font-size、行揃えを変えるには text-align を指定する
2背景色を変えるには background、文字色を変えるには color を指定する
3角を丸くするには border-radius、文字に影をつけるを変えるには text-shadow を指定する
Chapter 07 HTMLとCSSを分ける理由
07-01 CSSはHTMLの中に書くこともできる
1CSSを書き込める場所は3種類
2CSSはHTML内の <style>~</style> の範囲内に書き込むことができる
3CSSはHTMLのタグ内の style="~" に書き込むことができる
07-02 HTMLとCSSを分離するメリット
1CSSはHTMLの内部にではなく、専用のファイルを用意してそこに書き込むのが基本
2CSSをHTMLの内部に埋め込むと、ファイルの容量・読み込み速度・メンテナンス性に大きな無駄が生じる
3CSSをHTMLの内部に埋め込むと、そのユーザーには不要かもしれないデータを読み込ませることになる

Part 03 レイアウトの基本編
Chapter 08 HTMLとCSSの基礎知識
08-01 HTMLの書式と専門用語
1ある範囲を示す前側のタグを「開始タグ」、後ろ側のタグを「終了タグ」と呼ぶ
2開始タグから終了タグまでの範囲全体を「要素」と呼ぶ
3開始タグの中に書き込める「lang="ja"」や「width="100"」のようなものを「属性」と呼ぶ
08-02 HTMLのグローバル属性
1lang属性は、どの「言語(日本語・英語など)」で書かれているのかを示す属性
2class属性は、要素に対して「分類上の名前」をつけるための属性
3id属性は、要素に対して「固有の名前」をつけるための属性
08-03 CSSの書式と専門用語
1CSSの適用対象を示す部分を「セレクタ」と呼ぶ
2「何を: どのようにする;」という表示指定の「何を」の部分を「プロパティ」と呼ぶ
3「何を: どのようにする;」という表示指定の「どのようにする」の部分を「値」と呼ぶ
08-04 CSSでの色の指定方法
1色はRGBをあらわす16進数で指定できる
2色はRGBをあらわす10進数でも指定できる
3色は英語の色名でも指定できる
08-05 CSSで使える長さの単位
1フォント関連の相対単位では「em」と「rem」を覚える
2ビューポート関連の相対単位では「vw」を覚える
3絶対単位では「px」を覚える
Chapter 09 サンプルサイト作成の準備
09-01 本書で作成するサンプルサイトについて
1これ以降はずっと同じ website-before フォルダで作業をおこなう
2CSSの「@charset」はCSSファイルの文字コードを示している
3CSSの「/* */」はコメントの書式
09-02 文法チェックサービスを活用しよう
1ささいな記述ミスを瞬時に発見できる文法チェックサービスを活用する
2CSSの文法チェックには「W3C CSS 検証サービス」を使用する
3HTMLの文法チェックには「W3C Markup Validation Service」を使用する
Chapter 10 ページ全体の構造をマークアップする
10-01 index.htmlの内容の確認
1ウェブページのナビゲーション部分は、一般にul要素でマークアップする
2dl要素・dt要素・dd要素は、内部の項目がペアになっている形式のリストをあらわす際に使用する
3small要素は、その部分が「欄外に小さな文字で掲載されるような副次的な情報」であることを示す
10-02 HTMLのセクションについて
1セクションとは、見出しとそれによって示された主題のおよぶ範囲にあるコンテンツのグループ
2セクションをあらわす要素は、section要素・article要素・aside要素・nav要素の4種類のみ
3見出しの要素は、要素名に含まれる数字をセクション等の入れ子の階層に合わせて適切に使用する
10-03 コンテンツの大枠の構造を示す
1コンテンツの大枠を示す要素には、セクションではないものもある
2main要素は、常に文書全体におけるメインコンテンツ部分を示す
3header要素とfooter要素は、セクション内部のヘッダー部分とフッター部分を示すこともできる
Chapter 11 「ホーム」以外のページも作ろう
11-01 ホーム以外のページの元を作る
1「ホーム」とそれ以外のページとでは、タイトルや文書構造などに違いがある
2「ホーム」から「ほかのページの元になるページ」を作成し、それを複製して他のページを作成する
3ただ範囲を指定するだけで、それが何であるかを示さない要素(div要素・span要素)もある
11-02 複製して新しいページを作る
1「about.html」を複製して各ページの元を作り、ファイル名を変更する
2各ページのtitle要素とh1要素の内容を書き換え、用意されているコンテンツを組み込む
3電話番号のような問い合わせ先に関する情報は <address>~</address> で囲って示す
Chapter 12 リンクさせてみよう
12-01 ホームから他のページへ
1ある範囲を <a href="リンク先アドレス"> ~ </a> で囲うとリンクになる
2リンクになったテキストには自動的に色と下線がつく
3テキストや画像だけでなく、ブロックレベル要素もまるごとリンクにできる
12-02 他のページからそれぞれのページへ
1「index.html」のナビゲーションをコピーする
2「index.html」以外のページのナビゲーションにペーストして保存する
3すべてのぺージに自由に移動できることを確認する
12-03 同じページ内の要素にリンクする
1ページだけでなく要素にもリンクできる
2リンク先の要素にはid属性で名前をつけておく
3a要素のhref属性の値には「#+id名」を指定する
12-04 ロゴ画像をクリックするとホームへ
1一般的なサイトでは、ページ上部のロゴはホームに戻るためのリンクになっている
2ブラウザの中には、画像をリンクさせるとそのまわりに線を表示させるものがある
3CSSで「img { border: 0; }」と指定すると、画像のまわりの線は表示されなくなる
Chapter 13 CSSのボックスについて
13-01 ボックスとは?
1ボックスにはボーダーを表示させることができ、その外側と内側には余白をとることができる
2ほとんどの要素のボーダーは、線種を指定するまでは表示されない
3上下に隣接するマージンは、重なり合うような状態となって相殺される
13-02 要素の表示形式はCSSで変更できる
1display: block; を指定すると、その要素はブロックレベル要素の表示になる
2display: inline; を指定すると、その要素はインライン要素の表示になる
3li要素は特殊で、ブロックレベルのボックスだけでなく行頭記号用のボックスも生成される
13-03 floatとclearの使い方
1floatを使うと要素を左右いずれかに寄せて配置し、その横に後続のコンテンツを回り込ませることができる
2clearを使うと要素を横に回り込ませずに、floatを指定した要素の下に表示させることができる
3idセレクタは、半角の「#」記号につづけてid属性の値を記述する
Chapter 14 「ホーム」のページを仕上げよう
14-01 各ページを仕上げるにあたっての準備
1本書のサンプルサイトでは、はじめにシンプルな1カラムのレイアウトを作成する
2この段階での表示確認は、幅を狭くしたブラウザまたは開発者用ツールでおこなう
3個別のページのCSSを追加する前に、主な要素の余白を0にしておく
14-02 フッター部分を仕上げよう
1セレクタ同士を半角スペースで区切ると「左側の要素の中にある右側の要素」が適用対象となる
2特定の範囲の英語をすべて大文字で表示させるには「text-transform: uppercase;」を指定する
3リンクの下線を消すには「text-decoration: none;」を指定する
14-03 ヘッダー部分を仕上げよう
1vertical-alignはインライン要素の縦方向の表示位置を変更し、font-weightはテキストを太字にする
2classセレクタは、半角の「.」記号につづけてclass属性の値を記述する
3セレクタ同士を「+」記号で区切ると「左側の要素の直後にある右側の要素」が適用対象となる
14-04 メインコンテンツ部分を仕上げよう
1body要素にid属性を指定しておくと、そのページだけを対象とした表示指定が可能となる
2:nth-child( ) を使うと、n番目やn番目以降、奇数個目、偶数個目などを適用対象にできる
3floatプロパティを使うと、ブロックレベル要素を横に並べることができる
Chapter 15 「会社概要」のページを仕上げよう
15-01 「ホーム」以外に共通のヘッダーの表示指定
1「ホーム」以外のページでロゴ画像が中央揃えになっていない原因は「id="logo"」が指定されていないこと
2「ホーム」以外のページのロゴ画像を含むdiv要素に「id="logo"」を追加する
3「ホーム」以外の各ページに共通する大見出しの表示を設定する
15-02 メインコンテンツ部分を仕上げよう
1「about.html」のbody要素に「id="about"」を指定する
2セレクタで「#about」を使用し、「about.html」だけを適用対象とする
3画像の幅を100%にして、表示領域の大きさにかかわらず画像の全体が表示されるようにする
Chapter 16 「事業内容」のページを仕上げよう
16-01 メインコンテンツ部分の表示指定
1body要素に「id="about"」、メインコンテンツのul要素に「id="division"」を指定する
2a要素に「display: block;」を指定して、ボックスの大きさを制御しやすくする
3borderプロパティを使うと、上下左右のボーダーの線種・太さ・色がまとめて指定できる
16-02 clearfixと呼ばれる手法をおぼえよう
1floatが指定されている要素に対しては、マージンは無効となる
2contentプロパティを使うと、要素内容を追加できる
3clearfixは、floatが指定されている要素よりも後に空の要素を挿入してそこにclearを指定する手法
Chapter 17 「アクセス」のページを仕上げよう
17-01 Googleマップを組み込んでみよう
1Googleマップはソースコードをコピー&ペーストするだけで表示させることができる
2Googleマップの幅を可変にするにはiframe要素に「width: 100%;」を指定する
3GoogleマップのHTMLが文法エラーになるのはframeborder属性が原因
Chapter 18 「お問い合わせ」のページを仕上げよう
18-01 メインコンテンツ部分の表示指定
1「contact.html」のbody要素に「id="contact"」を指定する
2斜体のテキストを標準状態に戻すには「font-style: normal;」を指定する
3max-widthプロパティを使うと、幅が特定のサイズを超えないように制限できる
18-02 お問い合わせ用フォームを設置しよう
1input要素は、type属性の値によってテキスト入力欄やボタンなど様々なフォーム部品になる
2ラベルとなっているテキストとフォームの部品を一体化させるにはlabel要素を使用する
3複数行のテキスト入力欄を作るには、textarea要素を使用する
18-03 お問い合わせ用フォームの表示指定
1セレクタに [属性名="属性値"] を追加して、適用対象を属性で絞り込むことができる
2ボックスに影をつけるには、box-shadowプロパティを使用する
3:last-child を使うと、最後の要素だけを適用対象とすることができる

Part 04 スマートフォン対応編
Chapter 19 ウェブページを原寸大で表示させる
19-01 スマートフォンでの表示を確認してみよう
1スマートフォンではウェブページが縮小された状態で表示される
2iPhoneのSafariでは、特に指定がなければ仮想的に画面の幅が980ピクセルあるものとして表示される
3iPhone以外のブラウザでもほぼ同じ仕様になっている
19-02 原寸大で表示させるための指定の追加
1<meta name="viewport" content="width=device-width, initial-scale=1.0"> を追加する
2「content="width=device-width」は、その機器の画面の幅に合わせて原寸大で表示させる指定
3「initial-scale=1.0」は、初期状態では拡大縮小なし(元サイズの1倍)で表示させる指定
Chapter 20 高画素密度ディスプレイにも対応させよう
20-01 スマートフォンでの画像の表示を確認してみよう
1スマートフォンでは、これまでに使用していた画像はぼやけた状態で表示される
2現在のスマートフォンのピクセル密度は、従来からの一般的なディスプレイの何倍もある
3画像がぼやけるのは、画像を数倍の大きさに引き伸ばして表示させているような状態だから
20-02 img要素には複数の画像を指定できる
1高画素密度ディスプレイ向けの画像を指定するには、img要素にsrcset属性を追加する
2srcset属性で数値につける「x」は何倍の画像かをあらわし、「w」は画像の幅のピクセル数をあらわす
3sizes属性で指定する画像の表示幅の値では、CSSの calc( ) 関数を使って計算式も指定できる
20-03 高画素密度ディスプレイ向けの指定の追加
1用意されている2倍サイズの画像をimagesフォルダに入れる
2固定サイズの画像にはsrcset属性を追加し、ピクセル密度を「○x」で示す
3可変サイズの画像にはsrcset属性とsizes属性を追加し、画像の幅を「○○○w」で示す

Part 05 さらにステップアップ編
Chapter 21 表を作ってみよう
21-01 表のマークアップの基本をおぼえよう
1表全体は <table>~</table> で囲う
2表の横一列分のセルはそれぞれ <tr>~</tr> で囲う
3表の見出しセルは <th>~</th>、データセルは <td>~</td> であらわす
21-02 会社概要のページに表を入れてみよう
1「about.html」に表のマークアップを追加する
2表が正しく表示されない場合は、文法チェックサービスを活用してマークアップのミスを発見する
3文法チェックをするとborder属性に関するWarning(警告)が表示されるが無視してかまわない
21-03 CSSで表の表示を整えよう
1CSS指定前の表の状態を確認する
2border-collapseプロパティで、二重になっている表の枠線を1本にまとめる
3CSSでさらに全体的に表の表示を整える
Chapter 22 画面サイズに合わせてCSSを切り替える方法
22-01 メディアクエリの使い方
1CSSを適用する対象を「出力先の種類」と「出力先の特性」で限定させるのがメディアクエリ
2メディアクエリは、「 出力先の種類 and (メディア特性:値) 」という書式で指定する
3一般に、メディア特性のうち「min-width」と「max-width」が多く使用されている
22-02 タブレット用とPC用のCSSファイルを追加しよう
1タブレット用とPC用のCSSを適用するための「切り替えのポイントとなる幅」を決定する
2タブレット用とPC用の外部スタイルシートを「css」フォルダに入れる
3メディアクエリを指定したlink要素をすべてのHTMLファイルに追加する
Chapter 23 タブレット専用のCSSを指定してみよう
23-01 ナビゲーションの項目を横並びにする
1タブレット向けのCSSは「tablet.css」に書き込む
2ナビゲーションの項目は「 display: inline; 」で横に並べる
3表示領域の幅が768~991ピクセルのときにだけナビゲーションの項目が横に並ぶようになる
Chapter 24 PC専用のCSSを指定してみよう
24-01 コンテンツ全体の幅を固定して中央に配置させる
1横方向に長すぎるコンテンツは読みにくい
2インライン要素の左右のマージンを「auto」にしても値は「0」になるだけ
3幅が固定されたブロックレベル要素の左右のマージンを「auto」にするとボックスが中央に配置される
24-02 PC用のレイアウトでは異なるロゴを表示させる
1picture要素とsource要素は、img要素とセットで使用する
2picture要素の内部には必要なだけsource要素を入れ、最後にimg要素を1つ入れる
3source要素にはsrcset属性とsizes属性が指定でき、media属性でメディアクエリも指定可能
24-03 ナビゲーションの項目をロゴの横に並べる
1ロゴは「 float: left; 」、ナビゲーションは「 text-align: right; 」で横に並べる
2h1要素は初期状態で文字サイズが大きくなっている点に注意する
3行内での縦方向の表示位置は、vertical-alignを使えばピクセル単位で変更できる
Chapter 25 PC向けのレイアウトを完成させよう
25-01 「ホーム」以外のh1要素の表示を変更する
1backgroundプロパティに指定していない背景関連の値は、初期値を指定したことになる
2背景画像だけを指定したい場合には、background-imageプロパティを使用する
3文字間隔はスペースで調整せずに、letter-spacingプロパティを使って調整する
25-02 メインコンテンツの内容を横に並べる
1メインコンテンツをfloatで横に並べて、後の要素でそれをclearする
2PC用のレイアウトでは大きく表示されすぎる画像は小さくする
3画像の表示サイズを変更したことによりimg要素のsizes属性で矛盾が出てきたら調整する
25-03 リンクの状態に合わせて表示を切り替える
1リンクの表示を変えるにはセレクタの「 :link 」「 :visited 」「 :hover 」「 :active 」を使用する
2CSSでの指定順序は「 :link 」「 :visited 」「 :hover 」「 :active 」にするのが基本
3PC用のレイアウトでは「PAGE TOP」のリンクは基本的に不要なので目立たせておく必要はない
25-04 閲覧環境に合わせてコントラストを調整する
1背景色が白の場合、スマートフォンやタブレット向けの文字色は真っ黒が読みやすい
2背景色が白の場合、PC向けの文字色は真っ黒ではなく濃いグレーにするのが一般的
3CSSでbody要素に文字色と背景色を指定していない場合、設定を変えたブラウザでは予想外の表示になる

Part 06 ウェブサイトの公開編
Chapter 26 公開に必要となるサーバーについて
26-01 レンタルサーバーを利用する
1できあがったウェブサイトのデータをサーバーに入れることで、誰でもアクセスして見られるようになる
2レンタルサーバーには色々と種類があるが、有料のものでも月額数百円ほどで利用可能
3ウェブサイトのURLを会社や店の名前のような独自のものにしたい場合には、ドメイン名を取得する必要がある
Chapter 27 ファイルをサーバーに転送して公開しよう
27-01 FTPソフトの入手と使用方法
1FTPは「File Transfer Protocol」の略で「ファイル転送プロトコル」の意味
2FTPよりも、情報を暗号化して転送する方式のFTPSやSFTPの方がよい
3FTPソフトは無料で入手でき、必要な項目を入力するとサーバーに接続され、ファイルを転送できるようになる

ご注文

別フォーマットで購入

シェアする

このエントリーをはてなブックマークに追加

関連書籍

同じジャンルの商品

お知らせ

一覧