Htmlタグ辞典EX


【Menu】

Html

<!DOCTYPE~>

<html>


色見本

カラーリファレンス


Head系

タイトルをつける

文字コードを示す

制作者・内容紹介・キーワードを入れる

スタイルシートやスクリプトの言語を示す

基準URLを設定する

自動的にページを読み込む


Body系

全体の文字を設定

全体の背景色

全体の背景画像


文字系

文字サイズと文字色

文字の基本サイズを指定

コメントアウト

連絡先を示す

強調する

出典(参照先)を示す

略語を表す

追加したことを示す

削除したことを示す

プログラム関連のテキストを示す

ルビをふる

テキストのスタイルを指定する

特殊文字


見出し・段落

見出しをつける

段落をつける

改行させる

センタリング

行揃えを指定する

空白や改行を表示させる

横罫線を入れる

マーク付リストを作る

番号付リストを作る

用語と説明のリストを作る


画像系

画像を張る

画像とテキスト位置関係1

画像とテキスト位置関係2


リンク系

リンクを張る

特定の位置にリンクする

リンク部分の文字色を指定

リンクした画像の枠

イメージマップを指定

リンクでメールソフトを起動


テーブル系

表の基本形

表にタイトルをつける

表の大きさを指定する

セルの大きさを指定する

セルを連結する

セルの間隔を指定する

セルの枠と内容の間隔を指定する

セル内で縦横の位置を指定する

セル内で改行を禁止する

セル内で背景色を指定する

表やセルの背景画像を指定する

表をセンタリングする

表にテキストを回り込ませる

表の回り込みを解除する

表と回り込ませたテキストの間隔を指定する


フォーム系

フォームを作る

送信ボタンを作る

リセットボタンを作る

ボタンを作る

画像でボタンを作る

1行の入力フィールドを作る

複数行の入力フィールドを作る

パスワードの入力フィールドを作る

非表示のフィールドを作る

ラジオボタンを作る

チェックボックスを作る

メニューを作る

メニューの選択肢をグループ化する

リストボックスを作る

ファイルの選択機能を付ける

項目をグループ化する

フォームの内容がメールで届くようにする


フレーム系

フレーム全体の構造を指定する

フレーム表示方法を指定する

フレーム枠の表示・非表示

フレーム枠を消す

フレーム非対応用の内容を作る

フレームターゲットを指定する

インラインフレームを設置する


はじめてのホームページCSSガイドEXPHPを学ぼう! [HOME]

 

[Html] [色見本] [Head系] [Body系] [文字系] [見出し・段落] [画像系] [リンク系] [テーブル系] [フォーム系] [フレーム系]

 

◆フレーム全体の構造を指定する

【ソース】
<frameset rows="高さ">~</frameset>
<frameset cols="">~</frameset>
<frameset src="URL" name="フレーム名">~</frameset>
 
【説明】
フレーム機能を利用すると、ウィンドウを区切ってそれぞれのHTML 文章を表示させることができます。
フレームを区切るには frameset 要素で指定します。


【基本的な分割例】

分割例1

横に3分割したフレームの表示です。

[ソース]
<frameset rows="高さA, 高さB, 高さC">
 <frame src="内容1.html">
 <frame src="内容2.html">
 <frame src="内容3.html">
</frameset>
ページの構成としては、フレームを表示させる為のページに上記のソースを書きます。
例えば、index,html の場合、index.html にアクセスすると fremeset の内容に従い 「内容.1html」、「内容.2html」、「内容.3html」のファイルを表示します。


分割例2 縦に3分割したフレームの表示です。

[ソース]
<frameset cols="幅A, 幅B, 幅C">
 <frame src="内容1.html">
 <frame src="内容2.html">
 <frame src="内容3.html">
</frameset>
横分割同様のページの構成となります。
縦に表示させたい時に使います。


分割例3

縦横に3分割したフレームの表示です。

[ソース]
<frameset rows="高さA, 高さB">
 <frame src="内容1.html">
 <frameset cols"幅A, 幅B">

  <frame src="内容2.html">
  <frame src="内容3.html">
 </frameset>
</frameset>
この表示は、2段の横表示をさせてから下段に縦表示(入れ子)をさせています。 フレーム表示としては、よく利用させるパターンです。
入れ子表示を工夫すると様々なパターンのフレームセットが作成できます。



frameset 要素は、対応していないブラウザもありますのでその場合には、対応していないブラウザ用の表示ファイルを考慮しなければなりません。
新しいHTML仕様では freamset は非推奨となっています。
 
【サンプル】
▼横に3分割したフレームの表示のソース
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム表示サンプル1</title>
</head>
<frameset rows="200, 200, *">
 <frame src="f_tile.html">
 <frame src="f_menu.html">
 <frame src="f_content.html">
</frameset>
<noframes>
<body>非フレーム対応の内容 </body>
</noframes>
</html>

サンプル表示1



▼縦に3分割したフレームの表示のソース
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム表示サンプル2</title>
</head>
<frameset cols="200, 200, *">
 <frame src="f_tile.html">
 <frame src="f_menu.html">
 <frame src="f_content.html">
</frameset>
<noframes>
<body>非フレーム対応の内容 </body>
</noframes>
</html>

サンプル表示2



▼縦横に3分割したフレームの表示のソース
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>フレーム表示サンプル3</title> </head>
<frameset rows="120, *">
 <frame src="f_tile.html">
 <frameset cols="200, *">
  <frame src="f_menu.html">
  <frame src="f_content.html">
 </frameset>
</frameset>
<noframes>
<body>非フレーム対応の内容 </body>
</noframes>
</html>

サンプル表示3


※サイズを指定する場合に "*" を利用することがあります。
"*" は、任意の数字を意味します。
 

 

 

 



▲UP

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | 初めてのプランター菜園 | リンク・ボード | 気のみ気のままなブログ
PHPを学ぼう! | CSSガイドEX | ホビ★コレ | 班長日記!

Copyright (C) ex-mode.net 2017 . All Rights Reserved.