スケジュール

どうやって？
HTML基礎知識

HTML
タグについて

  • 最近の投稿

  • カテゴリー

  • sponsor link
    • コンタクトフォーム

    HTMLタグ・CSS

    HTMLタグとCSSの記述について

    「どうやって？」で紹介されたようにWebページは主にhtmlという言語とcssで記述されています。ここでは制作に必要な主なhtmlタグとそれに関連するcssについて紹介します。またこのページでは主に利用にそってタグを分類しています。

    ja.wikipedia.org/wiki/HyperText_Markup_Language

    ja.wikipedia.org/wiki/Cascading_Style_Sheets

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    01.文書・構造

    htmlでは全体の構造がある程度決められています。まずDOCTYPE宣言があり、その後htmlが開始され、その後HEADでページには表示されないタイトルや、スクリプト、スタイルシートなどの定義を行い、BODYでは表示されるコンテンツを記述します。

    HTMLバージョンのDOCTYPE宣言

    htmlには数種類のバージョンがあります。バージョンによりhtmlの意味や、cssの解釈法が少しずつ異なります。このタグはhtmlの一番先頭に記述され、そのhtmlがどのバージョンのhtmlであるかを宣言します。

    <!DOCTYPE HTML ……　>

    xhtml1.0の例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    参考：

    www.animegif.net/tips/html/doctype-html-public.html

    構造タグ

    構造タグは本文には表示されないhtmlそのもの構造を示します。

    HTML タグ内の記述がHTMLである事を示します。
    HEAD 内部情報を定義するヘッドを定義します。後述のMETAタグやTITLEタグもこの中で定義します。リンクするファイルやページ内で使用するスタイルシート、JavaScript等もここに記述します。
    META METAタグはそのページの特徴を定義するためのタグです。文字コード、キーワードや概要を定義します。
    TITLE タイトルです。ブラウザのウィンドウのタイトル部分やブックマーク時の文字列となります。
    BODY 表示されるメインコンテンツ部分を記述するためのタグです。
    このタグの内側に記述された内容がブラウザウィンドウに表示されます。

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    02.見出し・段落

    htmlの構造を定義する「構造タグ」とはちがい、コンテンツ部分（見える部分）の構造を定義します。

    H1〜6 文書内での見出しです。強さに応じて1〜6があります。

    ブロック要素
    P 文書の段落です。ブロック要素なので、前後が改行されます。

    ブロック要素
    SPAN 文書の部分を範囲指定するタグです。文書内の文字や単語の色やスタイルを変えたり背景をつけたりするのに使います。インライン要素なので改行されずに前後の文字列とつながって表示されます。

    インライン要素
    DIV ページのコンテンツの構造を構築するためのタグです。
    ブロック要素なので単独で使う場合前後に改行が入ります。width、height、margin、padding、float(left,right)、clear、border、backgroundなどのCSS(スタイル)と組み合わせ、デザイン的工夫をするために様々に使用します。

    ブロック要素

    関連するスタイルシート

    width
    height    		 要素の幅と高さを指定します。ブロック要素に対して有効です。

    例

    .ex_class{
    width:80%;
    height:20px;
}
    margin
    padding    		 要素の外の余白と、内側の余白を指定します。ブロック要素に対して有効です。

    例

    .ex_class{
    margin:5px;/*要素の外側上下左右に5ピクセルの余白をもうけます。*/
    padding:10px 5px;/*要素の内側、上下に10ピクセル、左右に5ピクセルの余白*/
}
.ex_class2{
    margin:0 1px 2px 3px;
      /*要素の外側上に0、右に1px、下に2px、左に3pxの余白。
　　　　　　　　　　上から順に時計回り（右回り）に指定されます。*/
}
    border 要素の境界線を引きます。色、線のスタイル、線の太さ、角の半径が定義できます。

    例

    .ex_class{
    border:#f00 solid 1px;/*赤で1ピクセルの実戦を引きます*/
    border-radius:3px; /*半径3ピクセルで角を丸くします*/
}
    background 要素の背景を定義します。色、グラデーション、画像、画像の位置等を定義できます。（グラデーションはブラウザによっては表示できません）

    例

    .ex_class{
	background: #ffd520;
	background: -webkit-gradient(linear,left top, left bottom,
　　　　　　　color-stop(1.00, #ffd520), color-stop(0.00, #ffeda5));
	background: -webkit-linear-gradient(#ffeda5, #ffd520);
	background: -moz-linear-gradient(#ffeda5, #ffd520);
	background: -o-linear-gradient(#ffeda5, #ffd520);
	background: -ms-linear-gradient(#ffeda5, #ffd520);
	background: linear-gradient(#ffeda5, #ffd520);
}

    例

    このサイトのヘッダーの部分です。背景に画像を配置してセンタリングしてます。text-indentはフォアグラウンドの文字列を表示させないため大きい値をとってます。タイトルを画像にする応用テクニックです。

    #header {
	height:219px;
	background-color: #999;
	background:url(../img/header_title.png) center;
	text-indent:-3000px;
}
    float
    clear    		 要素を左右に寄せます。適用された要素は高さと幅が無くなり（中のコンテンツに幅がある場合それが入る幅になり、widthが設定されていればその幅は残る）、この後の要素は同じ高さに表示されます。後の要素が同じ方向にフロートされていれば回り込み、横に並ぶ事になります。また後の要素が反対の方向にフロートされている場合、左右に並びます。clearによりフロートが解除されます。解除のされかたはブラウザによって違う場合があるので注意が必要です。一度フロートをかけると他の要素に影響があるためコントロールが難しいため、慎重に使う必要があります。
    また最終的な全体の高さを取るためクリアフィックスと呼ばれるハッキングテクニックを使います。コンテナが増えますが個別にクリアを掛けながらコントロールせずなるべくクリアフィックスだけで制御する方針もあります。

    例

    <style>
div{
    border:5px solid #FC0;
    background:#FFFF00;
    margin:3px;
    width:100px;
    height:100px;
}
</style>
<div style="width:400px;height:400px">
    <div style="float:left;clear:right">2</div>
    <div style="float:left;clear:left;">1</div>
    <div style="float:right;clear:left;">3</div>
</div>

    クリアフィックスコードの例

    .clearfix {width:100%;}
.clearfix:after {
  content: " "; 
  display: block; 
  clear: both;
}

    フロート実験用参考コード

    jwu-web.i-elements.net/release/testFloat.html

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    03.テキスト

    テキスト関係のタグです。
    文中のテキストの見た目と意味を与えるためPREタグ以外はインライン要素です。
    見た目だけを変える場合は<span>にクラスをつけて修飾します。

    B
    STRONG    		 強調表示。STRONGは強意。
    I 斜体
    S ストライク。打ち消し線
    U アンダーライン
    TT タイプライターテキスト。等幅文字
    HR /

    水平線
    BR / 改行。htmlでは改行コードは空白と見なされるので改行する場合は改行のタグが必要です。
    PRE 
    プレフォーマッテッド。整形済みテキスト。
通常省略されるスペースやタブも書かれたまま表示されます。
プログラムのソースコード等を表示するために使われます。
このプレタグはソースコードである事を示すためボーダーと背景をつけてます。

    関連するスタイルシート

    line-height 行の高さ
    text-align 行揃え
    vertical-align 縦方向の揃え
    text-decoration テキストの下線・上線・打ち消し線など
    text-indent インデントの量
    letter-spacing
    word-spacing    		 文字、単語の間隔
    text-shadow 文字の影

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    04.コンテンツ埋め込み

    コンテンツの埋め込みに使います。最も良く使うタグはIMGです。

    IMG 画像（イメージ）を埋め込みます。埋め込む際にサイズや、画像の代わり（画像が表示できない場合）の代替え文字列(ALT)を指定する事が出来ます。画像の指定はURLを使います。URLはサイトからの絶対パス、サイトルートからの絶対パス、相対パスなど、主に3種類です。用途によって使い分けますが、通常は、サーバーや、配置される場所等、環境が変わってもパスが崩れないので望ましいのは相対パスの場合が多いです。
    代替え文字列(ALT)基本的には必ず設定してください。サイズを指定しておくと画像を読み終わる前にページのレイアウトが完成し、閲覧しやすくなるので読み込み時間のストレスを減らします。
    また、ディスプレイタイプはインラインブロックと言う、インラインとブロックの両方の特徴を持った特殊なものです。ブロック要素と同じように、幅や高さをもちますが、インラインと同じように、前後のコンテンツと横に並びます。”text-align”という属性があり、横に並ぶ時次ぎにやってくる要素がイメージのどの位置から横に並ぶか設定できます。TOPは上から、CENTERは中央、BOTTOMは下からです。

    例

    マーク　←埋め込み画像

    <!-- サイトからの絶対パス -->
<img src="http://jwu-web.i-elements.net/wp-content/themes/snow2/img/snow_small.png" />

<!-- サイトルートからの絶対パス -->
<img src="/wp-content/themes/snow2/img/snow_small.png" />

<!-- 相対パス -->
<img src="../wp-content/themes/snow2/img/snow_small.png" />

<!-- altとサイズを指定した場合 -->
<img src="../wp-content/themes/snow2/img/snow_small.png" 
　　　　　　　　　alt="マーク" width="32" height="32"  />

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    05.テーブル

    テーブルを描画します。外見はスタイルで制御します。rowspan、colspanをつける事でセルの結合が出来ますが複雑なのでドリームウィーバーの機能を活用します。

    TABLE テーブル本体です。
    TR テーブルの列です。
    TD テーブルのセルです。 

    <style type="text/css">
table{
	border-spacing:0;
}
	padding:10px;
	border-bottom:#999 dotted 1px;
	width:120px;
}
</style>
<table>
  <tr>
    <td>123</td>
    <td>456</td>
    <td>789</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>def</td>
    <td>ghi</td>
  </tr>
  <tr>
    <td>あいう</td>
    <td>かきく</td>
    <td>さしす</td>
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td rowspan="2">4-3</td>
  </tr>
  <tr>
    <td colspan="2">5-1</td>
  </tr>
</table>

    例

    jwu-web.i-elements.net/release/testTable.html

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    06.その他

    !– コメント – コメントです。<!– –>に囲まれた内側は表示されません。
    STYLE STYLEシートを記述します。URLで外部ファイルを指定したり、HTML内やタグの内側に記述する場合もあります。インラインスタイルを使用する場合、タグの属性として定義するのでこのタグは使いません。
    SCRIPT SCRIPTを記述します。URLで外部ファイルを指定したり、CSSのようにHTML内やタグの内側に記述する場合もあります。二つ目の例のように、ドキュメントの要素（この場合ボタン）にアクセスする場合、その要素の後に記述するか、ドキュメントすべてが読み込まれてから実行するように指定する必要があります。

    <script>
<!--
 alert("Hellow world.");
-->
</script>
    jqueryの場合
    <script>
<!--
$(function(){
	var bt = $('#buttonA');
	bt.click(function(){
		alert('CLICK!');
	});
});
-->
</script>
    jqueryを使ったJavascriptの例

    jwu-web.i-elements.net/release/testJs.html
    FORM
    IMPUT
    BUTTON
    SELECT
    OPTGROUP
    OPTION
    TEXTAREA    		 フォームタグ群。フォームは主にHTMLページがCGI等のサーバー側のプログラムとデータのやり取りをするために使われます。

    01.文書・構造02.見出し・段落03.テキスト04.コンテンツ埋め込み05.テーブル06.その他

    参考サイト

    HTML Tutorial – (HTML5 Compliant)
    www.w3schools.com/html/default.asp
    HTMLタグリファレンス
    www.htmq.com/html/indexm.shtml
    スタイルシートリファレンス
    www.htmq.com/style/index.shtml