HTML&スタイルシート レッスンブック
ステップ・バイ・ステップでマスターできる
|
編著者
|
エビスコム
|
|
出版社
|
ソシム株式会社
|
|
出版日
|
2002年11月15日
|
|
判型
|
182 x 234 / 304ページ
|
|
価格
|
2,300円
|
|
ISBN
|
4-88337-326-6
|
Webページ作りは難しい、専用のソフトがないからWebページは作れない、HTMLやスタイルシートなんてとんでもない…。もし、そう思っているとしたら、大きな誤解をしているかもしれません。
Webページは、特別なソフトがなくても作れます
パソコンに標準で入っているソフトを使うことができるので、パソコンがあれば、すぐにでも作りはじめることができます。
Webページ作りは難しくありません
シンプルなページを、一度作ってみてください。とても簡単に作れることがわかります。あとは、少しずつアレンジの幅を広げていくことで、いろいろなページを作れるようになります。
HTMLも難しくありません
実は、よく使うHTMLは限られています。その限られたHTMLさえ押さえておけば、手軽にWebページを作ることができます。
スタイルシートだって難しくありません
HTMLだけでWebページを作る方法を覚えてしまうと、スタイルシートは難しく感じます。しかし、最初からHTMLとスタイルシートの両方を使ったページ作りを覚えると、難しいことはありません。むしろ、効果的に活用できるようになります。
本書では、そんなWebページ作りのノウハウを徹底的に網羅しました。ステップ・バイ・ステップのチュ−トリアル形式で、「できない」「難しい」と思われているポイントを、「簡単に」「わかりやすく」解説していきます。
はじめてWebページを作る人にも、HTMLやスタイルシートをきちんと勉強してみたい人にも、本書を活用していただければ幸いです。
●Webページを作りながら、ページ制作のノウハウを身に付ける
本書では、実際にWebページを作ることで、Webページ作りの基本から応用テクニックまでが身に付くように構成しています。手順にしたがって、テキストエディタを起動し、サンプルのWebページを作ってみてください。
●HTMLとスタイルシートの両方を使った最新ページ制作方法をマスター
本書では、古くなり、現在では使われなくなったHTMLを使用していません。その代わり、最初からHTMLとスタイルシート(CSS)の両方を活用する方法でWebページを制作していきます。そのため、余計なことを覚える必要がなく、効果的に最新のページ制作方法を身に付けることができます。
●一般的なWebページを作成
本書では、一般的なWebサイトの構成に合わせて、次の5種類のページを作成します。
・トップページ
Webサイトの入口となるページです。アクセスしてきた人に一番最初に見てもらうことになる、大切なページです。
・コンテンツページ
コンテンツのページです。日記やコラム、ニュースなど、どんなものでもかまいません。本書では、写真&コラムのページを作っています。
・プロフィールページ
自己紹介のページです。どんな人がページを作っているのか、わかるようなページを作ります。
・リンクページ
コンテンツに関連したWebページや、お気に入りのWebページを紹介します。
・ご意見箱ページ
アクセスしてきた人に、感想などを送ってもらうためのページです。
●WebページはChapterごとに少しずつ完成
Webページは、Chapterごとに少しずつ完成させていきます。Chapterごとに各ページを完成させていくのもよいですし、まずはトップページだけを完成させていくというのもよいでしょう。また、Chapter 7では、完成したWebページをサーバーにアップロードし、Chapter 8では、作成したWebページをさらにアレンジするテクニックを紹介します。
●Webページの作り方はステップ・バイ・ステップで解説
Webページの作り方は、ステップ・バイ・ステップで、1ステップずつ丁寧に解説しています。
●TOPICSで詳しい情報やテクニックを紹介
HTMLやスタイルシートの詳細、応用テクニックなどはTOPICSで紹介します。さらに詳しく知りたいときに読んでください。
●標準付属のソフトやフリーウェアを活用
Webページの制作には、特別なソフトは使用しません。WindowsやMacintoshといったパソコンに、標準で付属してくるソフトを使うため、すぐにでもページ作りを始めることができます。
また、画像を作る場合でも、インターネット上で入手可能なグラフィックソフトを使います。この場合も、フリーで利用できるものや、有償でも試用できるものを使います。
●WindowsとMacintoshの両方に対応
本書では、WindowsとMacintoshの両方に対応しており、グラフィックソフトの使い方など、それぞれの環境について解説しています。
Chapter 1 ページを作ってみる
1 Webページの土台を作る
TOPICS 呪文のようなテキストの正体
TOPICS ワープロソフトよりもテキストエディタ?
2 Webページにタイトルを付ける
TOPICS トップページのファイル名はindex.htm
TOPICS Webページのタイトルはとても重要
TOPICS ブラウザの種類
3 見出しを表示する
4 文章を表示する
TOPICS タグについて
5 コピーライトを表示する
TOPICS HTMLの基本ルール
HISTORY COLUMN Webの誕生
Chapter 2 文字のデザイン
1 文字の大きさを変える
TOPICS スタイルシートの基本
TOPICS コメントアウトの使い方
TOPICS デザイン設定の書き方
TOPICS 文字の大きさの設定 {font-size}
TOPICS 数値で指定するときの単位の書き方
TOPICS デザイン設定をインラインで指定する
2 フォントの種類を変える
TOPICS フォントの種類の設定 {font-family}
TOPICS 複数のフォントを指定する
TOPICS 日本語フォントを指定する場合
3 すべての文字の色を変える
TOPICS Webページの色指定
TOPICS Webセーフカラー
TOPICS 色の名前
4 一部分の文字の色を変える
TOPICS デザイン設定が重複した場合の優先度
5 一部分の文字を太くする
TOPICS 文字の太さの設定 {font-weight}
TOPICS 見出し部分の文字を細くする
TOPICS クラス名を使ったデザインの設定
6 文章の横幅を指定する
TOPICS 横幅の設定 {width}
7 コンテンツをページの中央に配置する
TOPICS コンテンツの配置位置を設定
TOPICS 文章の行揃えの設定 {text-align}
8 文章中心のコンテンツページを作る
9 行の間隔を広くする
TOPICS 行間の設定 {line-height}
10 改行をコントロールする
TOPICS Webページの改行パターン
TOPICS 一覧/リストの書き方
HISTORY COLUMN WebページをHTMLで作る理由
Chapter 3 背景と罫線のデザイン
1 ページの背景に色を付ける
TOPICS 背景色の設定 {background-color}
TOPICS 文章が読みづらくなる背景と文字の色の組み合わせ
2 コンテンツの背景に色を付ける
TOPICS コンテンツまわりの余白の設定 {padding}
TOPICS コンテンツの横幅と背景色の表示範囲
TOPICS 文字の背景に色を付ける
3 コンテンツを罫線で囲む
TOPICS トップページで使っている色
TOPICS 罫線の設定 {border-style} {border-width} {border-color}
4 見出しをバーのようにデザインする
TOPICS 罫線のデザインを辺ごとに設定
5 コンテンツを区切る線を入れる
TOPICS 区切り線のデザイン設定
HISTORY COLUMN ブラウザ戦争の勃発
Chapter 4 リンクの作成
1 ページとページをリンクで結ぶ
TOPICS リンク先のページの指定方法
2 メール送信用のリンクを作る
3 リンクの色を変える
4 カーソルを重ねたときのリンクの色を指定する
TOPICS リンクのデザイン設定
TOPICS すべてのリンク状態に共通するデザインを設定したい場合
5 一部分のリンクの色を変える
6 リンク部分の下線を消す
TOPICS 文字の装飾の設定 {text-decoration}
7 トップページに戻るリンクを用意する
TOPICS Webページの関係とリンク設定
8 ページ内のコンテンツにリンクを張る
TOPICS 他のページからコンテンツにリンクを張る
HISTORY COLUMN 使わない方がよいHTML
Chapter 5 画像のデザイン
1 画像作りに必要なものを用意する
TOPICS フリーウェアとシェアウェア
2 Webページに画像を表示する
TOPICS JPEGの圧縮設定
TOPICS imgのaltの設定
TOPICS imgのwidthとheightの設定
TOPICS Webページで使える画像フォーマット
3 画像を丸く切り出す
TOPICS カラーコンバータ
TOPICS widthとheightによる画像の拡大・縮小
4 文章の中に画像をレイアウトする
TOPICS 回り込みの設定 {float}
TOPICS 回り込みの解除 {clear}
TOPICS コンテンツまわりの余白の設定 {margin}と{padding}
5 行頭にマークを付ける
TOPICS 画像とテキストの揃え方の設定 {vertical-align}
6 タイトル画像を作成する
TOPICS 背景色を変更する
7 背景に画像を表示する
TOPICS ビューシートで画像を一覧
TOPICS 背景画像の表示設定 {background-image}
TOPICS パワーアップ用のグラフィックソフト
Chapter 6 テーブルとフォームのデザイン
1 テーブルを作る
TOPICS テーブルの表示
TOPICS テーブルの罫線の表示
2 セル内のテキストと罫線の間隔
TOPICS セル内の余白の大きさを設定 {padding}
3 セル内のテキストの行揃え
TOPICS セル内のテキストの行揃え {text-align}
4 テーブルの大きさを指定する
TOPICS テーブルの横幅と高さ
TOPICS テーブルまわりの余白
5 セルの背景色を指定する
TOPICS テーブルの背景
TOPICS セルの間の余白の大きさ
TOPICS tableタグのオプションとスタイルシート
6 複数行にまたがるセルを作る
TOPICS 複数行にまたがるセルの表示
7 テーブルの罫線をアレンジする
TOPICS テーブルの罫線のデザイン
8 セル内のテキストの縦方向の表示位置
TOPICS 縦方向の表示位置の設定 {vertical-align}
9 コメント送信用のフォームを作る
TOPICS フォームデータの送信方法
TOPICS テキスト入力欄の種類
TOPICS チェックボックスとラジオボタン
TOPICS プルダウン
10 フォームのデザインをアレンジする
HISTORY COLUMN スタイルシートの登場
Chapter 7 ページを公開する
1 Webページの公開に必要なものを用意する
2 Webページのデータをサーバーに置く
TOPICS その他のファイル操作
TOPICS ミラーリングアップロード
TOPICS サーバー側のデータを削除する
TOPICS ミラー設定
TOPICS CaptainFTP(OS XにおけるフリーFTPソフト)
Chapter 8 パワーアップアレンジ
1 ページの左にメニューバーを入れる
2 ページの上にバーを入れる
TOPICS コンテンツ部分もテーブルに含めてデザインした場合
3 バーを画面いっぱいに表示する
TOPICS 左側のバーを画面いっぱいに表示する
4 スクロールバーの色を指定する
TOPICS スクロールバーのデザイン
TOPICS コンテンツ部分のスクロールバー
5 表示位置を指定してレイアウトする
TOPICS もうひとつの表示位置の指定方法
6 リンク先を別ウィンドウで表示する
TOPICS リンク先を常に新しいウィンドウで表示する
TOPICS リンク先の表示場所をまとめて指定する
TOPICS 別ウィンドウのサイズを指定する場合
7 ページの左側にフレームでバーを入れる
TOPICS フレームの枠のデザイン
TOPICS フレームのサイズを固定する
8 ページの上にフレームでバーを入れる
TOPICS フレームの分割方法
9 デザインの設定を共有する
TOPICS 複数のデザイン設定ファイルを読み込む
TOPICS デザイン設定の優先順位
HTML索引
スタイルシート索引
キーワード索引
© E BISUCOM TECH LAB. All rights reserved.