TECHNICAL MASTER はじめてのHTML+CSS

概 要

実際にウェブサイトを制作しつつ、HTMLとCSSの正しい使い方と意味を基礎からしっかり学べる入門書です。HTMLとCSSはすべてのウェブサイト、ホームページ、ウェブサービス、スマホアプリ制作において基本になる知識です。本書は、ウェブサイト制作といっても何から始めればよいのかよくわからない人や、HTMLタグを一つ一つ勉強するだけでは飽きてしまう人向けに、実際にウェブサイトを作りながらHTMLとCSSの知識を少しずつ学習していく、はじめてでもよくわかる解説書です。制作環境の準備から、制作後のアクセスアップのことまで考えた内容となっているので、初心者でもウェブサイト制作全般の知識が身につきます。サンプルのダウンロードサービス付き。

著者 猿橋大
価格 本体2500円(税別)
ISBN 978-4-7980-3799-8
発売日 2013/5/24
判型 B5変
色数 4色
ページ数 404
CD/DVD
対象読者 初級
シリーズ TECHNICAL MASTER
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

Part 01 HTMLとCSSの基本

Chapter 01 ウェブサイトの制作を始める前に

01-01 どんなウェブサイトを作るのか [どんなウェブサイトを作るのか]

1どんなウェブサイトを作るのか、制作前にイメージを固める

2どのページにどんな情報を載せるのか

3どんな見栄えのウェブサイトにするのか

01-02 ウェブサイトの目的 [サイトの目的]

1誰に何を伝えるのか、ウェブサイトの目的を考えてみる

2ウェブサイトの狙い(コンセプト)を一行程度の文にまとめてみる

3ウェブサイトの目的・狙いに合致しているかどうかで、デザインの方向性を判断する

01-03 制作環境の用意 [制作環境]

1ウェブページを作成するパソコンの基本ソフト(OS)は、WindowsでもMacでも可

2Windowsなら「メモ帳」、Macなら「テキストエディット」で制作できる

3Microsoft Wordなどのワープロソフトは、ウェブページの作成には不向き

01-04 ウェブサイトの保存場所を作る [保存場所]

1ウェブページをどんなフォルダ構成で保存するのか、作成前に決めておく

2フォルダ名やファイル名は、半角英数・短め・内容が想像しやすい名前にする

3フォルダ名やファイル名は、最終的にはウェブページのアドレスの一部になる

Chapter 02 HTMLファイルを作成する

02-01 HTMLファイルを作成する [HTMLファイル作成]

1ウェブページとは、要するにHTMLファイルのこと

2HTMLファイルを保存する際には、適切な文字コードを選択する

3HTMLファイルに変更を加えたら、その都度上書き保存してブラウザで表示確認しながら制作を進める

Chapter 03 HTMLで情報の意味付けをする

03-01 タイトルを付ける [タイトル]

1ウェブページには、タイトルをひとつ付ける

2タイトルとなる文字列を<title>~</title>で囲む

3<title>~</title>は、<head>~</head>の内側にひとつだけ配置する

03-02 見出しを付ける [見出し]

1ウェブページ内の各セクションには、それぞれ見出しを付ける

2見出しタグは<h1> - <h6>の6種類、数値が小さいほうが上位レベルの大見出しとなる

3一般的なブラウザでは、大見出しは大きく、小見出しは小さく表示される

03-03 テキストを記述する(段落・改行・区切り) [段落・改行・区切り]

1段落は、p要素でマークアップする

2一般的なブラウザでは、段落は前後が改行されて表示される

3段落のように前後が改行されて、ひとつのブロックとなる表示形式をブロック表示と呼ぶ

03-04 コピーライト [コピーライト]

1コピーライト表記は、small要素でマークアップする

2small要素は、HTML4では「表示サイズを一回り小さくする」要素だった

3small要素は、HTML5では「免責・警告・著作権などの注釈や細目を表す」要素となる

Chapter 04 CSSで文字スタイルを指定する

04-01 CSSファイルを作成する [CSSファイル]

1ウェブページのスタイリングは、HTMLではなくCSSで指定する

2CSSファイルを作成して、そのファイル内にCSSソースをまとめて記述する

3CSSファイルの先頭では、@charset で文字コードを宣言する

04-02 文字サイズの指定 [文字サイズ]

1フォントサイズは、font-sizeプロパティで指定する

2body {font-size:95%;} は、「body要素のフォントサイズを95%にしなさい」という指定

3link要素でHTMLファイルからCSSファイルを読み込ませる

04-03 ソース中の改行、半角スペース、タブ [改行・スペース・タブ]

1HTML・CSSソース中の改行・半角スペース・タブは、ブラウザ上の表示に影響しない

2改行・半角スペース・タブを使って、ソースが見やすくなるように整形する

3HTMLやCSSソースの字下げに全角スペースは使わない

04-04 フォントの指定 [フォント]

1フォントの種類は、font-familyプロパティで指定する

2font-familyプロパティの値を半角カンマ( , )で区切ると複数指定できる

3font-family:sans-serif; でゴシック系フォント、font-family:serif; で明朝系フォントを指定

04-05 行の高さの指定 [行間]

1行の高さは、line-heightプロパティで指定する

2line-heightプロパティの値は、数値・%・px・em・exなどで指定できる

3行間 = 行の高さ(line-height) ~ 文字の高さ(font-size)

04-06 文字色の指定 [文字色]

1文字色は、colorプロパティで指定する

2色の値は、16進法、0-255の数値、カラーネームのいずれかで指定する

316進法では、color:#RRGGBB; の書式で指定する

04-07 CSSソース中にコメントを入れる [コメント]

1CSSソース中には、適宜コメントを入れる

2CSSソース中では、コメント部分を /*~*/ で囲む

3コメントは、ウェブページのスタイルには影響しない

Chapter 05 リスト要素でメニューを作る

05-01 リスト要素 [リスト要素]

1ウェブサイトのメニューは、HTMLのリスト要素で作成するのが一般的

2順序を問わないリストは、ul要素とli要素で作成する

3一般的なブラウザでは、ul要素は先頭に黒丸( ● )などのリストマーカーを付けて表示される

05-02 リストマーカーを消す [リストマーカー]

1リストマーカーの種類は、list-style-typeプロパティで指定する

2list-style-type:none; は、リストマーカー無しにする

3list-style-typeプロパティの値には、none以外にも、circle(円)、square(四角)などがある

05-03 リスト項目を横に並べる [リスト項目]

1要素の表示形式は、displayプロパティで指定する

2li {display:inline;} は、「li要素をインライン表示にしなさい」という意味

3li要素をインライン表示に変更すると、リスト項目が横に並ぶ

05-04 idセレクタによるスタイル指定 [idセレクタ]

1要素にid名を付けて、そのid名をセレクタにしてスタイル指定する

2idセレクタを利用すると、効率良くスタイル指定できる

3CSSには、idセレクタ以外にも様々なセレクタ(selector)が用意されている

Chapter 06 メインメニューのリンクを指定する

06-01 仮のリンク先ページを作る [リンク先]

1ハイパーリンクは、a要素でマークアップする

2ハイパーリンクを指定するには、リンク先のファイル名が必要

3指定したリンク先にファイルが存在していなければ、リンク切れとなる

06-02 ハイパーリンクを指定する [リンク]

1a要素のhref属性には、リンク先ファイルの所在地を指定する

2一般的なブラウザでは、リンクテキストの文字色は青く、下線が付いて表示される

3一度リンク先ページが表示されたリンクテキストは、青色から紫色に変化する

Chapter 07 メインメニューのスタイリング

07-01 メニューのサイズを指定する [メニューサイズ]

1要素の横幅と高さは、widthプロパティとheightプロパティで指定する

2a要素をブロック表示にすることで、クリックできるリンク範囲を広くする

3リストをフロート配置にすることで、メニュー項目を横に並べる

07-02 リンクの背景色と文字色を指定する [リンクの背景色・文字色]

1背景色は、background-colorプロパティで指定する

2色の値は、カラーネームと16進法のどちらでも指定できる

3例えば、navyと#000080は同じ、whiteと#ffffffは同じ

07-03 余白、センタリング、下線消し [余白・センタリング・下線消し]

1余白にはマージン(外側余白)とパディング(内側余白)がある

2paddingプロパティの値を4つ指定すると、記述順に上・右・下・左のパディングとなる

3テキストをセンター揃えするには、text-alignプロパティの値にcenterを指定する

07-04 マウスが乗ったら色を変える [マウスオーバー]

1CSSでは、ユーザーの操作に応じてスタイルを変化させることができる

2要素名に:hoverを付けると、「マウスが乗っている要素」という意味になる

3マウスが乗った際に変化を付けてやると、各リンクどうしの境界が分かりやすくなる

07-05 リンク部分に背景画像を指定する [リンクの背景]

1背景画像は、background-imageプロパティで指定する

2画像ファイルの所在地は、url()関数で指定する

3背景画像を指定する場合、同時に背景色も指定しておくほうが良い

Part 02 背景と画像

Chapter 08 背景色を指定する

08-01 ウェブページ全体の背景色の指定 [背景色]

1背景色は、background-colorプロパティで指定する

216進法による色指定では0123456789abcdefで一桁上がる。00に近いほど暗く、ffに近いほど明るい

3スタイルの適用対象は、セレクタで指定し分ける

08-02 背景色を指定する範囲をdiv要素で囲む [背景色範囲]

1要素をグループ化する際には、div要素などのコンテナ要素でマークアップする

2<div id="名前">~</div>と、id名を付けておくとスタイル指定しやすい

3id名はひとつの文書の中で同じものを重複して付けることはできない

08-03 メインコンテンツ部分の背景を白くする [背景を白く]

1背景色は、background-colorプロパティで指定する

2idセレクタでは、ナンバーサイン( # )の後にid名を記述する

3div#pagebody { ~ } は、「id名がpagebodyのdiv要素」がスタイル適用の対象となる

08-04 ボックス幅の指定とボックスのセンタリング [ボックス幅]

1ボックスのセンタリングは、width:横幅; margin:0 auto; で指定する

2marginプロパティの値を2つ指定すると、記述した順に[上下] [左右]のマージンとなる

3margin:0 auto; は、「上下マージン無し、左右マージンを自動算出にする」という指定

08-05 ブラウザの初期スタイルのリセット [初期スタイルリセット]

1ブラウザには、各要素を表示する際の初期スタイルが設定されている

2レイアウトを作成する際、この初期スタイルが邪魔になることもある

3* {margin:0; padding:0;} は、全要素のマージン・パディングをリセットする指定

08-06 余白を指定して表示位置を調整 [余白]

1margin:0px 20px; は、「上下マージン0px、左右マージン20pxにしなさい」という指定

2margin値1つは[上下左右]、値2つは[上下][左右]、値3つは [上] [左右] [下] 、値4つは[上][右][下][左]

3CSSでウェブページのレイアウトを決める際、余白で表示位置を調整することが多い

Chapter 09 背景画像を指定する

09-01 背景に使用する画像の用意 [背景画像の用意]

1背景画像は、タイル状に繰り返す指定にできる(繰り返さない指定にもできる)

2背景に使用する画像ファイルは、繰り返しパターンの最小単位で作成すると軽くなる

3画像ファイルをひとつのフォルダにまとめるとファイル管理がしやすい

09-02 ウェブページ全体の背景画像の指定 [背景画像]

1background-imageプロパティの値には、背景画像ファイルのパスをurl()関数で指定する

2誤ったパスを指定すると、単に背景画像が表示されないだけでエラーメッセージは表示されない

3背景画像の繰り返し方法を特に指定しなければ、縦横にタイルを敷き詰めたような表示になる

09-03 特定ボックスへの背景画像の指定 [特定ボックスへの指定]

1背景画像の繰り返し方法は、background-repeatプロパティで指定する

2background-repeat:repeat-y; は、背景画像を縦方向にだけ繰り返す

3repeatはタイル状、repeat-xは横方向、repeat-yは縦方向、no-repeat一回だけ表示

Chapter 10 画像の表示

10-01 ロゴ画像を表示する [ロゴ画像]

1画像は、img要素でマークアップする

2img要素のsrc属性には、画像ファイルのパスを指定する

3img要素のalt属性には、代替テキストを指定する

10-02 ヘッダ部分のスタイリング [ヘッダ部分]

1paddingプロパティの値を4つ指定すると、[上] [右] [下] [左]の順(時計回り)になる

2text-decoration:none; は、テキストに付けられる下線を消すように指定

3IEではリンク画像にボーダーが付くので、img {border:0;} でボーダーを0に指定

10-03 一枚画像でユーザーの想像力を喚起する [画像で想像力]

1パソコン向けサイトでは、広い画面が使えることを活かしたデザインを心掛ける

2大きめのグラフィックがあると、それだけでウェブサイトの印象が変わる

3できれば、ウェブサイトのコンセプトを端的に表すグラフィックにしたい

10-04 画像の表示位置の調整 [画像の表示位置]

1img要素の幅と高さの指定することで、画像の表示領域を確保する

2幅と高さを指定しておくことで、画像の読み込みに失敗してもレイアウトが崩れない

3画像ファイルは、幅と高さをウェブページのレイアウトに合わせて作成する

10-05 「新着情報」の画像を表示する [画像の新着情報]

1p要素の中にimg要素を配置すると、画像を段落の一部としてマークアップしたことになる

2一般的なブラウザではimg要素はインライン表示となる(行の一部として表示される)

3行の一部として画像が表示されると、画像はテキストのベースラインと下揃えされる

Chapter 11 フロート配置

11-01 画像のフロート配置 [画像のフロート配置]

1要素を右に寄せるには、floatプロパティでrightを指定する

2フロート要素の反対側に空いたスペースには、その後に続く要素が流し込まれる

3classセレクタを使うと、ウェブページ内の複数箇所に同じスタイルをまとめて適用できる

11-02フロート配置のクリア [フロート配置のクリア]

1フロートの影響をクリアするには、後に続く要素にclearプロパティを指定する

2clear:both; は、左右どちらのフロートもまとめてクリアする

3hr要素は、HTML5からは「テーマの区切りを表す」要素となる

Chapter 12 ページ内リンク

12-01 リンク先の指定 [リンク先の指定]

1ウェブページ内の特定個所へのリンクもa要素で指定できる

2a要素のhref属性の値として#に続けてid名を記述すると、特定個所へのリンクとなる

3href属性の値に指定したid名がウェブページ内に無ければ、リンクをクリックしても移動しない

12-02 リンクの移動先にid名を付ける [リンクの移動先にid名]

1<要素名 id="id名">要素内容</要素名> の書式で要素にid名を付ける

2要素にid名を付けることで、リンク先として指定できるようになる

3ひとつのウェブページ内では、重複して同じid名を付けることはできない

Chapter 13 段組みレイアウト

13-01 div要素で左右カラムをまとめる [左右カラムをまとめる]

1段組みレイアウトには、CSSのfloatプロパティを使用するのが標準的な手法

2HTMLソースでは、左カラムと右カラムに入る内容をそれぞれdiv要素で囲む

3左右カラムとなるdiv要素には、それぞれid名を付けておく

13-02 floatプロパティでカラムを横に並べる [カラムを横に並べる]

1左右カラムには、floatプロパティと同時にwidthプロパティを指定して横幅を固定する

2横に並べる左右カラムの横幅の合計が、親ボックスの横幅を超えないように指定する

3左右カラムの横幅の合計が、親ボックスの横幅を超えるとカラム落ちしてしまう

13-03 フロートのクリア [フロートのクリア]

1段組みの後に続く要素にclearプロパティを指定して、フロートをクリア(解除)する

2clear:right; で右フロート解除、clear:left; で左フロート解除、clear:both; で左右どちらも解除

3フロート解除すると、後に続く要素が下部に配置されて、その位置まで親要素の背景が連続するようになる

Chapter 14 サブメニューのスタイリング

14-01 サブメニューのスタイリング [サブメニューのスタイリング]

1マージン(外側余白)を空けて、サブメニューの表示位置を調整する

2クリックしやすくするために、メニューのリンク領域を広げる

3リンクの境界を明確にするために、リンク領域に下ボーダーを付ける

14-02 最初の子要素にだけスタイル指定する [リストマーカーの最初のみ]

1最初の子要素にだけスタイル指定するには、:first-child疑似クラスを使用する

2li:first-child { ~ } という書式は、「最初の子要素となるli要素」という意味になる

3疑似クラスとは、文書構造だけでは特定できない“ある状況の要素”を対象にするセレクタ

14-03 マウスカーソルを乗せたときに変化を与える [マウスカーソルを乗せたとき]

1マウスが乗った要素にスタイル指定するには、:hover疑似クラスを使用する

2a:hover { ~ }という書式は、「マウスが乗ったa要素」という意味になる

3リンク部分にマウスが乗った際にスタイルを変化させることで、これからどのリンクをクリックするかを明確にする

Chapter 15 見出しのスタイリング

15-01 h2要素のスタイリング [h2要素のスタイリング]

1見出しをスタイリングで目立たせて、ユーザーの目線を誘導する

2ウェブページの背景が全体的に白っぽいので、h2要素の背景を濃い色にすることで他から際立たせる

3背景が付くのはwidth・height・paddingの領域まで、marginの領域には背景は付かない

15-02 h3要素のスタイリング [h3要素のスタイリング]

1角丸は、border-radiusプロパティで指定する

2border-radiusプロパティの初期値は0なので、特に指定しなければ四角形になる

3border-radiusプロパティは新仕様の先行実装なので、-moz-や-webkit-といった接頭辞付きの指定を併記する

Chapter 16 内容挿入

16-01 内容挿入によるアイコン表示 [内容挿入]

1先頭にアイコン画像を挿入することで、それがメニュー項目であることを視覚的に示す

2内容を自動挿入するには、contentプロパティを使用する

3:before疑似要素は、“要素の直前”を表す。擬似要素とは、文書構造だけでは特定できない“要素の一部”を対象にするセレクタ

16-02 インフォメーション部分の余白調整 [余白調整]

1全要素の余白をゼロにするということは、余白に関しては制作者側で責任を持つということ

2ほどよく余白を入れて、気持ちよく閲覧できるように見栄えを整える

3グリッドラインを揃えてやると、レイアウトが整理されて収まりが良くなる

16-03 p要素のスタイリング [p要素]

1marginプロパティの値をひとつだけ指定すると、上下左右に同じマージン値を指定したことになる

2文章の一行目をインデント(字下げ)するには、text-indentプロパティを使用する

3emはフォントの高さを1とする単位。text-indent:1em; は、一行目を一文字分インデントさせる指定になる

16-04 hr要素のスタイリング [hr要素]

1hr要素の横幅を上にあるp要素と揃えることで、グリッドラインを揃える

2hr要素はあまり目立たせたくないので、線種や色を軽いものにする

3hr要素に余白を指定することで、テーマ区切りのスペースを広くする

16-05 フッタ部分のスタイリング [フッタ部分]

1font-sizeプロパティには、数値の他にも x-small などのキーワード値による指定も可能

2日本語の場合、初期値ではテキストは左寄せとなっている

3テキストのセンタリングは、text-align:center; と指定する

Part 03 テーブルとフォーム

Chapter 17 テーブル(表)を作成する

17-01 HTMLファイルを複製する [HTMLファイル複製]

1新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い

2同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる

3最初はひとつひとつのパーツ作成に時間が掛かるが、一度作れば使いまわしがきくので徐々に制作速度が上がる

17-02 複製ファイルの内容を書き換える [ファイル内容の書き換え]

1完成したHTMLソースを部分的に書き換えて、別のページとして使いまわすと効率が良い

2最初に作成するファイルをきちんと詰めておかないと、いい加減な設計のファイルが複製されていくことになる

3書き換え漏れの無いように良く確認をする

17-03 テーブル(表)の作成 [テーブル]

1テーブル(表)は、table要素・tr要素・th要素・td要素で作成する

2<table>~</table>でひとつのテーブル、<tr>~</tr>テーブル内の横一行、その中にセルを定義する

3HTMLでテーブルを作成しただけではボーダーなどが付いていないため、見た目にはテーブルがセル分けされていることが分かりにくい

17-04 地図の表示 [地図の表示]

1地図画像を作成する場合には、最寄りの交通機関からのアクセスが分かるようにする

2地図中の目的地を見つけやすいように意識的に目立たせる

3色盲の人にも分かるように、色味だけに頼らずに明度差を付けたり、模様・記号・文字を併記するなどの配慮をする

Chapter 18 テーブルのスタイリング

18-01 table要素にクラス名を付ける [table要素にクラス名]

1テーブルをスタイリングするために、table要素にクラス名を付ける

2ウェブページ内に2つのtable要素があるので、idセレクタではなくクラスセレクタを利用する

3table要素にクラス名をつければ、その子孫要素となるth要素やtd要素を特定してスタイル適用できる

18-02 テーブルスタイル専用のCSSファイルを作成する [専用のCSSファイル]

1テーブルスタイル専用のCSSファイルを新規作成する

2table要素を使用しているウェブページだけで利用するスタイルなので、別のCSSファイルにしたほうが管理しやすい

3HTMLファイルからは、そのHTMLファイルで必要となるCSSファイルだけを読み込ませれば良い

18-03 テーブルのスタイリング [テーブルのスタイリング]

1セルの背景色・ボーダーを指定することで、セル分けされていることが明確になる

2セル内にほど良く余白をもたせることで、見やすいテーブルになる

3改行を禁止する場合には、white-space:nowrap; と指定する

18-04 セル同士の隙間を無くす [セル同士の隙間]

1標準的なブラウザでは、テーブルのセル同士の間にわずかに隙間が入る

2セル同士の隙間を無くすには、border-collapse:collapse; と指定する

3セル同士の隙間を無くすことで、セルに指定したボーダーをスッキリした一本線にできる

18-05 地図部分のスタイリング [地図の部分]

1地図画像をfloatプロパティで左寄せにする

2地図画像を左にフロートさせることで、空いた右側のスペースにテキストを流し込ませる

3地図画像にマージン(外側余白)を指定して、テキストとの配置のバランスを調整する

18-06 備考情報の部分のスタイリング [備考情報の部分]

1ディテールまで、ひと通り手を入れる

2余白で位置調整するだけでも印象が良くなる

3グリッドラインを揃えると、スッキリした印象になる

Chapter 19 フォームを作成する

19-01 HTMLファイルを複製する [HTMLファイル複製]

1新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い

2同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる

3フォームの入力画面までなら、HTML+CSSだけで作成できる

19-02 フォーム入力ページの作成 [フォーム入力ページ]

1フォームはHTMLのform要素で作成する

2フォームの部品となる入力欄や送信ボタンは、input要素やtextarea要素で作成する

3input要素は、type属性に指定する値により種類が変化する

19-03 テーブル向けスタイルシートを適用する [スタイルシート適用]

1HTMLファイルごとに、そのHTMLファイルで必要となるCSSファイルを読み込ませる

2table要素を使用したファイルからはtable.cssを読み込ませる

3table要素のスタイリングを揃えることで、ウェブサイト全体で統一感を出せる

19-04 入力欄の関連付け [入力欄関連付け]

1入力項目の名前(ラベル)と入力欄は、HTMLのマークアップで関連付ける

2ラベルと入力欄をセットにして<label>~</label>で囲むことで、関連付けることができる

3ラベルの関連付けをすることで、ラベルをクリックすれば入力欄にフォーカスされるようになる

19-05 入力必須の指定とプレイスホルダーの表示 [入力必須の指定]

1入力欄を入力必須にするには、required属性を指定する

2プレイスホルダーを表示するには、placeholder属性で表示内容を指定する

3required 属性とplaceholder属性は、旧いブラウザではサポートされていない

19-06 「メールでのお問合せ」「お電話でのお問合せ」の部分を作る

[メールでのお問い合わせ]

1ユーザーによっては、フォームの操作が苦手な人・好きではない人もいる

2対応できるなら、フォーム・メール・電話・FAX・手紙など、問い合わせ方法を複数用意できると良い

3電話によるお問合せなどでは、受付時間を明記しておくと良い

Chapter 20 フォームのスタイリング

20-01 フォームスタイル専用のCSSファイルを作成する [専用のCSSファイル]

1面倒で不安を伴うフォーム操作が、少しでも改善されるようにスタイリングを工夫する

2フォームスタイル専用のCSSファイルを新規作成する

3form要素を使用しているウェブページだけで利用するスタイルなので、別のCSSファイルにしたほうが管理しやすい

20-02 フォーム部品のスタイリング [フォーム部品]

1form要素にid名を付けてセレクタにする

2セレクタを半角カンマ( , )区切りにすると、複数のセレクタに対してまとめてスタイル指定できる

3ボックスに影を付けるには、box-shadowプロパティを使用する

20-03 ユーザーの操作に反応を返す [操作に反応]

1ユーザーが入力欄を操作した際に何らかの反応を返してやると、フォームの操作性が向上する

2どの入力欄を操作しているのかを明確にして、ユーザーに安心感を与える

3ユーザーがフォーカスしている要素は、:focus疑似クラスで特定できる

20-04 送信ボタンを画像ボタンに変える [ボタンを画像ボタンに]

1送信ボタンをクリックしやすく、見栄え良くすると、フォームの操作性が向上する

2送信ボタンを画像にするには、input要素のtype属性の値をimageにする

3src属性には画像ファイルのパス、alt属性には代替テキストを指定する

20-05 画像ボタンのスタイリング [画像ボタン]

1送信ボタンのサイズをCSSで指定する

2送信ボタンの周囲に付けられるボーダーを消して、見栄えをスッキリさせる

3送信ボタンの表示位置を調整して、バランスを整える

20-06 input要素のスタイルを属性値で指定し分ける [属性値で指定し分ける]

1input要素を対象にスタイル指定すると、一行テキストボックス・ラジオボタンなどがすべて影響を受ける

2要素名[属性名="属性値"] { ~ } の書式で、属性に特定の値が指定されている要素にだけスタイル指定できる

3例えば、input[type="email"] { ~ } なら、「type属性の値がemailのinput要素」がスタイル適用対象になる

Chapter 21 フォームサービスを利用する

21-01 インターネット上で提供されているフォームサービス [フォームサービス]

1インターネット上で提供されているフォームサービスを利用する

2公式サイトの説明に従えば自分のウェブサイトにフォームメールを設置できる

3インターネット上のサービスは常に更新・改善されるので、利用の際には必ず公式サイトの最新情報を確認する

21-02 iframe要素を埋め込むHTMLファイルを作成する [iframe要素]

1iframe要素を使うと、URLを指定するだけで自分のウェブページ内に外部ページを丸ごと埋め込むことができる

2インラインフレームなら、フォームの入力欄から送信部分までをサービス側に任せてしまえる

3記述するHTMLソースが短くて済むので、HTMLに慣れていない人にも導入しやすい

21-03 iframeでフォームメールサービスをページごと埋め込む [ページごと埋め込む]

1利用するサービスで定められている利用規約を守る

2HTMLコードの取得などの具体的な設置方法については、公式サイトで確認する

3HTMLコードはサービス側で自動生成しているので、利用者ごとに取得するHTMLコードが異なる

21-04 [HTMLコード]を記述するHTMLファイルを作成する

[[HTMLコード]を記述する]

1非インラインフレーム版では、form要素やinput要素などを含むHTMLコードを取得して自分の作成したHTMLファイル内に貼り付ける

2フォームの入力部分は、自分の利用するウェブサーバー上に置いて公開する

3送信プログラムの部分は、インラインフレーム版と同様にサービス側に任せる

21-05 [HTMLコード]を取得してHTMLソースに追加

[[HTMLコード]を取得して追加]

1利用規約を良く読む

2取得したHTMLコードの編集禁止、バナー広告やリンク設置の義務など、指定された条件を守って利用する(守れないなら利用をあきらめる)

3必ず利用するサービス公式サイトで最新情報を確認しながら作業を進める

Chapter 22 動画を表示する

22-01 HTMLファイルを複製する [HTMLファイルを複製する]

1新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い

2同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる

3コピーしたファイルの内容を部分的に書き換えても良いし、復習のつもりですべて手打ち入力しても良い

22-02 動画を掲載する [動画]

1HTML5から追加されるvideo要素を使って、ウェブページに動画を掲載する

2ブラウザの種類によりサポートしている動画形式が異なるので、複数の形式で動画ファイルを用意する

3<video>~</video>の内側に、source要素で再生候補の動画ファイルを指定する

Part 04 スマートフォンとアクセスアップ

Chapter 23 スマートフォンへの対応

23-01 スマートフォンでPCサイトを表示する [PCサイト]

1制作してきたサンプルサイトが、スマートフォンではどのように表示されるのか確認する

2パソコン向けに作られたウェブページは、スマートフォンでは小さく表示されがちでそのままでは見づらい

3スマートフォンなどのデバイスでは、ビューポートと呼ばれる表示設定でウェブサイトの表示サイズが決まる

23-02 meta要素でビューポート(viewport)を指定する [ビューポート]

1ビューポートは、meta要素で値を指定できる

2meta要素のnameの属性の値にviewportを指定して、content属性の値に横幅や倍率を指定する

3スマートフォンなどのデバイスで、ウェブページが原寸大で表示されるようにビューポートを指定する

23-03 メディアクエリ [メディアクエリ]

1メディアクエリでユーザーのデバイスのウィンドウサイズを判別して、スタイルシートを切り替える

2スマートフォンのような小さな画面の場合には、スマートフォン向けのスタイルシートを適用させる

3今回の作例では、ウィンドウ幅が800px以下の場合に、スマートフォン向けCSSファイルを適用する

23-04 ウィンドウ幅に応じたスタイルの表示テスト [ウィンドウ幅に応じたスタイル]

1ウィンドウ幅に応じてスタイルが切り替わるかどうか、表示テストをする

2メディアクエリは旧いブラウザではサポートされていないが、スマートフォンではCSS3のサポートが進んでいる

3スタイルの切り替えが確認できれば、あとはスマートフォンに合わせたスタイルをCSSで作り上げていくだけ

Chapter 24 スマホサイト向けスタイル

24-01 スマホ向けCSSファイル [スマホ向けCSSファイル]

1スマートフォン向けのスタイルでは段組みをやめて、縦方向のスクロールだけで閲覧できるようにする

2横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにする

3ただし、これらはあくまでもスマートフォン向けのスタイルの可能性のひとつに過ぎない

24-02 スマートフォン向けテーブルのスタイリング [スマホ向けテーブル]

1テーブルについても、スマートフォン向けに横幅などのスタイルを指定する

2テーブルの横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにする

3テーブルセルのpaddingプロパティの値をパソコン向けよりも少なめにして、バランスを調整する

24-03 サブページもスマートフォン対応にする [サブページ]

1「会社概要」「お問合せ」「製品紹介」の各ページをスマートフォンに対応にする

2ビューポートを指定するmeta要素を追加する

3必要なCSSファイルを読み込ませるlink要素を追加する

Chapter 25 メールリンク、TELリンク

25-01 メールリンク [メールリンク]

1a要素でメールリンクを指定すると、クリックするだけでメールソフトが起動する

2メールリンクは、<a href="mailto:メールアドレス">~</a>の書式で指定する

3<a href="mailto: メールアドレス~subject=件名&body=本文">~</a>の書式なら、件名や本文を初期指定できる

25-02 TELリンク [TELリンク]

1a要素でTELリンクを指定すると、携帯電話などではクリックするだけで電話が掛けられる

2TELリンクは、<a href="tel:電話番号">~</a>の書式で指定する

3href属性に指定する電話番号は、ハイフン( - )無しで記述する

25-03 スマホで電話番号リンクさせない [電話番号リンクさせない]

1スマートフォンなどでは、電話番号とおぼしき数字が自動的にTELリンク表示となることがある

2関係の無い単なる数値であっても、勝手にTELリンクにしてしまうことがある

3meta要素の指定で、自動TELリンクを無しにすることができる

Chapter 26 印刷用のスタイル

26-01 印刷用のCSSファイルを新規作成する [印刷用CSSファイル]

1ウェブページを印刷して利用する場合には、スクリーン上で利用する場合とは求められる要件が異なる

2CSSでは、ウェブページが利用されるメディアごとにスタイルシートを指定し分けることができる

3ここまで作成してきたスクリーン用とは別に、印刷用のCSSファイルを新規作成する

26-02 メディアがprintの場合に印刷用CSSを適用する [印刷用CSS適用]

1media属性の値にprintを指定すると、印刷時にのみprint.cssが適用される

2media属性の初期値はallなので、指定を省略するとすべてのメディアでスタイルが適用される

3media属性の値には、all・screen・print・projection・tv・handheld・tty・embossed・braille・speechを指定できる

26-03 印刷用スタイルシート [印刷用スタイルシート]

1メニュー部分は、用紙上でクリックできるわけではないので印刷時には非表示にする

2ヘッダ画像やフッタ部分は、用紙やインクの無駄にならないように印刷時には非表示にする

3段落などのメインコンテンツ部分は、紙面を有効に使えるように印刷時には横幅100%にしてする

26-04 スタイル指定の記述を短くしてスッキリさせる [短い記述]

1重複したスタイル指定をセレクタでまとめて、CSSソースの記述を短くする

2セレクタを半角カンマ( , )区切りにすることで、重複するスタイル指定を一箇所にまとめる

3重複したスタイル指定をまとめるだけなので、指定するスタイル内容は変わらない

26-05 サブページにも印刷用CSSを適用する [サブページ]

1トップページ以外のサブページにも、印刷用CSSを適用する

2link要素のmedia属性の値にprintを指定することで、印刷時にのみprint.cssを読み込ませる

3印刷プレビューで、印刷用CSSが適用されていることを確認する

Chapter 27 アクセスアップのための対策

27-01 meta要素で適切な文字コードを指定する [適切な文字コード]

1文字化けを避けるために、meta要素で適切な文字コードを指定する

2meta要素による文字コードの指定を省略すると、文字化けが起きる場合がある

3文字化けが起きると、検索エンジンに正しく収集してもらえない場合がある

27-02 ウェブページのタイトルは重要 [タイトル]

1アクセス数を向上させるうえで、title要素の内容は重要

2検索エンジンは、title要素の内容を重要視している

3Google やYahoo!の検索結果画面には、title要素の内容が表示される

27-03 キーワード、ウェブページの説明 [キーワード説明]

1meta要素のdescriptionには、ウェブページの説明を指定する

2meta要素のkeywordsには、ウェブページに関連するキーワードを指定する

3descriptionsに指定した内容は、Google などの検索結果にそのまま表示されることがある

27-04 適切なHTMLソース [適切なHTML]

1ウェブページ内のテキスト・画像などの情報は、適切な要素でマークアップする

2より重要なキーワードは、より重要な要素としてマークアップする

3ウェブページ内に記述する文章中に、不自然にならない程度にキーワード出現率を高める

Chapter 28 ウェブサイトの公開

28-01 独自ドメイン名の取得 [独自ドメイン名]

1独自ドメイン名は、個人でも取得することができる

2ドメイン名は早い者勝ち、そのドメイン名が空いていれば取得できる

3ウェブサイトの運営途中でURLを変更することは極力避けたい

28-02 サーバースペースの選定 [サーバースペース]

1ウェブサイトを公開するには、HTMLファイルなどを置くサーバースペースが必要となる

2サーバーサービスには、有料から無料まで様々なものがある

3ウェブサイトでやりたいことに合わせて、利用するサーバーサービスを選定する

28-03 FTPソフトの入手 [転送FTPソフト]

1Windows向けのFTPソフトとしては「FFFTP」などが定番となっている

2Mac向けのFTPソフトとしては「Cyberduck」などが定番となっている

3FTPソフトの公式サイトからダウンロードして、インストールする

28-04 FTPソフトの設定とサーバーへのFTP接続 [FTPソフト設定]

1FTPソフトを設定して、利用しているウェブサーバーにFTP接続する

2設定には、サーバーのアドレス・ユーザー名・パスワードなどの情報が必要になる

3FTP接続に成功すると、ウェブサーバー上にあるフォルダやファイルを操作できる

28-05 ファイルのアップロード [ファイルのアップロード]

1サーバーにHTMLファイルなどをアップロードすることで、ウェブサイトを公開できる

2サーバー側のどのフォルダ内にアップロードすれば良いかは、利用するサーバーサービスごとに異なる

3ファイルのアップロードが完了したら、ブラウザのアドレス入力欄にURLを入力して表示確認をする

28-06 スマートフォンで動作確認 [スマートフォン動作確認]

1ウェブサイトを公開したら、ブラウザやOSの種類・バージョンを変えて様々な閲覧環境で表示テストをする

2チェックポイントは、リンク切れ・レイアウト・操作性・表示速度・文字サイズ・画像の解像度 etc…

3表示テストでは何かしら改善余地が見つかるもの。適切な状態になるまで確認⇔修正を繰り返す

28-07 バリデーションで文法間違いをチェック [文法間違いチェック]

1HTMLやCSSがウェブ標準に従って作成されているかどうか、バリデーションサービスで調べる

2バリデーションサービスでチェックできるのは、HTMLやCSSの文法的な間違いの有無

3HTMLやCSSに文法的な間違いがあっても、それでウェブページが表示されないということはない

28-08 検索エンジンへの登録 [検索エンジン登録]

1より多くの人にウェブサイトを利用してもらうには、検索エンジンへの登録は欠かせない

2検索エンジンの結果に表示されるには、URL申請をする必要がある

3現状の検索エンジンのシェアを考慮すれば、ひとまずGoogleに申請しておけば良い

28-09 faviconを指定する [favicon]

1ブラウザのタブ部分などに表示されるアイコンを、オリジナルアイコンにすることができる

2アイコンとなる画像を作成して、ico形式に変換、ファイル名を「favicon.ico」とする

3HTMLファイルの<head>~</head>内で、link要素でfavicon.icoを指定する

28-10 CSS無しで表示してみる [CSS無し表示]

1これまでに作成したウェブページを、CSS無しの状態にしてテスト表示する

2CSS無しでもHTMLで適切にマークアップしてあれば、最低限ユーザーに情報の意味を伝えられる

3「HTMLで情報の意味を指定して、CSSでスタイリングを指定する」のがウェブ制作の基本

Chapter 29 HTML・CSSソース全文

29-01 HTMLソース全文 [HTMLソース]

1書き写すことも学習方法のひとつ

2部分的に抜粋して表示テストをしてみても良い

3意味が分からない箇所があれば、インターネットで検索してみると良い

29-02 CSSソース全文 [CSSソース]

1書き写すことも学習方法のひとつ

2プロパティの値を変えて表示テストをしてみても良い(数値を変えたり、blockをinlineにしてみるなど)

3意味が分からない箇所があれば、インターネットで検索してみると良い

PR

秀和システム