ピンデザイナーのWebサイト構築技法

日ごろの仕事で「Webデザイナーになるには？」この言葉何回も聞くので、１Webデザイナー（自称）がお答えしようと思います。結構厳しいことを記述するかもしれませんが、その辺はご勘弁を。１考えだと思って参考程度にしてください。

学生からなろう〜！と考える場合

若いんだからなんでも出来る！勉強しようと思うんだったら。例え学校が専門分野出身じゃなくても。。
普段からデザインに興味を持ち…具体的には、Web雑誌で優秀だとされるWebサイトを閲覧してみる。時にはソースを確認してみる。
もしも、電車通学だったら駅のポスターをみる。そしてその写真などがどのように合成されているのか？配色はどうなのか？いろいろな観点でものを見る。雑誌だって、化粧品のポスターだっていい。身の周りには沢山教材が存在する。
とにかく、自分が就職したい！その仕事がしたいと思うんだったら、一歩を踏み出さなければ。私が小学校の頃、恩師に言われた言葉がある。
「千里の道も一歩から」この言葉、今も心に残るひとことです。

あと作品を作ること。作品なしで就職は無理です。資格は次。持っていて損はないけど。
その作品も、「自分の趣味」のサイトは好ましくない。出来れば他人のサイト。これが一番いいと思います。（文句いわれるから（笑））

たとえば就職先が不幸にもWeb関係じゃなかった↓と言う状況に陥る場合がある。（自分のしたい仕事につけるのは5%と言われている）就職している会社からは、「何も得ることが出来ない！」なんて考えてはいけない。必ず何か学べることがある。たとえば「人脈」。組織に所属するということは、必ず人と出会うからです。それを生かすも殺すも自分しだいだと思います。

私がWebやりだした頃は、通信講座なんてなかった。今はある。たとえば
ここ⇒デジタルハリウッド株式会社そういった学校で学んでも良い。学費は日々自分で稼いでいるのだから。

⇒続きを読む前にランキングチェックをお願いしますm(__)m

初級試験との違い

Webクリエイター能力認定試験「初級」はいかがでしたか？今度は上級を目指す方を対象に記述したいと思います。
やはり初級の問題が出来ないと、合格はありえません。20%は復習問題が出題されますので。サーティファイの認定基準に（以下サーティファイWebページより引用)

高度なタグおよび属性の知識を有し､HTMLファイルを自由に記述することができる｡またクライアントの意図を汲んでWebページをデザインし､作成することができる｡

というようになっていますが…。デザインは問題通りに記述を進めるのでどうか？と思われますが。いづれにしても、範囲とするタグは増えますし、きちんと理解していないと合格はありえません。

規定問題40分。但し、6問⇒10問。

自由問題80⇒120分。但し3HTML作成⇒CSSファイル修正含む7HTML

ここで一息いれましょう〜。
⇒今日のランキングチェックをお願いしますm(__)m

上級試験で追加されるもの

Webクリエイター能力試験上級では次の機能が追加されます。
1.フレーム機能
2.CSS
3.tableのセルの結合
4.メディアファイルの挿入
5.フォーム
6.イメージマップ
こんなに追加されるのです。でも考え方によっては。。。「これだけしかない」と考えることも出来ます。（笑）
やばいです。ランキングがた↓落ちです。
⇒みなさんの一票をお願いしますm(__)m
次は…それぞれのポイントを解説します。

やはり道具ですか？

道具ばかりに頼るのはよくないことですが、最低のツールはそろえましょう。

	Web デザイナーの必須の画像処理ソフトです。写真の加工やイメージの作成をします。これがなければはっきりいってキツイです。 Photoshop CS2 Windows版 価格：税込み：￥92,370 Photoshop CS2 Windows版 アカデミック 価格：税込み：￥43,700
	Webでデザイナーを目指すわけでもないけど…。見栄えの良いページを作りたいならこのソフトで十分です。 Photoshop Elements 4.0 Windows版 税込み：￥13,970
	このソフトも出来れば、所持していたいものです。特に記号や絵を描きたいときPhotoshopよりも重宝します。ゆとりが出来てからでも良いです。 Illustrator CS2 Windows版 価格：税込み：￥83,470 Illustrator CS2 Windows版 アカデミック 価格：税込み：￥30,700
	まとめて買ってしまえ！と思う方に！Creative Suite 2 Standard windows版 価格：税込み：￥162,435 ・Photoshop CS 2 ・Illustrator CS2 ・InDesign CS2 ・Bridge ・Stock Photos ・Version Cue CS2が同梱 Creative Suite 2 Premium Windows版 Education版 価格：税込み：￥76,900 Photoshop CS 2・Illustrator CS2・InDesign CS2・Golive CS2・Acrobat 7.0 Pro・Bridge・Stock Photos・Version Cue CS2が同梱
	ActionScript（プログラム）でアニメーションを制御し自由な表現をしたいのならばProfessionalを選択しましょう。 Flash Professional 8 価格：税込み：￥78,700 Flash8 Professional エデュケーション版 税込み：￥29,700
	Ｗｅｂサイトに「動き」を与えるインパクトを与えるなら、Scripｔを使わないで画像を動かすならばこれにしましょう。細かい動きはこのソフトです。 Flash 8 Basic 価格：税込み：￥23,700
	複雑な動きもテンプレートから設定することにより手軽にアニメーションが作成できる。パワーポイントのように設定して、お手軽にサイトに動きをつけるならこれにしましょう。 FlashMaker 3 for Windows 価格：税込み：￥10,370
	もっとお手軽にサイトにアニメーションを挿入したいならこれです。 eプライスシーズ FlashMaker スリムパッケージ版 価格：税込み：￥3,470
	Ｗｅｂデザイナーなら絶対に必要なレイアウトソフト。今のところこれにかなうレイアウトソフトはありませんよ！ＣＳＳの機能が強化されました。 Dreamweaver 8 価格：税込み：￥46,935
	Flash Professional 8 、Flash 8 Video Encoder、Dreamweaver 8、Fireworks 8 、Contribute 3、FlashPaper 2が含まれてWebページ作成の必須ソフトが全てそろったお買い得品。明日からＷｅｂ制作が始められます。 価格：Studio 8 税込み：￥122,850
エデュケーション版、Education版、アカデミック等の表示があるものは、学生割引のことです。別途証明書が必要です。 詳細は⇒こちら なお、職業訓練校に在籍中ならば、証明書が発行することが出き、学生割引ソフトを購入することが出来ます。 注意しなければならないのはアカデミック・エデュケーション版、Education版などは、バージョンＵＰができません。 リンク先のPCDEPOTでは、10,500円(税込)を超えるお買い物につきましては日本全国送料無料となります。 ※御購入金額に関わらず代引き手数料は無料です。

試験の最終チェックポイント

最も試験に大切？ここさえ押さえればというポイントをまとめてみます。

もっとも配点が高いのは、そう<table>なんです。30点はこれだと思います。テーブルが苦手な方もう一度復習しましょう。絶対出来るテーブル作成技はすでにこのブログで紹介しましたよ！

<table> <tr> <td></td><td></td> </tr> </table>

テーブルの基本構造

予想される問題は、
1．キャプション（テーブルの見出し）を作成しなさい。
2．セルの文字位置を左によせなさい。
3．この行に色をつけなさい。
4．セルに画像を挿入しなさい。
以上です。タグが思い浮かばなかったら要注意ですよ！

次にリンクです。アンカーポイントを作成して…というやつです。
<a name="xxxx">飛び先</a>
<a href="bbbb.htm#xxxx">呼び出し側</a>

もうひとつ…画像の挿入です。

<img src="xxxx.jpg" border="0">

このborder="0"をつけることにより画像の周りの青い線を消すことが出来ます。問題には指定がないが、記述しないと「見本と違う」と言うことで減点-1になってしまいます。

「自由問題」でフォルダーの名前を受験番号下三桁にしなさいとか、「ページタイトルを受験番号全角で設定しなさい。」という問題が出題されます。よく問題を読みましょうね！練習のとき飛ばして問題をこなしていませんでしたか？
それでは、ご健闘をお祈りいたします。

⇒毎日のランキングチェックをお願いしますm(__)m

さて、「規定問題」が出来るようになったら「自由」問題です。
実際の試験では「80分」です。（テキストエディター使用）問題はだいたい3つＨＴＭＬを作成します。規定問題との大きな違いは最初から自分で作成する（何もないところから）というところです。
絶対合格の目安は、問題を３０分以内で完了させることです。残りは見直し時間。。。

時間短縮、15点ＵＰの虎の巻

はっきり言って、Webクリエイター能力試験は「時間」との戦いです。ほとんどこれの問題で不合格。自由問題と規定問題両方とも６０点を超えないと不合格です。（片方がたとえ100点でも）
まずは、これを見てください。

そうです。ＨＴＭＬの基本構造ですね！。こいつを頭の中へいれてください。少々強引な方法ですが、テキストエディターで１０回書いてください。それでも頭に入らなかったら…。広告の裏でも鉛筆で（笑）書いてください。これが覚えられないと次へは進めません。
ここで…あれ！と思う方がいらっしゃると思います。そうmetaタグとかDOCTYPE宣言がない！これは試験には必要なし。減点にもならない！なので余計なことは、覚えないほうがいいです。

減点にならない手抜き

試験は時間との戦いですから、余計なことはしません。生徒の試験の結果をみるとやってなくても大丈夫そうです。
画像の挿入サイズは指定がない限りWidth,hightは指定しなくても良い。示できればＯＫです。
次にこれは必殺です。（笑）
1問目の問題が解き終わって次のＨＴＭＬを作成する時最初からやらないこと！です。
そう！残りの問題は複製して修正をしてしまうのです。
たとえばＨＴＭＬ3問作成するならば、残り2問は複製して名前を、問題文のＨＴＭＬファイル名に変更しておけば良いのです。
すると、少なくても15点はＧＥＴ出来てしまうのです。（もしかしたらもっとかも？）基本構造書いただけでも、5点ゲットできます。
ページの背景画像とかテキスト、リンクテキスト、訪問済みテキストなどのbodyタグの要素はほぼ同じですから。この技は有効です。
もしも2問しか解けなかったとしても、この方法さえ実行していれば、絶対合格です。
⇒今日のランキングチェックをお願いしますm(__)m

ショッピングカート開発

学習方法

まずテキストのサンプルというか「問題」をひとつずつメモ帳で入力して「タグ」の使用方法を確認していきます。ここでの学習のポイントは、「入力」してブラウザで「プレビュー」してみる。ということです。テキストを読むだけでは、身になりません。この入力と言う作業が大変大事になります。
テキストには問題の上に「タグ」の使用方法がついています。試験の時なんとうれしいことに、「リファレンス本」（カンニング本）が配布されます。記述方法がほぼ同じです。なので、慣れてしまえば…。使ったことがないタグが試験に出題されたとしても、なんとかなります。およそ１５時間ぐらいを目安としてください。

規定問題の虎の巻

練習問題が全て終わったら、模擬問題！！まずは規定問題に挑戦です。試験本番では「４０分」で完了しなければなりません。全部で問題集には４問ありますので、十分だと思います。
さて、一回目ですが、自信のある方は、何も見ないでトライしてください。危ないかも〜って感じる方は、テキストの本文を参照して問題を解いてください。
ここからが重要！次の模擬問題へは絶対いかないことです。
次の問題にトライするのは、時間にして３０分を切った時です。それまで、同じ問題であろうがやらなければ駄目です。
このWebクリエイター能力試験では、出題パターンがほぼ同じ。文章が変わっているだけだからです。
暗証できるぐらい問題をやってください。
教えている生徒（合格した）は大体平均で２０分ぐらいで完了しています。
Webクリエイター能力試験「規定」対策はこんなところです。規定問題がクリアできたら「自由問題」にチャレンジしましょう。ご健闘をお祈りいたします。
⇒ためになったらクリックをランキングチェック

準備するもの

何をするにも道具がなければ出来ません。（笑）最低の道具をそろえましょう！まずはwindows付属の「メモ帳」（テキストエディター）

Webページレイアウトソフト「DreamWeaver」やホームページビルダーなどのソフトは必要ありません。（きっぱり）そのソフト習得に時間がかかります。ソフト代金がかかります。FC2ブログ作るときに使用できますか？最初からこれに頼ってしまうと、上級合格への道も遠くなります。Webページレイアウトソフトはあくまでも生産性を上げるためのツールです。いきなりそういったツールを使わせるような、手法を取るのはただお金を使わせるという目的だけです。

次にテキスト。これは下記に紹介する問題集でいいでしょう。（と言うより一般に流通しているのは、この一冊だけ？）

Ｗｅｂクリエイター能力認定試験〈初級〉対策テキスト＆問題集 価格：3,600円 ⇒ご購入、詳細はこちら お仕事帰りでも本が買える！セブン-イレブン受取りができるセブンアンドワイ

Webクリエイター能力認定試験とは？

株式会社サーティファイが認定する資格で、Webページを制作するためのHTMLファイルのコーディング能力を有し､Webサイトを構築するための能力を認定します。初級と上級に試験が分かれています。上級では、ＣＳＳ、フレーム、フォームのついての問題が出題されます。（もちろん初級ではこの３つは試験範囲には含まれておりません）比較的にお金がかからず？取得できるのでおすすめの資格です。取得するなら今のうちですよ。

なぜならば、必ず数年のうちに、初級にもＣＳＳの問題が出題されるようになるはずです。というのは、試験はW3Cに基づく試験問題からかけ離れてしまっているからです。たとえばfontタグは今後なくなる予定ですから…。ということで取得したい方は、早めに。

このカテゴリーでは、この「Webクリエイター能力認定試験」以下（Webクリエイター能力試験と略す）の虎の巻き？試験合格のコツを伝授したいと思います。但し、今回は初級のみです。（笑）みなさんの反応を見てからにします。

⇒続きを読む前にランキングチェック

行間の設定(line-hightプロパティー)

テキストの行間を設定するには、line-hight
プロパティーを使用します。値には、%かptを指定しますが、行間にptを使用すると、ブラウザで文字サイズを変更した場合、テキストが重なってしまうことがあります。よって無難に%で指定しましょう。

みなさん昨日の夕飯覚えていますか？昨日の我が家はカキなべでした。最近の野菜の高騰の影響で入っている野菜の量がすくないです。

p{line-height:250%;}

ちなみに行間は150%位が読みやすいと一般的には言われています。目安の数字としておぼえておきましょう。

字間の調整(letter-spacingプロパティー)

テキストの字間を調整するのは、letter-spacingを指定します。値にはptを指定します。マイナス(-)を指定することも出来ます。（字間を詰めたい場合）

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。

p{letter-spacing:5px;}

行頭のインデントの調整(text-indentプロパティー)

テキストのインデントを調節するのは、text-indentを指定します。
全角スペースを挿入してしまいがちですが、本来は、text-indentプロパティーで指定するのが好ましいです。（W3C規定では、行頭の全角スペースは無視されるということです。）

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。このまま続くと…。

p{text-indent:25px;}

テキストの縦書き(writing-modeプロパティー)

テキストの縦書きを指定するのはwriting-modeプロパティーを使用します。値にはtb-rlを指定します。

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。

p{writing-mode:tb-rl;"}

ただし注意しなければならないことは、IEの5.5以上でないと表示指定が無効となります。

⇒今日はお疲れだけどがんばりました。
サイトご覧になったらクリックをm(__)m

こんなサイトでよかったら相互リンクしませんか？

フォントの色(colorプロパティー)

フォントの色を指定するときにはcolorプロパティーを使用します。何故か？font-colorじゃないんです。時々間違えて「あれー」となりますので注意が必要です。

色の指定です！

p{color:#ff0000;}

カラーコード

black #000000	blue #0000ff	lime #00ff00
red #ff0000	aqua #00ffff	yellow #ffff00
white #ffffff	gray #808080	silver #c0c0c0

値には、カラーコード(#000000)または、カラーの名前(black)どちらでもいいです。

⇒さてこのサイトのＦＣ２ブログランキングは？
サイトご覧になったらクリックをm(__)m

フォントスタイル(font-styleプロパティー)

フォントのスタイルを指定するときには、font-styleプロパティーを使用します。
標準フォント：normal　イタリック体：italic　斜体：oblique
ただし、何も指定しなくても「normal」が適用されるので、斜体やイタリック体にしたいときだけ指定しましょう。

123ABCabcＡＢＣａｂｃあいう

p{font-style: italic;}

フォントの大きさ(font-sizeプロパティー)

フォントの大きさを指定するには、font-sizeプロパティーを使用します。値には、「%」（１００％を標準とする）と「px」です。まだまだ指定方法がありますがこの２つをまず覚えてください。

フォントサイズ24PXです。

p{font-size:24px;}

ここで読者の皆様…ブログでは…スタイルシートの変更でスタイルをいちいち定義しなければいけないのか？と疑問がわいているかもしれません。局部的にスタイルを適用させるには、こう書きます。

昨日の夕飯はなんでしたか？うちはカレーでしたよ〜

< p style="{font-size:13px;}">昨日の夕飯はなんでしたか？うちはカレーでしたよ〜</p>

⇒このサイトのＦＣ２ブログランキングは？
今日から長いお休みです。金にならん(T_T)

　

絶対必要！！タグ辞典・リファレンス

「タグ辞典」スペル忘れの時に重宝する。特にブログ作成しているときあれ？って思ったりしたときです。（笑）最近はＣＳＳとＨＴＭＬが一緒になっていてとても便利です。 ただし、注意することは、あくまでも辞典なので（英語の辞書を思い出してください。）学習用には向いていません。一から学習するならば他の本をおススメします。

⇒続きを読む前に気になるＦＣ２ブログランキングは？
あなたの一票が管理人をやる気にさせます。

おススメ度：★★★★☆ 出版社:翔泳社 価格:1,575円（税込） 昔からずっとある（笑）タグ辞典。例題も沢山ありサンプルはダウンロードできる。ＨＴＭＬタグ辞典	おススメ度：★★★☆☆ 出版社:技術評論社 価格:1,869円（税込） ＨＴＭＬとＣＳＳ両方記述されているのでお得感はあります。内容的には少し難かも。最新実用ＨＴＭＬタグ辞典

おススメ度★★★★★ 出版社:秀和システム 価格:1,890円（税込） HTML と CSS の中級者向けリファレンス。W3C 勧告の内容を正確に伝えるというのが解説方針だそうです。ブラウザの対応状況も記述してあります。ただし売れきれ状態が続いています。機会をうかがって購入しましょう！使いやすい辞典です。 詳解ＨＴＭＬ ＆ ＸＨＴＭＬ ＆ ＣＳＳ辞典

おススメ度★★☆☆☆ 出版社:MDNコーポレーション 価格:2,310円（税込） HTML と CSS の中級者？上級向けリファレンス。コンパクトで持ちやすい。大変すばらしいデザインそして内容ですが、どちらかといえば実務的。初級者にはおススメできません。２冊目にしましょう。 ＨＴＭＬ ＆ ＣＳＳビジュアル・リファレンス

boople.comにリンクしています。

本を買わなくても買っても

⇒ブログランキングwをお願いします。

Web作成のための必要なもの

このカテゴリーは「Webについてもっともっと勉強したい！けど…、必要な本とか必要なソフトだとか開発環境は？どうしたら」と思う人のカテゴリーです。
紹介している物は、実際に自分で購入したもの、これから購入予定なもの、欲しいけど…予算が。。自分にとってはもう必要ないけれど最初は…というものです。是非参考にしてくださいね！

ＦＣ２ブログランキングに参加しています。
⇒楽しみだったらここをクリックあなたの一票が管理人をやる気にさせます。

動きます動きます！

お堅い話ばっかりで…というみなさまに！今日は面白いお遊びをしたいと思います。
このカテゴリーでは、JavaScriptとFlashでお遊びプログラムを紹介していきたいと思っています。
第一回目は、別ウインドウを開きそのウインドウを左から右に移動してみます。
ここをクリックしてみて
そして、別ウインドウが開いたら…移動ボタンを押してください。
ブラウザに「セキュリティー保護のため…オプションを表紙するには。。。。」というメッセージが出ることがあるので、その場合は、「ブロックされているコンテンツを許可」を選んでください。
もう一度実行したい場合は、ブラウザの「再読み込み」ボタンを押してください。

ＦＣ２ブログランキングがんばってま〜す
⇒面白かったらここをクリック

background-repeat:repeat-xのサンプル

background-repeat:repeat;を記述すると、（または、何も繰り返しを指定しないとrepeatとなる)横（Ｘ軸）方向と（Ｙ軸）方向に背景画像が繰り返され、ページの背景すべてに敷き詰められる。これをタイリングという。
サンプルはＸ軸方向に繰り返す場合の指定である。
ここをクリックすると別ウィンドウで表示します。
また表示された別ウインドウ上で、マウス「右クリック」⇒「ソースを表示」でＣＳＳをみることができるので参照のこと。
そうだ！忘れていました。背景画像はこれを使っています。

⇒このサイトのＦＣ２ブログランキングは？
為になったらクリックをm(__)m

(background-repeat,background-position,background-attachmentプロパティー)

背景画像の繰り返し

background-repeatプロパティー。

repeat	繰り返し
repeat-x	横方向繰り返し
repeat-y	縦方向繰り返し
no-repeat	１回だけ表示

背景画像の表示位置を指定

background-positionプロパティー。

縦方向の値	top center bottom
横方向の値	left center right

background-position:right bottom;

右下に配置

横方向の位置と縦方向の位置を各１つだけ配置する。ただし順番はどちらでもよい。もちろん、片方の指定だけも可。

背景画像の繰り返し

background-attachmentプロパティー。

scroll	スクロールにあわせて移動
fixed	スクロールにあわせないで固定

⇒このサイトのＦＣ２ブログランキングは？
応援ありがとうございますm(__)mおかげ様で…

背景色(background-colorプロパティー）

要素の背景色を指定するにはbackground-colorプロパティーを指定する。
値はカラーコード（#RGB値）やカラーの名前(red,white,blackなど)を指定する。
カラーコード、カラーの名前については、別サイトを検索して！。（笑）

body {background-color:#ffccff;}

body {background-color:#red;}

背景画像(background-imageプロパティー）

要素の背景画像を指定するにはbackground-imageプロパティーを指定する。
値はurl("パス（フォルダー名）/画像ファイル名")を指定する。
ここで気をつけて記述しなければいけないのは、値の書き方である。
urlを書き忘れることが多い。

body {background-image:url("images/back.gif");}

今日もがんばってる？
このサイトのＦＣ２ブログランキングは？
m(__)m

ＣＳＳの位置づけ

CSS(Cascading Style Sheet)カスケーディングスタイルシートは、ページの装飾をコントロールするものである。
ＨＴＭＬやスタイルシートの規定を作成しているＷ３Ｃによれば「ＨＴＭＬは、文書構造を示す言語であり、視覚系の項目とは切り離すべきだ」という考えを打ち出している。

定義方法

要素名{プロパティー値:値；}という形で指定する。

body{font-size 12pt;}

文書全体のフォントサイズを12ptとする。

最後に「；」をつけているが、本来なら、ひとつのプロパティー値の宣言のみでは必要がない。しかし、後から追加することがあるので、「癖」としてつけておいたほうが無難でしょう。

このサイトのＦＣ２ブログランキングは？m(__)m

改行タグ（<br>）

文書内の位置で改行するには、<br>タグを使用する。通常は前の行密着した形で改行される。

彼は朝寝坊をしてしまった。だけど、彼は、 「電車が遅れたので遅刻しました」 と言った。

<p>彼は朝寝坊をしてしまった。だけど彼は、<br>「電車が遅れたので遅刻しました」<br>と言った。</p>

強調タグ（<strong>・<em>）

文書内で特定の文字列を強調するには、<strong>タグを使用する。囲んだ文字列は太字で表示される。<em>は通常の強調であるが、囲んだ文字列は、斜体となる。 「見た目だけ太字」にしたいのならばCSSのfont-weightを利用することが好ましい。（ＨＴＭＬ文書上で強調したい言葉の場合<strong>タグを使用する）

重要なことは社会人になってからも遅刻をする癖がついてしまうかも知れないということである。

<p>重要なことは<strong>社会人になってからも遅刻をする癖</strong>がついてしまうかも知れないということである。</p>

上付き・下付きタグ（<sup>・<sub>）

10の3乗：103	<p>10の3乗：10<sup>3</sup></p>
硫酸の化学式：H2SO4	<p>硫酸の化学式：H<sub>2</sub>SO<sub>4</sub></p>

広告：HP Compaq Business Notebook nx9005

HTML4.01では、下記タグは「非推奨」もしくは、「CSSによる設定を推奨」としている。なので、使用はなるべく避けたいものだ。

タグ	内容
<b>	テキストを太字にする。
<i>	テキストを斜体にする。
<u>	テキストに下線を引く。
<s>	テキストに取り消し線を引く。
<tt>	テキストを等幅フォントにする。
<font>	テキストのサイズや色。大きさを指定する。
<basefont>	そのWebページテキストすべての指定（デフォルト値）

CSS（カスケーディングスタイルシート）とはwebページの装飾をコントロールするものである。
たとえば、文字サイズ、文字間隔、フォントの種類など。

画像の挿入(<img>）タグ

<img src="画像ファイル名">

<img src="画像ファイル名">で表示することが出来る。正確にはファイル名には、パス/画像ファイル名である。同一フォルダーに作成するＨＴＭＬと画像が一緒であれば「パス」を書く必要はない。

なおWebで使用できる画像形式はＧＩＦ（.gif)、ＪＰＥＧ（.jpg)、ＰＮＧ（.png）である。
Windowsのペイントで作成した絵は、規定だと.BMPの拡張子になるので、注意が必要である。

画像のサイズ指定

属性として画像の幅や高さを指定することができる。それにより自由な大きさで画像を挿入することが出来る。
<img src="パス/画像ファイル名" width="幅" height="高さ">

width="100" height="20"指定	width="20" height="50"指定

サイズをＨＴＭＬで画像を強制的に大きくしたり、小さくしたりすると、画像がゆがんだりします。また、表示サイズを小さくしても、ファイルサイズはかわりません。
画像処理ソフトで、ジャストサイズに加工して挿入するようにしましょう。
ちなみに例題の元画像は、127ピクセルＸ86ピクセルです。

代替テキスト

<img src="パス/画像ファイル名" alt="説明文">
画像の表示できないブラウザではこの「説明文」がテキストや音声などで代替表現される。
また、マウスカーソルが、画像の上に乗った時、その説明文が表示される。
文頭の例題の写真にマウスカーソルを乗せてみてください。
「今年の年賀状案」と表示されると思います。
といって、長い説明文を記入すると、混乱のもとになるので簡潔に！！。

広告：シーサイドネット。レンタルサーバーが格安月780円〜。私のお客さんすべてこのサーバーです。

表<table>タグ、結構苦手意識をもっている方が多いと思いますが、わかった！といわれるまで解説したいと思っています。

<th>はヘッダセル（見出しセル）と呼ばれ、<td>はデータセル（普通のセル）を指定するタグである。
横一列を<tr>で、全体を<table>で囲む形で記述する。
普通は、<td>の内容は、普通の太さで左揃え、<th>は、中央、太字で表示される。

商品 価格 ハンバーグサンド 200円 牛乳パン 120円 ミニクロワッサン 30円

<table border="1"> <tr>   <th>商品</th><th>価格</th> <tr>   <td>ハンバーグサンド</td><td>200円</td> </tr> <tr>   <td>牛乳パン</td><td>120円</td> </tr> <tr>   <td>ミニクロワッサン</td><td>30円</td> </tr> </table>

上記に例題とＨＴＭＬソースを記述しました。
これに沿って説明しよう！
まずは何も考えない！！で
下記のようにコードを書く。これをテーブル基本構造として考える。

<table border="1">
<tr>
  <td></td>
</tr>
</table>

次に完成の表をみる。
横方向→のセルは…２つ。<td></td>のセットが合計２つ。
縦方向↓のセルは…４つ。</tr>のセットが合計４つ。
と解釈する。

次に縦方向のセル（＜ｔｒ＞〜＜／ｔｒ＞）を追加する。
<tr>から</tr>までコピーして張り付ける。

<table border="1">
<tr>-----------------------ここから
  <td></td><td></td>
</tr>----------------------ここまでコピー

<tr>
  <td></td><td></td>
</tr>

<tr>
  <td></td><td></td>
</tr>
<tr>

<tr>
  <td></td><td></td>
</tr>

</table>

そして<td></td>の間
すなわち<td>牛乳ぱん</td>のように文字を入力すれば完成です。

リスト（項目）（<ul>)

テキストをリストとして定義するには、<ul>を使用する。ただし順番が関係のない項目を作る場合である。

好きな異性のタイプ ・優しい人 ・一緒にいて楽しい人 ・外見が自分の好み

<p>好きな異性のタイプ</p> <ul> <li>優しい人</li> <li>一緒にいて楽しい人</li> <li>外見が自分の好み</li> </ul>

リスト（番号付項目）（<ol>)

項目に順番がある場合は、この<ol>を使用します。

当店の売れ筋BEST 3 1.ハンバーグサンド 2.牛乳パン 3.ミニクロワッサン

<p>当店の売れ筋BEST3</p> <ol> <li>ハンバーグサンド</li> <li>牛乳パン</li> <li>ミニクロワッサン</li></ol>

メモ帳を起動して、簡単なWebページを作成します。
「スタート」→「すべてのプログラム」→「アクセサリー」→「メモ帳」でメモ帳を起動します。
そして以下のようにＨＴＭＬを書いていきます。すべて英数半角でお願いします。

備考：タグは大文字でも小文字でもどちらでも可です。

まずは、ＨＴＭＬ基本構造の入力です。




説明を動画でもご覧いただけます。動画はこちらです。別サイトへ飛びます。

現在のWeb制作では、構造と装飾を分離すること求められている。

見出し(<h1>〜<h6>タグ)

テキストを見出しとして定義するためには<h1>〜<h6>の６段階の「タグ」を使う。
<h1>が最も大きく、<h6>が最も小さく表示される。
通常このタグを使うと前後に空白が自動挿入が行われる。

下記は<h4>