【Dreamweaver】テキスト編ショートカットキー
【見出しタグ】h1〜h6
デザインビューで対象の文字をドラッグで選び、commandキー（WinならCtrlキー）＋数字キー（1〜6）
【段落タグ】p
デザインビューでEnterキー。そのままテキスト打つこと可。
【改行タグ】br
Shiftキー＋Enterキー
（コードビュー・デザインビューどちらでも可）
【強調タグ】em
対象の文字をドラッグで選び、commandキー（WinならCtrlキー）＋Iキー
（コードビュー・デザインビューどちらでも可）
【より強調タグ】strong
対象の文字をドラッグで選び、commandキー（WinならCtrlキー）＋Bキー
（コードビュー・デザインビューどちらでも可）
【Dreamweaver】サイトの管理
∇サイトの管理（Dreamweaverで作業するファイルを登録する作業）
・メニュバーのサイトからサイトの管理
・ファイルパネルからサイトの管理
上記2つの方法でサイトの管理ダイアログボックスが開く
新規サイトボタンをクリック
サイト設定ダイアログボックスが開く
サイト名：名前をつける
ローカルサイトフォルダー：右側アイコンから使用するフォルダを選ぶ。
サイト設定ダイアログボックスの保存ボタンをクリック
サイト管理ダイアログボックスの完了ボタンをクリック
ファイルパネルに作ったサイトが入っていればOK。
最初に作業・編集するフォルダを登録してあげると効率よく作業ができる。
よくつかうHTMLタグ
∇【∇divタグ】div（ブロックレベル）
タグとしての意味は持たない。
CSSでデザインを設定するために領域を作成するタグでブロックレベル要素のタグ。
すべてのHTMLタグを囲めるタグがこのdivタグ。
使い方は自由で、このdivタグの使い方次第で複雑なデザインのコーディングが可能になる。
例）
<div id="header>
<h1>HTMLよく使う基本タグ編</h1>
<h2>見出しタグ：h1〜h6</h2>
</div>
<div id="nav">
<ul>
<li>ホーム</li>
<li>更新情報</li>
</ul>
</div>
<div class="post">
<p>記事の投稿です。</p>
</div>
<div class="post">
<p>記事の投稿です。</p>
</div>
※divタグには属性でidやclassが使われます。これは目印だと思って下さい。ここにつけた名称をCSS作成の際に使用します。
∇【spanタグ】span（インライン要素）
タグとして意味は持たない。
CSSでデザインを設定するために領域を作成するタグでインライン要素のタグ。
ブロックレベル内でCSSを設定したい場合に挿入します。
例）
<div class="post">
<p>記事の投稿です。<span>この部分だけに別でCSSを設定する</span></p>
</div>
<div class="post">
<p>spanタグは<span class="sample">そのままで設定したり</span>classをつけたりします。</p>
</div>
∇【表組みタグ】table、tr、th、td
表組みのタグ。会員名簿やコース一覧など表の作成に使用。
レイアウトでの使用はNG。
例）
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
∇【リンクタグ】a（インライン要素）
別ページのリンクやメーラー起動などに使用。
例）
ページのリンク
<a href="sample.html">リンクはこちら</a>
<a href="sample.html">HPはこちら</a>
メーラーのたち上げ
<a href="sample.html">お問い合わせメールはこちら</a>
よくつかうHTMLタグ１
∇【見出しタグ】h1〜h6（ブッロクレベル）
文章の大見出し、中見出し、小見出し
h1が一番大きな見出し、通常１ページに１回使用します。
※このタグは検索エンジン対策に有効なタグ。
例）
<h1>HTMLよく使う基本タグ編</h1>
<h2>見出しタグ：h1〜h6</h2>
∇【段落タグ】p（ブロックレベル）
通常の文章は段落のタグを使用する。
例）
<h1>HTMLよく使う基本タグ編</h1>
<h2>見出しタグ：h1〜h6</h2>
<p>見出しタグはh1が大見出しで1Pに1回使用する。このタグは検索エンジン対策に有効なタグ。</p>
<p>段落タグは文章の段落として使う。</p>
∇【改行タグ】br（インライン要素）
文章の改行に使用。しかしWebサイトではユーザーが文字サイズを自由に変更できるため、自動改行に任せてむやみに改行しない方が読みやすくなる。
例）
<h1>HTMLよく使う基本タグ編</h1>
<h2>見出しタグ：h1〜h6</h2>
<p>見出しタグはh1が大見出しで1Pに1回使用する。<br/>このタグは検索エンジン対策に有効なタグ。</p>
<p>段落タグは文章の段落として使う。</p>
<p>改行タグは文章の改行に一度に1回使う。</br>２段あけたいからと言って連続して使用したり画像を縦になレベルなどしてはいけない。<p>
∇【箇条書きリストタグ】ul、li（ulがブロックレベル）
項目タグ。
ナビゲーションや更新情報やバナーリストなど要素をグループ化する際に使う。
例）
<ul>
<li>ホーム</li>
<li>更新情報</li>
<li>会社概要</li>
</ul>
∇【番号付きリストタグ】ol、li（ulがブロックレベル）
リストに番号をつける際に使うタグ。
例）
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
∇【定義リストタグ】dl、dt、dd（dlがブロックレベル）
定義リストのタグ。
リストと同じ役割だが、見出しと説明の２つに分けることができる。
用語集や更新情報などでよく使用する。
例）
<dl>
<dt>リストタグ</dt>
<dd>ナビゲーションや更新情報やバナーリストなどで使用</dd>
<dt>定義リストタグ</dt>
<dd>用語集や更新情報などで使用</dd>
</dl>
HTML基本的な書き方２
∇名前空間（xmlns）と言語コード（xml:lang）(lang)を指定する。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR?xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3org/1999/xhtml"xml:lang+"ja"lang="ja">
<head>
<title>Webサイトのタイトル</title>
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
XHTMLはXMLという言語に基づいて作られてる。XMLでは自由に独自のマークアップ言語を設計できるが、Web上で情報共有するときに、同じタグ名が異なる意味で使用され衝突する可能性がある。そのため名前空間（xmlns）はWeb上でタグの「意味」を明確に定義するもの。
言語コードはHTMLで使用している言語を明示するもの。
∇<head>タグの開始タグと終了タグの内側に、MIMEタイプと文字コードを指定する。
<meta http-equiv="content=type"content="text/html;charset=UTF-8"/>
<meta>タグは、ページの性質や管理情報などのWebサイト自体の情報であるメタデータを指定するためのタグ。
この記述は、文字コードを指定している。文字コードとは、文字や記号をコンピューターで扱うために、文字や記号一つ一つに割り当てられた固有の数字のことを言う。日本語の文字コードは、UTF-8,Shift_JIS、EUC-JPなどが利用されている。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR?xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3org/1999/xhtml"xml:lang+"ja"lang="ja">
<head>
<meta http-equiv="content=type"content="text/html;charset=UTF-8"/>
<title>Webサイトのタイトル</title>
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
<meta>タグでは、著作者やキーワード、ページの内容を簡単にまとめた説明文等の情報を記述することもできる。
＊説明文
<meta name="description"content="HTMLの基本的な書き方についてのページです。”/>
＊キーワード
<meta name="keywords"content="HTML,Web,CSS,基本的な書き方”/>
目安として10前後でキーワードの設定をする。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR?xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3org/1999/xhtml"xml:lang+"ja"lang="ja">
<head>
<meta http-equiv="content=type"content="text/html;charset=UTF-8"/>
<meta name="description"content="HTMLの基本的な書き方についてのページです。”/>
<meta name="keywords"content="HTML,Web,CSS,基本的な書き方”/>
<title>Webサイトのタイトル</title>
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
HTMLの基本的な書き方１
HTMLでは<>で囲まれた「タグ」を使って、マークアップしていく。
マークアップとは「印をつける（意味づけをする）こと」
Webページで公開をする情報がどんな種類の情報なのかを印をつけていく。
∇情報がHTML情報であることをマークアップする。
<html>
情報
</html>
このように情報の最初に開始タグ、情報の終わりに終了タグ（/がつくタグ）をマークアップする。
∇Webブラウザの画面に表示させる部分と、それ以外のWebサイト自体の情報（例えばWebサイトのタイトルなど）を書く部分に区分けする。
<html>
<head>
Webサイト自体の情報
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
∇Webサイトのタイトル部分は<title>タグで囲む。
<html>
<head>
<title>Webサイトのタイトル</title>
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
＊囲む中身の多い場合は上下、少ない場合は左右で囲む場合が多い。
∇DOCTYPE宣言で「私はどの種類のどのバージョン(X)HTMLでHTMLを記述します」という宣言する。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR?xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Webサイトのタイトル</title>
</head>
<body>
Webブラウザの画面に表示させる部分
</body>
</html>
HTMLの概要
HTMLはマークアップ言語の一つ。
Webページは「HTML（Hyper Text MarkUp Languge）」というコンピューター言語を使って作成する。
文書をWebページとしてWebブラウザに表示させるには、HTMLの「タグ」と呼ばれる特殊な文字列で文章を囲み、文章の構造を示す。これによりWebブラウザは文章を「文字のまとまり」ではなく「文章」として認識し、インターネット上でWebページとして表示されるようになる。
コンピューターにも人間にも扱いやすい言語にXHTMLがある。
文章構造としてXHTMLを、見栄えを指定するためにスタイルシートを使ってWebページを作成する。
スタイルシートとはCCS（Cascading Style Sheets）と呼ばれる言語を使ってWebページ上の「表示(見栄え)等のデザイン・レイアウト」を定義するための技術。
メモ帳やテキストエディタソフト、Dreamweaverなどで作成することできる。
