HTML/Tags をテンプレートにして作成

開始行:
*HTML Basic Tags [[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]] ~ ***CONTENTS #contents2_1 ~ **基本要素 ***html HTML文書において基点となる要素 (トップレベル要素) で、ル... ~ ***head ブラウザーに対する指定と文書に関するメタ情報など、付加的... ~ ***body HTML文書の内容を表す要素で、文書の内容となるテキストや画... ~ ***title ブラウザーのタイトルバーやページのタブに表示される文書の... ~ ***meta HTML文書の文字コードや概要、キーワードなど、文書における... -charaset 属性 charaset = "文字コード" -name 属性 name = "情報の種類" -http-equiv 属性 http-equiv = "情報の種類" -content 属性 content = "情報" ・・具体的な情報を記載します。 -以下例 < meta charset="UTF-8" > < meta name="viewport" content="width=device-width, init... < meta name="description" content="説明文" > < meta name="keywords" content="キーワード, キーワード, ... ~ ~ **セクション HTMLでは、文書の骨格構造をしっかりと整理することが必要で... 以下、文書構造に関わる要素です。 ~ ***div（division） ページのレイアウトブロックにあたるもの、すなわちバックグ... ~ ***header ページまたはセクションのヘッダ領域を定義。 ページタイトル、サブタイトル、ロゴなどを書くエリアです。 ~ ***footer ページまたはセクションのフッタ領域を定義。 コピーライト、関連リンク、サイト名などを書くエリアです。 ~ ***nav（navigation） ナビゲーションリンクの定義。サイト内リンクをグループ化し... 一般に以下のような書き方になります。 <nav> <ul> <li><a href="#">項目1</a></li> <li><a href="#">項目2</a></li> <li><a href="#">項目3</a></li> </ul> </nav> ~ ***main ドキュメントやアプリケーションのbody 要素(body)の主な内容... ~ ***article 独立した記事・コンテンツとして成立しうる内容をくくる要素... 記事のタイトルとして<h1>要素を含めることが推奨されていま... 例えばWordPressの標準的なテーマでは、articleはひとつの投... ~ ***section 章や節や項のように、見出しとそれに関する内容を階層構造(ア... 各セクションには<h1>要素を見出しとして含めることが推奨さ... //レイアウト目的では使用しないのが原則です。レイアウト目... ~ ***aside サイドバーに置くものなど、メインコンテンツ外のセクション... ~ ***補足：articleとsection articleやsectionは、どちらが上位でどちらが下位・・という... -articleの中にsectionがある → ◯ -articleの中にarticleがある → △（例外：記事中に他の記事を... -sectionの中にarticleがある → ◯ -sectionの中にsectionがある → ◯ ~ ***補足：ブロックとインライン 以前、HTML要素には''ブロックレベル要素''と''インライン要... -''デフォルトスタイル：ブロック'' 「箱」として扱われるスタイルで''その幅は親要素の幅に従い... 参考：デフォルトでブロックとなる < li > をインラインで扱... li { display : inline; }; -''デフォルトスタイル：インライン'' 「文字列」と同等に順次横方向に並ぶように置かれるスタイル... 参考：[[ブロックとインライン>Google: ブロックとインライン]] ~ ~ **各種要素タグ 以下、頻繁に利用されるHTMLタグ（上で紹介したセクション関... ~ ***A｜リンクの設定 このタグに囲まれた内容がリンクのボタンになります。 a : Anchor <a href="Sample.html" target="_blank">サンプルページへ</a> -href属性には以下のような設定ができます --他のサイトへのリンク　href = "http://www.kyusan-u.ac.jp" --サイト内の他のページへのリンク　href = "gallery.html" --ページ内のラベルへのリンク　href = "#ID名" →　<section ... --ファイルへのリンク　href = "sample.zip" ← ダウンロード... --メールの宛先を指定してメールソフトを起動　href = "mailt... -target属性には以下のものがあります --_self：自分自身のウィンドウを上書きして表示します（デフ... --_blank：新規のウィンドウを開いて、そこに表示します。 ~ ***AUDIO｜オーディオ 音声・音楽ファイルの再生に用います。 <audio src="sounds/sample1.wav" controls></audio> 属性　src ソース　autoplay 自動再生　loop ループ再生　 　　　controls コントロールバー　など 使えるデータ形式　WAV、MP3、Ogg Vorbis、AAC など ~ ***BR｜改行 改行を入れたいときに使います。 br : Break <br> 　　　※XHTMLの場合は <br /> と表記するのが正解です。 ~ ***BUTTON｜ボタン ブラウザ仕様のボタンの表示に使います。 <a href="###"><button>お問い合わせ</button></a> ~ ***CANVAS｜キャンバス Webページにビットマップイメージを描画するときに使います。 <canvas id="sample" width="640 height="480"></canvas> 実際の描画は、id をフックとして JavaScript で記述します。 ~ ***DL/DT/DD｜説明リスト（定義リスト） dl : description list（説明リスト） dt : description term（説明される言葉） dd : description, definition（説明、定義） <dl> <dt>AA</dt> <dd>美術学科・・</dd> <dt>AD</dt> <dd>デザイン学科・・</dd> <dt>AP</dt> <dd>写真映像学科・・</dd> </dl> ~ ***EMBED｜埋め込み Flashのようなコンテンツを埋め込む際に使います。終了タグは... <embed src="Sample.swf" width="200" height="100" autoplay> 属性　src ソース　width="480" 表示幅　など 　　　EMBED を使うとAUDIOやVIDEOで再生できない形式のメデ... 　　　再生できる場合があります。万能です。 ~ ***FORM｜フォーム 入力・送信フォームを作成する際に使用します。 <form action="(送信時の動作｜CGIやJavaScript関数)"> <input type="text" name="NAME"></div> <input type="submit" value="送信"> </form> 部品には、以下のタグがあります。 -INPUT｜入力 type= の部分を変更するだけで、様々な入力受付が可能です。 type="text" 1行テキストボックス type="password" パスワード入力ボックス type="checkbox" チェックボックス（複数選択可能） type="radio" ラジオボタン（排他的選択） type="file"　送信ファイルの選択（[参照]ボタンが表示され... type="submit" 送信ボタン type="reset"　リセットボタン type="button"　汎用ボタン type="image"　画像のボタン -SELECT&OPTION｜選択 以下のように使います <select name="color"> <option value="R">RED</option> <option value="G">GREEN</option> <option value="B">BLUE</option> </select> -TEXTAREA｜テキストエリア 以下のように使います <textarea name="message" rows="4" cols="40">ここに記入し... </textarea> ~ ''付記'' 問い合わせやアンケートなどの Form はHTMLの技術のみでは実... <form action="example.php" method="post" > 　　 ： <input type="submit" value="送信する"> </form> -action属性：どのようなプログラムを動かすか（どこへ送るか） -method属性：get / post --get：データベースにキーワードを送って検索結果を取り出す... --post：メッセージの書き込み投稿、新規データの登録など・・ ''付記２'' 以下のフォームは、Google検索を活用するコードで、実際に動... <form action="http://www.google.com/search" method="get"> <label >Google: </label> <input type="search" name="q"> </form> ~ ***H*｜見出し h1～h6の６種類、見出しとして使用されます。 h : Heading <h1>大見出し</h1> 一般的には、このタグで囲まれた文字は本文より大きな太字で、 上下に1行分のスペースがとられます。 ~ ***HR｜水平線 水平の罫線を表示します。 hr : Horizontal Rule <hr> ~ ***IFRAME｜インラインフレーム HTML文書内に別のHTML文書を入れ子で配置するためのものです。 <iframe src="imageGallery01.html"></iframe> ただし、他人のサイトを自分のサイトの情報であるかのように... YouTubeが提供する動画の埋め込みコードは ＜iframe＞が利用... ~ ***IMG｜画像の配置 画像を表示させる場合に使用します。終了タグは無しです。 img : Image <img src="sample.gif" alt="香椎駅" width="200" height="1... -属性 --src：画像データファイルのURL --alt：代換え文字 --width：幅 --height：高さ -画像として使える形式 JPEG、GIF、PNG、SVG((SVGファイルを... ~ ***MAP｜イメージマップ 画像内の特定のエリアに対してリンクを設定する際に使用しま... <img src="sample.gif" usemap="#sample"> <map name="sample"> <area shape="rect" coords="20,10,120,80" href="01.ht... <area shape="circle" coords="200,100,40" href="02.ht... <area shape="poly" coords="400,100,500,100,500,200,4... <area shape="default" href="00.html"> </map> 参考：イメージマップのコードを生成するツール HTML Imagemap Generator：https://labs.d-s-b.jp/ImagemapGe... ~ ***OL/LI｜リスト olタグとliタグで番号付きリストを作成できます。 ol : Ordered List　/　li : List <ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol> ~ ***P｜段落 pタグは段落を指定します。複数の行が含まれる領域になります。 p : Paragraph <p>段落を指定します</p> ~ ***PRE｜整形済みテキスト 半角スペースや改行をそのまま表示する際に使用します。 CSSのソースコードなどをそのまま表示する場合は<code>も併用... pre：preformatted text <pre><code>body{color:red};</code></pre> ~ ***RUBY｜ルビ かつてはI.E.のみでしたが、最近では大半のブラウザが対応し... <ruby> 漢字<rt>かんじ</rt> </ruby> ~ ***SPAN｜文字列属性 spanタグは、まとまった文字列に対して何らかの属性を定義す... <span>インライン要素として扱われます</span> ~ ***SVG｜ベクターグラフィックスの描画 SVG形式の図形を、以下のように直接記述することができます。 <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-... </svg> Illustrator のようなベクター系のソフトを使うと、.svg 形式... ~ ***TABLE｜表 表を作成するタグです。tableタグは全体、trタグは行、tdタグ... <table> <tr> <td>データ</td> <td>データ</td> </tr> </table> しっかり構造化するには以下のように、thead ＞ tfoot ＞ tbo... <table border="1" rules="all"> <thead> <tr> <th>商品</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <td>合計金額</td> <td>250円</td> </tr> </tfoot> <tbody> <tr> <td>鉛筆</td> <td>150円</td> </tr> <tr> <td>消しゴム</td> <td>100円</td> </tr> </tbody> </table> 　 セルの横方向の結合は、以下のように colspan を追記します。 表の１行目では、横３つのセルが１つのセルに結合表示されま... <table border="1" rules="all"> <tr> <td colspan="3">一覧</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> 　 セルの縦方向の結合は、同様に以下のような書き方になります。 表の１列目では、縦３つのセルが１つに結合表示されます。 <table border="1" rules="all"> <tr> <td rowspan="3">一覧</td> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </table> 　 表の罫線その他についてですが、HTML5では、ビジュアルに関す... ~ ***UL/LI｜リスト ulタグとliタグでリストを作成できます。デフォルトでは黒丸... ul : Unordered List　/　li : List <ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul> ~ ***VIDEO｜ビデオ 動画ファイルの再生に用います。 <video src="movies/sample1.ogv" autoplay></video> 属性　src="URL" ソース　width="480" 表示幅　controls コ... 　　　autoplay 自動再生　 loop ループ再生　muted 消音　 　　　poster=”画像データのURL” ポスター画像 使える形式　MP4、WebM、Ogv など video 要素（audio要素も）でメディアの URI を指定する際、... #t=[starttime][,endtime] 時間は秒数 (浮動小数点数) または、時/分/秒をコロン区切り... 例えば、2時間5分1秒は 2:05:01 。以下に例を示します。 <video src="http://example.com/video.ogv#t=10,20"・・・ ~ ***<!--　-->｜コメント コメントを記述するためのものです。ブラウザ上には表示され... <!-- この部分は表示されません --> とりあえず、以上、基本的なタグの意味が理解できていればOK... 実際には、各タグに詳細な属性情報を付加することができます。 以下にHTMLタグリファレンスが掲載されたサイトをご紹介しま... 詳細は、そちらを参考にしてみて下さい。 現実の仕事では、オーサリングソフトがタグの記述を支援ある... -[[Google: HTML タグ 一覧]] ~ ~ **文字参照 HTMLの中に直接書くと、タグや特殊記号として処理されて、そ... 文字実体参照　表示　備考 &quot; " quotation mark 引用符 &amp; & ampersand アンド記号 &apos; ' apostrophe アポストロフィ &lt; < less-than sign 不等号(小なり) &gt; > greater-than sign 不等号(大なり) &copy © copyright コピーライト 尚 &lt; という文字そのものを説明のために表示したい場合は、 &記号自体を、&amp; と表記します。 よって、以下のように記載すると表示されます。 &amp;lt; ~ ~ ''補足：IEでHTML5を正しく認識させる方法について'' &color(red){この問題は現在ほぼ解消されました。記事は参考... 独自路線色の強かった少し前のI.E.（InternetExplorer）ではH... -html5shivの導入 IE8以前のブラウザにHTML5のタグを認識させるためのライブラ... Download > http://code.google.com/p/html5shiv/ --1) ダウンロード・解凍して html5shiv.js を見つけて下さい。 --2) ファイルを適当な場所に置いて下さい 　（ここではドキュメントルートにjsフォルダを作って置きま... --3) HTMLの<head>内に以下のコードを記述して下さい。 <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> HTMLの記述としては、単なる注釈扱いになりますが、IEのみが... 「もしもIEのバージョンがv9未満だったならば、スクリプトを... ~ -IE9.jsの導入 IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入しま... 以下のソースコードをHTML内に書くだけです。 <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/versio... <![endif]--> この情報のオリジナルは以下にあります。随時、最新の情報を... http://code.google.com/p/ie7-js/ //DLするファイル名には ie7 の表記がありますが、解凍すると... //Download > http://code.google.com/p/ie7-js/ //--1) ダウンロード・解凍して IE9.js というファイルを見つ... //--2) ファイルを適当な場所に置いて下さい //　（ここではドキュメントルートにjsフォルダを作って置き... //--3) HTMLの<head>内に以下のコードを記述して下さい。 // <!--[if lt IE 9]> // <script src="js/ie9.js"></script> // <![endif]--> -以下、比較してみて下さい。当然ですが、IE8以前のブラウザ... --[[普通にHTML5で作ったもの>https://design.kyusan-u.ac.jp... --[[上2つを実装したもの>https://design.kyusan-u.ac.jp/Sam... ~ ~

終了行:
*HTML Basic Tags [[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]] ~ ***CONTENTS #contents2_1 ~ **基本要素 ***html HTML文書において基点となる要素 (トップレベル要素) で、ル... ~ ***head ブラウザーに対する指定と文書に関するメタ情報など、付加的... ~ ***body HTML文書の内容を表す要素で、文書の内容となるテキストや画... ~ ***title ブラウザーのタイトルバーやページのタブに表示される文書の... ~ ***meta HTML文書の文字コードや概要、キーワードなど、文書における... -charaset 属性 charaset = "文字コード" -name 属性 name = "情報の種類" -http-equiv 属性 http-equiv = "情報の種類" -content 属性 content = "情報" ・・具体的な情報を記載します。 -以下例 < meta charset="UTF-8" > < meta name="viewport" content="width=device-width, init... < meta name="description" content="説明文" > < meta name="keywords" content="キーワード, キーワード, ... ~ ~ **セクション HTMLでは、文書の骨格構造をしっかりと整理することが必要で... 以下、文書構造に関わる要素です。 ~ ***div（division） ページのレイアウトブロックにあたるもの、すなわちバックグ... ~ ***header ページまたはセクションのヘッダ領域を定義。 ページタイトル、サブタイトル、ロゴなどを書くエリアです。 ~ ***footer ページまたはセクションのフッタ領域を定義。 コピーライト、関連リンク、サイト名などを書くエリアです。 ~ ***nav（navigation） ナビゲーションリンクの定義。サイト内リンクをグループ化し... 一般に以下のような書き方になります。 <nav> <ul> <li><a href="#">項目1</a></li> <li><a href="#">項目2</a></li> <li><a href="#">項目3</a></li> </ul> </nav> ~ ***main ドキュメントやアプリケーションのbody 要素(body)の主な内容... ~ ***article 独立した記事・コンテンツとして成立しうる内容をくくる要素... 記事のタイトルとして<h1>要素を含めることが推奨されていま... 例えばWordPressの標準的なテーマでは、articleはひとつの投... ~ ***section 章や節や項のように、見出しとそれに関する内容を階層構造(ア... 各セクションには<h1>要素を見出しとして含めることが推奨さ... //レイアウト目的では使用しないのが原則です。レイアウト目... ~ ***aside サイドバーに置くものなど、メインコンテンツ外のセクション... ~ ***補足：articleとsection articleやsectionは、どちらが上位でどちらが下位・・という... -articleの中にsectionがある → ◯ -articleの中にarticleがある → △（例外：記事中に他の記事を... -sectionの中にarticleがある → ◯ -sectionの中にsectionがある → ◯ ~ ***補足：ブロックとインライン 以前、HTML要素には''ブロックレベル要素''と''インライン要... -''デフォルトスタイル：ブロック'' 「箱」として扱われるスタイルで''その幅は親要素の幅に従い... 参考：デフォルトでブロックとなる < li > をインラインで扱... li { display : inline; }; -''デフォルトスタイル：インライン'' 「文字列」と同等に順次横方向に並ぶように置かれるスタイル... 参考：[[ブロックとインライン>Google: ブロックとインライン]] ~ ~ **各種要素タグ 以下、頻繁に利用されるHTMLタグ（上で紹介したセクション関... ~ ***A｜リンクの設定 このタグに囲まれた内容がリンクのボタンになります。 a : Anchor <a href="Sample.html" target="_blank">サンプルページへ</a> -href属性には以下のような設定ができます --他のサイトへのリンク　href = "http://www.kyusan-u.ac.jp" --サイト内の他のページへのリンク　href = "gallery.html" --ページ内のラベルへのリンク　href = "#ID名" →　<section ... --ファイルへのリンク　href = "sample.zip" ← ダウンロード... --メールの宛先を指定してメールソフトを起動　href = "mailt... -target属性には以下のものがあります --_self：自分自身のウィンドウを上書きして表示します（デフ... --_blank：新規のウィンドウを開いて、そこに表示します。 ~ ***AUDIO｜オーディオ 音声・音楽ファイルの再生に用います。 <audio src="sounds/sample1.wav" controls></audio> 属性　src ソース　autoplay 自動再生　loop ループ再生　 　　　controls コントロールバー　など 使えるデータ形式　WAV、MP3、Ogg Vorbis、AAC など ~ ***BR｜改行 改行を入れたいときに使います。 br : Break <br> 　　　※XHTMLの場合は <br /> と表記するのが正解です。 ~ ***BUTTON｜ボタン ブラウザ仕様のボタンの表示に使います。 <a href="###"><button>お問い合わせ</button></a> ~ ***CANVAS｜キャンバス Webページにビットマップイメージを描画するときに使います。 <canvas id="sample" width="640 height="480"></canvas> 実際の描画は、id をフックとして JavaScript で記述します。 ~ ***DL/DT/DD｜説明リスト（定義リスト） dl : description list（説明リスト） dt : description term（説明される言葉） dd : description, definition（説明、定義） <dl> <dt>AA</dt> <dd>美術学科・・</dd> <dt>AD</dt> <dd>デザイン学科・・</dd> <dt>AP</dt> <dd>写真映像学科・・</dd> </dl> ~ ***EMBED｜埋め込み Flashのようなコンテンツを埋め込む際に使います。終了タグは... <embed src="Sample.swf" width="200" height="100" autoplay> 属性　src ソース　width="480" 表示幅　など 　　　EMBED を使うとAUDIOやVIDEOで再生できない形式のメデ... 　　　再生できる場合があります。万能です。 ~ ***FORM｜フォーム 入力・送信フォームを作成する際に使用します。 <form action="(送信時の動作｜CGIやJavaScript関数)"> <input type="text" name="NAME"></div> <input type="submit" value="送信"> </form> 部品には、以下のタグがあります。 -INPUT｜入力 type= の部分を変更するだけで、様々な入力受付が可能です。 type="text" 1行テキストボックス type="password" パスワード入力ボックス type="checkbox" チェックボックス（複数選択可能） type="radio" ラジオボタン（排他的選択） type="file"　送信ファイルの選択（[参照]ボタンが表示され... type="submit" 送信ボタン type="reset"　リセットボタン type="button"　汎用ボタン type="image"　画像のボタン -SELECT&OPTION｜選択 以下のように使います <select name="color"> <option value="R">RED</option> <option value="G">GREEN</option> <option value="B">BLUE</option> </select> -TEXTAREA｜テキストエリア 以下のように使います <textarea name="message" rows="4" cols="40">ここに記入し... </textarea> ~ ''付記'' 問い合わせやアンケートなどの Form はHTMLの技術のみでは実... <form action="example.php" method="post" > 　　 ： <input type="submit" value="送信する"> </form> -action属性：どのようなプログラムを動かすか（どこへ送るか） -method属性：get / post --get：データベースにキーワードを送って検索結果を取り出す... --post：メッセージの書き込み投稿、新規データの登録など・・ ''付記２'' 以下のフォームは、Google検索を活用するコードで、実際に動... <form action="http://www.google.com/search" method="get"> <label >Google: </label> <input type="search" name="q"> </form> ~ ***H*｜見出し h1～h6の６種類、見出しとして使用されます。 h : Heading <h1>大見出し</h1> 一般的には、このタグで囲まれた文字は本文より大きな太字で、 上下に1行分のスペースがとられます。 ~ ***HR｜水平線 水平の罫線を表示します。 hr : Horizontal Rule <hr> ~ ***IFRAME｜インラインフレーム HTML文書内に別のHTML文書を入れ子で配置するためのものです。 <iframe src="imageGallery01.html"></iframe> ただし、他人のサイトを自分のサイトの情報であるかのように... YouTubeが提供する動画の埋め込みコードは ＜iframe＞が利用... ~ ***IMG｜画像の配置 画像を表示させる場合に使用します。終了タグは無しです。 img : Image <img src="sample.gif" alt="香椎駅" width="200" height="1... -属性 --src：画像データファイルのURL --alt：代換え文字 --width：幅 --height：高さ -画像として使える形式 JPEG、GIF、PNG、SVG((SVGファイルを... ~ ***MAP｜イメージマップ 画像内の特定のエリアに対してリンクを設定する際に使用しま... <img src="sample.gif" usemap="#sample"> <map name="sample"> <area shape="rect" coords="20,10,120,80" href="01.ht... <area shape="circle" coords="200,100,40" href="02.ht... <area shape="poly" coords="400,100,500,100,500,200,4... <area shape="default" href="00.html"> </map> 参考：イメージマップのコードを生成するツール HTML Imagemap Generator：https://labs.d-s-b.jp/ImagemapGe... ~ ***OL/LI｜リスト olタグとliタグで番号付きリストを作成できます。 ol : Ordered List　/　li : List <ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol> ~ ***P｜段落 pタグは段落を指定します。複数の行が含まれる領域になります。 p : Paragraph <p>段落を指定します</p> ~ ***PRE｜整形済みテキスト 半角スペースや改行をそのまま表示する際に使用します。 CSSのソースコードなどをそのまま表示する場合は<code>も併用... pre：preformatted text <pre><code>body{color:red};</code></pre> ~ ***RUBY｜ルビ かつてはI.E.のみでしたが、最近では大半のブラウザが対応し... <ruby> 漢字<rt>かんじ</rt> </ruby> ~ ***SPAN｜文字列属性 spanタグは、まとまった文字列に対して何らかの属性を定義す... <span>インライン要素として扱われます</span> ~ ***SVG｜ベクターグラフィックスの描画 SVG形式の図形を、以下のように直接記述することができます。 <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-... </svg> Illustrator のようなベクター系のソフトを使うと、.svg 形式... ~ ***TABLE｜表 表を作成するタグです。tableタグは全体、trタグは行、tdタグ... <table> <tr> <td>データ</td> <td>データ</td> </tr> </table> しっかり構造化するには以下のように、thead ＞ tfoot ＞ tbo... <table border="1" rules="all"> <thead> <tr> <th>商品</th> <th>価格</th> </tr> </thead> <tfoot> <tr> <td>合計金額</td> <td>250円</td> </tr> </tfoot> <tbody> <tr> <td>鉛筆</td> <td>150円</td> </tr> <tr> <td>消しゴム</td> <td>100円</td> </tr> </tbody> </table> 　 セルの横方向の結合は、以下のように colspan を追記します。 表の１行目では、横３つのセルが１つのセルに結合表示されま... <table border="1" rules="all"> <tr> <td colspan="3">一覧</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> 　 セルの縦方向の結合は、同様に以下のような書き方になります。 表の１列目では、縦３つのセルが１つに結合表示されます。 <table border="1" rules="all"> <tr> <td rowspan="3">一覧</td> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </table> 　 表の罫線その他についてですが、HTML5では、ビジュアルに関す... ~ ***UL/LI｜リスト ulタグとliタグでリストを作成できます。デフォルトでは黒丸... ul : Unordered List　/　li : List <ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul> ~ ***VIDEO｜ビデオ 動画ファイルの再生に用います。 <video src="movies/sample1.ogv" autoplay></video> 属性　src="URL" ソース　width="480" 表示幅　controls コ... 　　　autoplay 自動再生　 loop ループ再生　muted 消音　 　　　poster=”画像データのURL” ポスター画像 使える形式　MP4、WebM、Ogv など video 要素（audio要素も）でメディアの URI を指定する際、... #t=[starttime][,endtime] 時間は秒数 (浮動小数点数) または、時/分/秒をコロン区切り... 例えば、2時間5分1秒は 2:05:01 。以下に例を示します。 <video src="http://example.com/video.ogv#t=10,20"・・・ ~ ***<!--　-->｜コメント コメントを記述するためのものです。ブラウザ上には表示され... <!-- この部分は表示されません --> とりあえず、以上、基本的なタグの意味が理解できていればOK... 実際には、各タグに詳細な属性情報を付加することができます。 以下にHTMLタグリファレンスが掲載されたサイトをご紹介しま... 詳細は、そちらを参考にしてみて下さい。 現実の仕事では、オーサリングソフトがタグの記述を支援ある... -[[Google: HTML タグ 一覧]] ~ ~ **文字参照 HTMLの中に直接書くと、タグや特殊記号として処理されて、そ... 文字実体参照　表示　備考 &quot; " quotation mark 引用符 &amp; & ampersand アンド記号 &apos; ' apostrophe アポストロフィ &lt; < less-than sign 不等号(小なり) &gt; > greater-than sign 不等号(大なり) &copy © copyright コピーライト 尚 &lt; という文字そのものを説明のために表示したい場合は、 &記号自体を、&amp; と表記します。 よって、以下のように記載すると表示されます。 &amp;lt; ~ ~ ''補足：IEでHTML5を正しく認識させる方法について'' &color(red){この問題は現在ほぼ解消されました。記事は参考... 独自路線色の強かった少し前のI.E.（InternetExplorer）ではH... -html5shivの導入 IE8以前のブラウザにHTML5のタグを認識させるためのライブラ... Download > http://code.google.com/p/html5shiv/ --1) ダウンロード・解凍して html5shiv.js を見つけて下さい。 --2) ファイルを適当な場所に置いて下さい 　（ここではドキュメントルートにjsフォルダを作って置きま... --3) HTMLの<head>内に以下のコードを記述して下さい。 <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> HTMLの記述としては、単なる注釈扱いになりますが、IEのみが... 「もしもIEのバージョンがv9未満だったならば、スクリプトを... ~ -IE9.jsの導入 IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入しま... 以下のソースコードをHTML内に書くだけです。 <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/versio... <![endif]--> この情報のオリジナルは以下にあります。随時、最新の情報を... http://code.google.com/p/ie7-js/ //DLするファイル名には ie7 の表記がありますが、解凍すると... //Download > http://code.google.com/p/ie7-js/ //--1) ダウンロード・解凍して IE9.js というファイルを見つ... //--2) ファイルを適当な場所に置いて下さい //　（ここではドキュメントルートにjsフォルダを作って置き... //--3) HTMLの<head>内に以下のコードを記述して下さい。 // <!--[if lt IE 9]> // <script src="js/ie9.js"></script> // <![endif]--> -以下、比較してみて下さい。当然ですが、IE8以前のブラウザ... --[[普通にHTML5で作ったもの>https://design.kyusan-u.ac.jp... --[[上2つを実装したもの>https://design.kyusan-u.ac.jp/Sam... ~ ~

ページ名: