TECHNICAL MASTER はじめてのHTML+CSS HTML5対応

概 要

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

著者 大藤幹
価格 本体2500円(税別)
ISBN 978-4-7980-5100-0
発売日 2018/4/28
判型 B5変
ページ数 392
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

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ソフトは無料で入手でき、必要な項目を入力するとサーバーに接続され、ファイルを転送できるようになる

PR

秀和システム