|
私が知っているタグ系の知識全てを思いつく限り披露します。 HTMLでのページ作成の際、よほど複雑なことでもしない限り 多少のことしか知っていなくてもほとんど困りません。 HPビルダー等に頼らなくても、これから踏まえることと 今までの知識さえ工夫すれば、最低ライン以上のページは作れると思います。 |
タグの英文字は大文字で書いても小文字で書いてもどちらも効果は全く変わりません。
また、ファイルのエンコードがEUCでもS-JISでも表示は一緒(同じ)です。
１．＜blockquote＞引用＜/blockquote＞
本来、引用部分の強調の為の幅空けとなるが、
私はこれをボディーの最初に記述することにより、左右に余白をつける事として転用している。
部分的に幅を広げるなら、＜/blockquote＞で閉じなければならないが、
ページの最後まで続けるのなら閉じなくても表示的には問題ない。(記述的には間違いだが)
これを工夫すれば、テーブル幅などを決めなくても良いので便利。
ちなみに、blockquoteの記述前後は自動的に段落空けされる。
- ２．＜dd＞幅空け＜/dd＞
-
横の幅を空けてくれる。テーブル間で、ある行だけ右にずらしたいなどの場合に便利。
定義の説明の時として使う。DLタグやDTタグと併用します。
３．＜font size="？"＞フォントサイズの変更＜/font＞
フォントサイズを変更する。？には半角数字を入力する。
＜h?＞の類似だが＜h?＞と違い、数字が小さいほど文字も小さくなる。
４．＜small＞文字縮小表示＜/small＞
文字を縮小表示させる。
IEでいう、表示⇒文字のサイズ⇒が『中』なら、
このスモールによって『小』のサイズになる。
＜font size＞の類似だが、フォントサイズを小さくするだけなら
＜font size＞よりこちらの方が記述が簡単。
５．＜noscript＞スクリプトのアウト＜/noscript＞
ソース参照
６．＜!-- コメントアウト --＞
ソース参照
７．＜b＞文字の強調＜/b＞
文字を強調する。＜string＞＜/string＞と同じ効果。
８．＜i＞斜体＜/i＞
文字を斜体にする。＜em＞＜/em＞と同等の効果。
９．＜s＞修正線＜/s＞
文字中に横線を引く。修正線に使う。
１０．＜u＞下線＜/u＞
文字下に線を引く。強調したいときに使うpart2。
＜b＞＜i＞＜s＞＜u＞全部混ぜて遊んでみる＜/u＞＜/s＞＜/i＞＜/b＞
わけわかんねｗ
ちなみに、閉じ方は＜/u＞＜/s＞＜/i＞＜/b＞でも＜/u＞＜/i＞＜/s＞＜/b＞でも問題ありません。
また、タグによっては＜i/＞など、スラッシュの位置が違っても効果を発揮するものがあります。
3.3.2.特殊な文字表示方法
１１．＆＃９８？？； 特殊文字
１２．『＆ｌｔ；』『＆ｇｔ；』半角表示
3.4.1.フレームタグ
＆＃９８シリーズは、９８の後に何らかの数字を入れることにより
変換にはないハートなどの特殊文字を表現できる♥
↓↙←などｗ 214入力ｗ &#の後は98に限らない。
PCの機種によって特殊文字が正しく表示されないこともある。
これらを半角表示するとそれぞれ、『<』『>』を表示できる。
主にタグ説明のときに使用する。今回はめんどいのでしてない。
＜pre＞＜/pre＞を使えばできないこともないが、こちらの方がより正しく表現できるだろう。
１３．＜frameset cols="？%,？%"＞フレーム＜/frameset＞
body中やhead中のタグではない特殊なタグ。
headとbodyの間(何もないところ)にこれのみ記述する。
画面を左と右の２ページに分ける。colsの部分を変えれば上下に分けることも可能。
それぞれの配分の長さを決めることも出来るが、するとモニターの大きさが違うときに
ページ表示が崩れることもあるのでパーセンテージの方が好ましい。
左にページを表示させる場合は、framesetの間に＜frame src="URL" name="任意の半角ローマ字１"＞を、
右にページを表示させる場合は、framesetの間に＜frame src="URL2" name="任意の半角ローマ字２"＞
と表示する。
余談だが、これで各情報へのまとめページを作ることができるので、私は重宝している。
業務でも、総合メモとして使用しているので活躍中。
１４．＜a href="URL" target="任意の半角ローマ字"＞コンテンツ表示＜/a＞
主にフレーム内でのリンク移動の際に使う。
URL2ページへのリンクをURLページ内に含む時、リンクには＜a href="URL3" target="任意の半角ローマ字"＞
と記述する。
１５．＜a href="URL#button?"＞ボタンリンク＜/a＞
あるページの特定の場所を一番上にして表示する。
ただし、その場所より下の方にページがスクロールできない場合を除く。
リンク先の冒頭に＜a name="#button?"＞＜/a＞を記述する必要がある。(?は半角数字)
１６．＜a href="〜.xls"＞エクセルへの直リン＜/a＞
リンクはアクセス可能なファイルであればページ以外でも可能。
ちなみに、インターネット上に、ファイル名が全角のものを上げるのはふさわしくないので
ファイル名が半角英文字だが、エクスプローラ内では全角文字へのリンクも可能。
てすと
HTMLで開いたページは自動的に読み取り専用になるので編集できない。
(ソースが読み取り専用でなければ、ソース閲覧できれば直接編集することは可能。
エクセルの場合は、エクセルファイル自体を直接アクセスしないと編集不可)
・余談
ちなみに、インターネット上で直リン(直接リンク)と言われるものが禁止されているのは、
1MB以上の実行ファイルをインターネット上でアクセスした場合、
そのリンク先にアクセスする他人の接続速度が遅くなるからである。
MIDIなど1MB以下の軽いファイルなら大して差し支えないが、
ポータルサイトなどで有名でアクセス数が多いところでは、右クリック保存を推奨している。
圧縮(DL)ファイルならば右クリック保存でなくても良い。
ただ、この場合も直リン禁止なのは、関連ページからのアクセスでないと
意味不明であったり、危険だからである。
そうでなくとも、そのファイルを置いているサイトが、別のサーバにファイルを格納し
サーバを不正利用したとしてプロバイダ側に消される恐れがあるからである。
１７．＜body link="cyan" alink="#8080c0" vlink="#c080c0"＞リンク色の変更＜/body＞
alinkは選択したときの色、
vlinkで選択後のリンクの色を変更できる。
ただしそのページのリンクの色全てが適応されてしまうので注意。
１８．＜a onclick="top.location.href='URL'"＞隠しリンク＜/a＞
この間に挟まれた文字は、リンクの表示にならない(マウスが文字上に来ても変わらない)。
リンク色黒で下線なしと同類だが、この場合はマウスの形が変わる。
逆に、こんなことすると如何にもどこかへのリンクがありそうですが、ありません(笑)
思わずポインタを合わせてクリックしてないですよね？(*¬∀¬)
した人、手ぇ挙げて〜
１９．＜meta http-equiv="Content-Type"content="text/html; charset=x-sjis"＞文字化け防止
ヘッダに使うタグ。基本的に文字のエンコードは自動で行われるが、万が一に備え、記述すると安全。
上記の記述だと、htmlやテキストの文字をX-SJISでエンコードして読み込む。
２０．＜link rel="stylesheet" type="text/css" href="URL.css"＞書式統一
ヘッダに書き込むタグ。カスケードスタイルシート。
ボディーカラーや書式の統一などを行いたい際によく使う。
スタイルシートの中に予め、ボディーのカラーや書式などを決めて書いておいて、
各ページのヘッダにこのスタイルシートにリンクしておけば、
一つ一つページを作る際にカラーや書式を指定しなくて済む。
でもリンクを張る必要があるので、その都度作成する時に指定する内容が単純であればする必要は無い。
今回はヘッダの内容を外部情報にしているが、css内に書いた内容を、ヘッダタグ内に直接埋め込んでも良い。
ちなみに今回はbodyタグとCSS両方で背景を指定しているが、CSSの方が優先順位が高い。
２１．＜embed src="URL.???"＞その他のファイルの実行＜/embed＞
その他のファイルの実行。
音楽ファイル『MIDI』や、フラッシュ『swf』をページ上で実行させるタグ。
てすと
実行ファイルなら物によってはページで直リンすればできるものもあります。
(ネット上ではDL物以外(EXE圧縮以外の実行ファイルは)不可能ですが、
既にローカル内にあるのであれば、エクスプローラ(HTMLページ)からリンクで実行できます)
数学ゲーム
(落ちてしまった場合、デスクトップかフォルダ名が8文字以下の場所に移動して実行してみてください。
OSのバージョンがVistaと７以降では文字コード非互換未対応の為、文字化けます)
２２．＜embed src="？〜.mid "HIDDEN="true" AUTOSTART="true" LOOP="true"＞音楽の場合のプラス属性＜/embed＞
HIDDEN:プレイヤーを表示させません。させる時は記述なしもしくはfalse
AUTOSTART:勝手に再生されます。通常は勝手に再生されないので、HIDDENだけtrueにしてると無意味になります。
LOOP:勝手に連続再生されます。
２３．＜script language="〜script"＞スクリプト＜/script＞
本当に色々なことが出来ます。意味の範囲が広すぎて一概に言い切れません。
サンプルとして、ダイアログボックスなんか出してみます。
てすと
←のメニューも、スタイルシートとJavaスクリプトを利用してテーブルとリンクを工夫したものです。 ヘッダに、スタイルシート
＜STYLE type=text/css＞
A {
text-decoration:none;
}
＜/STYLE＞
と、
Javaスクリプト
＜script Language="JavaScript"＞
function exMenu(tName){
tMenu = document.all[tName].style;
if (tMenu.display == 'none')
tMenu.display = "block";
else
tMenu.display = "none";
}
＜/script＞
を入力しています。そして、テーブルをつかって文字の周りを1pixで囲んでいます。
＜table＞
＜tr＞
＜td bgcolor="#ffffff"
bordercolor="#000000"
style="border-style:solid;border-width:1px;" ＞
＜small＞
＜small＞
＜a href="javaScript:exMenu('information2')"＞
information2
＜/a＞
＜/small＞
＜/small＞
＜/td＞
＜/tr＞
＜/table＞
＜div id="information2"
style="display:none"＞
＜dd＞
＜table＞
＜tr＞
＜td bgcolor="#ffffff"
bordercolor="#000000"
style="border-style:solid;border-width:1px;"＞
＜small＞
＜small＞
よっしゃー
＜/small＞
＜/small＞
＜/td＞
＜/tr＞
＜/table＞
＜/dd＞
＜/div＞
ちょっとここでやってみましょう。
| ノックコンコン |
うわー面白ぇー！ｗｋｔｋ
テーブルの周りを線で囲む方法は他にもあります。(ちょっと太いけど)
＜table bgcolor="#000000"＞
＜tr＞
＜td bgcolor="#ffffff"＞
lll orz
＜/td＞
＜/tr＞
＜/table＞
| lll orz |
・まとめ
１．引用＜blockquote＞＜/blockquote＞
２．説明(幅明け)＜dl＞定義＜dt＞題＜/dt＞＜dd＞説明＜/dd＞＜dl＞
３．フォントサイズ＜font size="?"＞＜/font＞
４．縮小＜small＞＜/small＞
５．スクリプトアウト＜noscript＞＜/noscript＞
６．コメントアウト＜!-- --＞
７．文字の強調＜b＞＜/b＞
８．斜体＜i＞＜/i＞
９．修正線＜s＞＜/s＞
１０．下線＜u＞＜/u＞
１１．特殊文字＆＃９８？？；
１２．タグの表示＆ｌｔ； ＆ｇｔ；
１３．フレーム＜frameset cols="?%,?%"＞＜/frameset＞
１４．コンテンツ表示＜a href="URL" target="任意の半角ローマ字"＞＜/a＞
１５．ボタンリンク＜a name="#button?"＞＜/a＞＜a href="#button?"＞＜/a＞
１６．ファイルへの直リンク＜a href="〜.xls"＞＜/a＞
１７．リンク色の変更＜body link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB"＞＜/body＞
１８．隠しリンク＜a onclick="top.location.href='URL'"＞＜/a＞
１９．文字化け防止＜meta http-equiv="Content-Type"content="text/html; charset=x-sjis"＞
２０．書式統一＜link rel="stylesheet" type="text/css" href="URL.css"＞
２１．その他のファイル実行＜embed＞
２２．その他のファイル実行 他＜"HIDDEN="true" AUTOSTART="true" LOOP="true"＞
２３．スクリプト表示＜script language="〜script"＞＜/script＞
・その他
タグとは関係ないが、タグを書いてその効果が現れるようにするファイルの拡張子について。
ファイルの拡張子が、『.html』『.htm』だと、タグを書いた時にエクスプローラのビューアで
その効果を発揮するようになる。ファイル名が『index』だと、ファイル名を指定せずとも
フォルダのルートにアクセスしただけでそのページが閲覧できる。(URL直打ち必要)
タグの効果を発揮する拡張子は他にも『xml』や『php』などが挙げられるが、あまり見ない。
余談だが、このタグたちは数年後使えなくなり、全く新しい言語に生まれ変わると聞いています。(虚実は不明)
実はこの『サイト』のどこかに隠しページがあります。 がんばって見つけて下さいね
ヒント:ピリオド
