主にWindows・ソフトウェア・スマートフォン関連の操作・設定やCD/DVDレーベルを掲載しています、不定期の更新ですが是非、感想、コメント、評価をお願いします。 ブロとも・相互リンク募集中



カテゴリ0の固定表示スペース

カテゴリ0の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ1の固定表示スペース

カテゴリ1の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ2の固定表示スペース

カテゴリ2の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

印刷・確認済みプリンター

複合機(プリンター) EP-882AB



印刷時の使用アプリ
EPSON製アプリ Print CD・Epson Photo+にて動作確認済み。

頂いた方は必ずコメント・拍手・ランキングへのクリックお願いします。


Photoshopの復習の一環としてレーベル作成をしてます

注意事項

★★★掲載ラベルについて★★★


掲載ラベルに使用している画像の

著作権または肖像権等は、各製作会社、

映画会社、販売元に帰属いたします。

個人使用限定とし、自己責任において

ご使用ください。

使用に際しての不利益または

損害が生じたとしても、

一切の責任を負いません。

営業利用・直リンク・再配布は
禁止いたします。




★リクエストは必ず下記のリクエスト受付からお願いします。
リクエスト受付...

「HTML/CSSリファレンス 」カテゴリ記事一覧







HTML 文書のルート <html>~</html>

<html></html>

html要素は、HTML文書の最上位に
位置する要素(ルート要素)です。

この要素は、DOCTYPE宣言のすぐ後に配置します。

<!DOCTYPE html>
<html>
<head>文書情報</head>
<body>文書のコンテンツ</body>
</html>

html要素lang属性やdir属性を追加することで、
文書全体の言語や書字方向を指定することもできます。


html要素の内容には、head要素とbody要素を1つずつ、
この順番で配置することになります。

20220919-090310.jpg


html要素にはlang属性を指定することが推奨されています。

HTMLからの変更点
HTML5:version属性が廃止され、manifest属性が追加されました。
HTML5.1:manifest属性が廃止されました。




ブログ有料化の為に
1クリックにご協力お願いします。



使用例

サンプル

基本構造

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

</head>
<body>

<p>body要素の内容がブラウザ上に表示されます。</p>

</body>
</html>



lang属性を指定した例

<!DOCTYPE html>
<html lang="ja">
<head>

<title>文書のタイトル</title>

</head>
<body>

<p>body要素の内容がブラウザ上に表示されます。</p>

</body>
</html>



 にほんブログ村 IT技術ブログへ


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

カラーグラデーション 459色の色見本 カラーコード一覧

色合いごとに、3段階の鮮やかさと

12段階の明るさでグラデーションを表示しています(グレーを除く)。

※より詳細な色を確認したい場合は「カラーグラデーション 1350色」をご覧ください。

グレー
#555555 #b4b4b4 #ffffff
#4a4a4a #aaaaaa #f9f9f9
#3f3f3f #9f9f9f #f4f4f4
#353535 #949494 #efefef
#2a2a2a #8a8a8a #e9e9e9
#1f1f1f #7f7f7f #dfdfdf
#151515 #747474 #d4d4d4
#0a0a0a #6a6a6a #c9c9c9
#000000 #5f5f5f #bfbfbf
赤色
#fcf8f8 #fdf7f7 #fff4f4
#f8f1f1 #fceded #ffeaea
#f1e2e2 #f8dcdc #ffd5d5
#e2c7c7 #f1b8b8 #ffaaaa
#d5aaaa #ea9595 #ff8080
#c78d8d #e27272 #ff5555
#b87272 #dc4e4e #ff2b2b
#aa5555 #d52b2b #ff0000
#8d4747 #b12323 #d50000
#723838 #8d1d1d #aa0000
#552b2b #6a1515 #800000
#381d1d #470e0e #550000
茶・橙色
#fcfaf8 #fdfaf7 #fffaf4
#f8f4f1 #fcf4ed #fff4ea
#f1eae2 #f8eadc #ffead5
#e2d5c7 #f1d5b8 #ffd5aa
#d5bfaa #eabf95 #ffbf80
#c7aa8d #e2aa72 #ffaa55
#b89572 #dc954e #ff952b
#aa8055 #d5802b #ff8000
#8d6a47 #b16a23 #d56a00
#725538 #8d551d #aa5500
#55402b #6a4015 #804000
#382b1d #472b0e #552b00
黄色
#fcfcf8 #fdfdf7 #fffff4
#f8f8f1 #fcfced #ffffea
#f1f1e2 #f8f8dc #ffffd5
#e2e2c7 #f1f1b8 #ffffaa
#d5d5aa #eaea95 #ffff80
#c7c78d #e2e272 #ffff55
#b8b872 #dcdc4e #ffff2b
#aaaa55 #d5d52b #ffff00
#8d8d47 #b1b123 #d5d500
#727238 #8d8d1d #aaaa00
#55552b #6a6a15 #808000
#38381d #47470e #555500
黄緑色
#fafcf8 #fafdf7 #fafff4
#f4f8f1 #f4fced #f4ffea
#eaf1e2 #eaf8dc #eaffd5
#d5e2c7 #d5f1b8 #d5ffaa
#bfd5aa #bfea95 #bfff80
#aac78d #aae272 #aaff55
#95b872 #95dc4e #95ff2b
#80aa55 #80d52b #80ff00
#6a8d47 #6ab123 #6ad500
#557238 #558d1d #55aa00
#40552b #406a15 #408000
#2b381d #2b470e #2b5500
緑色
#f8fcf8 #f7fdf7 #f4fff4
#f1f8f1 #edfced #eaffea
#e2f1e2 #dcf8dc #d5ffd5
#c7e2c7 #b8f1b8 #aaffaa
#aad5aa #95ea95 #80ff80
#8dc78d #72e272 #55ff55
#72b872 #4edc4e #2bff2b
#55aa55 #2bd52b #00ff00
#478d47 #23b123 #00d500
#387238 #1d8d1d #00aa00
#2b552b #156a15 #008000
#1d381d #0e470e #005500
青緑色
#f8fcfa #f7fdfa #f4fffa
#f1f8f4 #edfcf4 #eafff4
#e2f1ea #dcf8ea #d5ffea
#c7e2d5 #b8f1d5 #aaffd5
#aad5bf #95eabf #80ffbf
#8dc7aa #72e2aa #55ffaa
#72b895 #4edc95 #2bff95
#55aa80 #2bd580 #00ff80
#478d6a #23b16a #00d56a
#387255 #1d8d55 #00aa55
#2b5540 #156a40 #008040
#1d382b #0e472b #00552b
緑青色
#f8fcfc #f7fdfd #f4ffff
#f1f8f8 #edfcfc #eaffff
#e2f1f1 #dcf8f8 #d5ffff
#c7e2e2 #b8f1f1 #aaffff
#aad5d5 #95eaea #80ffff
#8dc7c7 #72e2e2 #55ffff
#72b8b8 #4edcdc #2bffff
#55aaaa #2bd5d5 #00ffff
#478d8d #23b1b1 #00d5d5
#387272 #1d8d8d #00aaaa
#2b5555 #156a6a #008080
#1d3838 #0e4747 #005555
水色
#f8fafc #f7fafd #f4faff
#f1f4f8 #edf4fc #eaf4ff
#e2eaf1 #dceaf8 #d5eaff
#c7d5e2 #b8d5f1 #aad5ff
#aabfd5 #95bfea #80bfff
#8daac7 #72aae2 #55aaff
#7295b8 #4e95dc #2b95ff
#5580aa #2b80d5 #0080ff
#476a8d #236ab1 #006ad5
#385572 #1d558d #0055aa
#2b4055 #15406a #004080
#1d2b38 #0e2b47 #002b55
青・紺色
#f8f8fc #f7f7fd #f4f4ff
#f1f1f8 #ededfc #eaeaff
#e2e2f1 #dcdcf8 #d5d5ff
#c7c7e2 #b8b8f1 #aaaaff
#aaaad5 #9595ea #8080ff
#8d8dc7 #7272e2 #5555ff
#7272b8 #4e4edc #2b2bff
#5555aa #2b2bd5 #0000ff
#47478d #2323b1 #0000d5
#383872 #1d1d8d #0000aa
#2b2b55 #15156a #000080
#1d1d38 #0e0e47 #000055
青紫色
#faf8fc #faf7fd #faf4ff
#f4f1f8 #f4edfc #f4eaff
#eae2f1 #eadcf8 #ead5ff
#d5c7e2 #d5b8f1 #d5aaff
#bfaad5 #bf95ea #bf80ff
#aa8dc7 #aa72e2 #aa55ff
#9572b8 #954edc #952bff
#8055aa #802bd5 #8000ff
#6a478d #6a23b1 #6a00d5
#553872 #551d8d #5500aa
#402b55 #40156a #400080
#2b1d38 #2b0e47 #2b0055
紫色
#fcf8fc #fdf7fd #fff4ff
#f8f1f8 #fcedfc #ffeaff
#f1e2f1 #f8dcf8 #ffd5ff
#e2c7e2 #f1b8f1 #ffaaff
#d5aad5 #ea95ea #ff80ff
#c78dc7 #e272e2 #ff55ff
#b872b8 #dc4edc #ff2bff
#aa55aa #d52bd5 #ff00ff
#8d478d #b123b1 #d500d5
#723872 #8d1d8d #aa00aa
#552b55 #6a156a #800080
#381d38 #470e47 #550055
赤紫・桃色
#fcf8fa #fdf7fa #fff4fa
#f8f1f4 #fcedf4 #ffeaf4
#f1e2ea #f8dcea #ffd5ea
#e2c7d5 #f1b8d5 #ffaad5
#d5aabf #ea95bf #ff80bf
#c78daa #e272aa #ff55aa
#b87295 #dc4e95 #ff2b95
#aa5580 #d52b80 #ff0080
#8d476a #b1236a #d5006a
#723855 #8d1d55 #aa0055
#552b40 #6a1540 #800040
#381d2b #470e2b #55002b
色の調整幅について
色合い、鮮やかさ、明るさの各調整幅を 0~240 とした場合、それぞれ次のような内容でグラデーションを作成しています。
グレー
明るさ … 0(黒)~240(白) の範囲を27分割しています。
0~220 までは10単位で、225~240までは5単位で明るくしています。
その他の色
色合い … 20単位で12分割(赤色~赤紫・桃色)しています。
鮮やかさ … 80、160、240で3分割しています。
上記の表では、左列が 80、中列が160、右列が 240の鮮やかさになります。

明るさ … 40~235 の範囲で12分割しています。
40~220までは20単位で明るくし、その後に230、235と続きます。


 にほんブログ村 IT技術ブログへ


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTMLの基本 物理要素・論理要素

タグで囲まれた内容に何らかの意味を持たせる
要素を論理要素、意味を持たず見た目の
変更だけを目的とした要素を物理要素といいます。


例えば、太字(b要素)と強調(strong要素)を
比較した場合、一般的なブラウザでは
どちらも太い文字で表示されますが、

  • 太字(b要素) … 見た目は太字で表示されるが
     意味は持たない[物理要素

  • 強調(strong要素) … 強調という意味を持ち
     見た目は太字で表示される[論理要素

の違いがあります。


 物理要素論理要素について

要素には、その内容に意味を持つ「論理要素」と、

意味を持たない「物理要素」があります。


論理要素

タグで囲まれた内容に何らかの意味を持たせる要素です。

例えば、文字の強調(em要素strong要素)などが

このタイプの要素になります。


物理要素

タグで囲まれた内容は意味を持たず、見た目の

変更だけを目的とした要素です。

例えば、太字(b要素)やイタリック体(i要素)などが

このタイプの要素になります。


 物理要素・論理要素の表示例

以下のサンプルというテキストは、一般的なブラウザで

見た場合はどちらも同じように表示されます。


 <h1>サンプル</h1> [論理要素]

サンプル


<font size="6"><b>サンプル</b></font> [物理要素]

サンプル

見た目は同じであっても、論理要素側のサンプルには

見出しという意味があり、物理要素側のサンプルには

何の意味もありません。


 「意味」を持たせることの意味

「見出」しや「強調」といった「意味」は、利用者の

ブラウザに伝えられることになります。

意味的な情報を受け取ったブラウザ側は、

それらの意味を独自の方法で表現し、

その内容を利用者に分かりやすく伝えようとします。


例えば、strong要素(論理要素)の内容は「強調」という

意味を持ちますが、ブラウザ側はこの「意味」を

次のように表現することが期待されます。


一般的なブラウザ … 太字で表示することで、

その内容が強調されていることを表現します。


音声ブラウザ … トーンを変えて読み上げることで、

その内容が強調されていることを表現します。


タイプの異なるブラウザであっても、「意味」を

伝えることによりその内容が適切に

表現されるようになります。

その結果、様々な環境でその情報が利用しやすくなります。



 物理要素の一覧と代替の手段

次の物理要素による表示内容は、

スタイルシート(CSS)で代替することができます。


物理要素
表示例
CSS
<b> サンプル font-weight: bold
<big> サンプル font-size: larger
<font> サンプル color: #ff0000
サンプル font-size: 80%
<i> サンプル font-style: italic
<s> サンプル text-decoration: line-through
<small> サンプル font-size: smaller
<strike> サンプル text-decoration: line-through
<tt> サンプル font-family: monospace
<u> サンプル text-decoration: underline


 にほんブログ村 IT技術ブログへ

















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

カラーグラデーション 1350色の色見本 カラーコード一覧

色合いごとに、5段階の鮮やかさと11段階の明るさで

グラデーションを表示しています(グレーを除く)。


#3f3f3f #7f7f7f #afafaf #dddddd #ffffff
#333333 #757575 #a8a8a8 #d6d6d6 #f9f9f9
#262626 #6b6b6b #a0a0a0 #cecece #f4f4f4
#191919 #606060 #999999 #c6c6c6 #efefef
#0c0c0c #565656 #919191 #bfbfbf #eaeaea
#000000 #4c4c4c #898989 #b7b7b7 #e5e5e5
#f4efef #f7eded #f9eaea #fce8e8 #ffe5e5
#eae0e0 #efdbdb #f4d6d6 #f9d1d1 #ffcccc
#e0d1d1 #e8c9c9 #efc1c1 #f7baba #ffb2b2
#d6c1c1 #e0b7b7 #eaadad #f4a3a3 #ff9999
#c1a3a3 #d19393 #e08484 #ef7575 #ff6565
#ad8484 #c17070 #d65b5b #ea4747 #ff3232
#996666 #b24c4c #cc3333 #e51919 #ff0000
#7a5151 #8e3d3d #a32828 #b71414 #cc0000
#5b3d3d #6b2d2d #7a1e1e #890f0f #990000
#3d2828 #471e1e #511414 #5b0a0a #660000
#1e1414 #230f0f #280a0a #2d0505 #330000
#f4f0ef #f7efed #f9eeea #fcede8 #ffebe5
#eae2e0 #efe0db #f4ddd6 #f9dbd1 #ffd8cc
#e0d4d1 #e8d1c9 #efcdc1 #f7c9ba #ffc5b2
#d6c6c1 #e0c1b7 #eabcad #f4b7a3 #ffb299
#c1aaa3 #d1a393 #e09b84 #ef9375 #ff8c65
#ad8e84 #c18470 #d67a5b #ea7047 #ff6532
#997266 #b2654c #cc5933 #e54c19 #ff3f00
#7a5b51 #8e513d #a34728 #b73d14 #cc3300
#5b443d #6b3d2d #7a351e #892d0f #992600
#3d2d28 #47281e #512314 #5b1e0a #661900
#1e1614 #23140f #28110a #2d0f05 #330c00
#f4f2ef #f7f2ed #f9f2ea #fcf2e8 #fff2e5
#eae5e0 #efe5db #f4e5d6 #f9e5d1 #ffe5cc
#e0d8d1 #e8d8c9 #efd8c1 #f7d8ba #ffd8b2
#d6ccc1 #e0ccb7 #eaccad #f4cca3 #ffcc99
#c1b2a3 #d1b293 #e0b284 #efb275 #ffb265
#ad9984 #c19970 #d6995b #ea9947 #ff9932
#997f66 #b27f4c #cc7f33 #e57f19 #ff7f00
#7a6651 #8e663d #a36628 #b76614 #cc6600
#5b4c3d #6b4c2d #7a4c1e #894c0f #994c00
#3d3328 #47331e #513314 #5b330a #663300
#1e1914 #23190f #28190a #2d1905 #331900
#f4f3ef #f7f4ed #f9f6ea #fcf7e8 #fff8e5
#eae8e0 #efeadb #f4edd6 #f9efd1 #fff2cc
#e0dcd1 #e8e0c9 #efe4c1 #f7e8ba #ffebb2
#d6d1c1 #e0d6b7 #eadbad #f4e0a3 #ffe599
#c1baa3 #d1c193 #e0c984 #efd175 #ffd865
#ada384 #c1ad70 #d6b75b #eac147 #ffcc32
#998c66 #b2994c #cca533 #e5b219 #ffbf00
#7a7051 #8e7a3d #a38428 #b78e14 #cc9900
#5b543d #6b5b2d #7a631e #896b0f #997200
#3d3828 #473d1e #514214 #5b470a #664c00
#1e1c14 #231e0f #28210a #2d2305 #332600
#f4f4ef #f7f7ed #f9f9ea #fcfce8 #ffffe5
#eaeae0 #efefdb #f4f4d6 #f9f9d1 #ffffcc
#e0e0d1 #e8e8c9 #efefc1 #f7f7ba #ffffb2
#d6d6c1 #e0e0b7 #eaeaad #f4f4a3 #ffff99
#c1c1a3 #d1d193 #e0e084 #efef75 #ffff65
#adad84 #c1c170 #d6d65b #eaea47 #ffff32
#999966 #b2b24c #cccc33 #e5e519 #ffff00
#7a7a51 #8e8e3d #a3a328 #b7b714 #cccc00
#5b5b3d #6b6b2d #7a7a1e #89890f #999900
#3d3d28 #47471e #515114 #5b5b0a #666600
#1e1e14 #23230f #28280a #2d2d05 #333300
#f3f4ef #f4f7ed #f6f9ea #f7fce8 #f8ffe5
#e8eae0 #eaefdb #edf4d6 #eff9d1 #f2ffcc
#dce0d1 #e0e8c9 #e4efc1 #e8f7ba #ebffb2
#d1d6c1 #d6e0b7 #dbeaad #e0f4a3 #e5ff99
#bac1a3 #c1d193 #c9e084 #d1ef75 #d8ff65
#a3ad84 #adc170 #b7d65b #c1ea47 #ccff32
#8c9966 #99b24c #a5cc33 #b2e519 #bfff00
#707a51 #7a8e3d #84a328 #8eb714 #99cc00
#545b3d #5b6b2d #637a1e #6b890f #729900
#383d28 #3d471e #425114 #475b0a #4c6600
#1c1e14 #1e230f #21280a #232d05 #263300
#f2f4ef #f2f7ed #f2f9ea #f2fce8 #f2ffe5
#e5eae0 #e5efdb #e5f4d6 #e5f9d1 #e5ffcc
#d8e0d1 #d8e8c9 #d8efc1 #d8f7ba #d8ffb2
#ccd6c1 #cce0b7 #cceaad #ccf4a3 #ccff99
#b2c1a3 #b2d193 #b2e084 #b2ef75 #b2ff65
#99ad84 #99c170 #99d65b #99ea47 #99ff32
#7f9966 #7fb24c #7fcc33 #7fe519 #7fff00
#667a51 #668e3d #66a328 #66b714 #66cc00
#4c5b3d #4c6b2d #4c7a1e #4c890f #4c9900
#333d28 #33471e #335114 #335b0a #336600
#191e14 #19230f #19280a #192d05 #193300
#f0f4ef #eff7ed #eef9ea #edfce8 #ebffe5
#e2eae0 #e0efdb #ddf4d6 #dbf9d1 #d8ffcc
#d4e0d1 #d1e8c9 #cdefc1 #c9f7ba #c5ffb2
#c6d6c1 #c1e0b7 #bceaad #b7f4a3 #b2ff99
#aac1a3 #a3d193 #9be084 #93ef75 #8cff65
#8ead84 #84c170 #7ad65b #70ea47 #65ff32
#729966 #65b24c #59cc33 #4ce519 #3fff00
#5b7a51 #518e3d #47a328 #3db714 #33cc00
#445b3d #3d6b2d #357a1e #2d890f #269900
#2d3d28 #28471e #235114 #1e5b0a #196600
#161e14 #14230f #11280a #0f2d05 #0c3300
#eff4ef #edf7ed #eaf9ea #e8fce8 #e5ffe5
#e0eae0 #dbefdb #d6f4d6 #d1f9d1 #ccffcc
#d1e0d1 #c9e8c9 #c1efc1 #baf7ba #b2ffb2
#c1d6c1 #b7e0b7 #adeaad #a3f4a3 #99ff99
#a3c1a3 #93d193 #84e084 #75ef75 #65ff65
#84ad84 #70c170 #5bd65b #47ea47 #32ff32
#669966 #4cb24c #33cc33 #19e519 #00ff00
#517a51 #3d8e3d #28a328 #14b714 #00cc00
#3d5b3d #2d6b2d #1e7a1e #0f890f #009900
#283d28 #1e471e #145114 #0a5b0a #006600
#141e14 #0f230f #0a280a #052d05 #003300
#eff4f0 #edf7ef #eaf9ee #e8fced #e5ffeb
#e0eae2 #dbefe0 #d6f4dd #d1f9db #ccffd8
#d1e0d4 #c9e8d1 #c1efcd #baf7c9 #b2ffc5
#c1d6c6 #b7e0c1 #adeabc #a3f4b7 #99ffb2
#a3c1aa #93d1a3 #84e09b #75ef93 #65ff8c
#84ad8e #70c184 #5bd67a #47ea70 #32ff65
#669972 #4cb265 #33cc59 #19e54c #00ff3f
#517a5b #3d8e51 #28a347 #14b73d #00cc33
#3d5b44 #2d6b3d #1e7a35 #0f892d #009926
#283d2d #1e4728 #145123 #0a5b1e #006619
#141e16 #0f2314 #0a2811 #052d0f #00330c
#eff4f2 #edf7f2 #eaf9f2 #e8fcf2 #e5fff2
#e0eae5 #dbefe5 #d6f4e5 #d1f9e5 #ccffe5
#d1e0d8 #c9e8d8 #c1efd8 #baf7d8 #b2ffd8
#c1d6cc #b7e0cc #adeacc #a3f4cc #99ffcc
#a3c1b2 #93d1b2 #84e0b2 #75efb2 #65ffb2
#84ad99 #70c199 #5bd699 #47ea99 #32ff99
#66997f #4cb27f #33cc7f #19e57f #00ff7f
#517a66 #3d8e66 #28a366 #14b766 #00cc66
#3d5b4c #2d6b4c #1e7a4c #0f894c #00994c
#283d33 #1e4733 #145133 #0a5b33 #006633
#141e19 #0f2319 #0a2819 #052d19 #003319
#eff4f3 #edf7f4 #eaf9f6 #e8fcf7 #e5fff8
#e0eae8 #dbefea #d6f4ed #d1f9ef #ccfff2
#d1e0dc #c9e8e0 #c1efe4 #baf7e8 #b2ffeb
#c1d6d1 #b7e0d6 #adeadb #a3f4e0 #99ffe5
#a3c1ba #93d1c1 #84e0c9 #75efd1 #65ffd8
#84ada3 #70c1ad #5bd6b7 #47eac1 #32ffcc
#66998c #4cb299 #33cca5 #19e5b2 #00ffbf
#517a70 #3d8e7a #28a384 #14b78e #00cc99
#3d5b54 #2d6b5b #1e7a63 #0f896b #009972
#283d38 #1e473d #145142 #0a5b47 #00664c
#141e1c #0f231e #0a2821 #052d23 #003326
#eff4f4 #edf7f7 #eaf9f9 #e8fcfc #e5ffff
#e0eaea #dbefef #d6f4f4 #d1f9f9 #ccffff
#d1e0e0 #c9e8e8 #c1efef #baf7f7 #b2ffff
#c1d6d6 #b7e0e0 #adeaea #a3f4f4 #99ffff
#a3c1c1 #93d1d1 #84e0e0 #75efef #65ffff
#84adad #70c1c1 #5bd6d6 #47eaea #32ffff
#669999 #4cb2b2 #33cccc #19e5e5 #00ffff
#517a7a #3d8e8e #28a3a3 #14b7b7 #00cccc
#3d5b5b #2d6b6b #1e7a7a #0f8989 #009999
#283d3d #1e4747 #145151 #0a5b5b #006666
#141e1e #0f2323 #0a2828 #052d2d #003333
#eff3f4 #edf4f7 #eaf6f9 #e8f7fc #e5f8ff
#e0e8ea #dbeaef #d6edf4 #d1eff9 #ccf2ff
#d1dce0 #c9e0e8 #c1e4ef #bae8f7 #b2ebff
#c1d1d6 #b7d6e0 #addbea #a3e0f4 #99e5ff
#a3bac1 #93c1d1 #84c9e0 #75d1ef #65d8ff
#84a3ad #70adc1 #5bb7d6 #47c1ea #32ccff
#668c99 #4c99b2 #33a5cc #19b2e5 #00bfff
#51707a #3d7a8e #2884a3 #148eb7 #0099cc
#3d545b #2d5b6b #1e637a #0f6b89 #007299
#28383d #1e3d47 #144251 #0a475b #004c66
#141c1e #0f1e23 #0a2128 #05232d #002633
#eff2f4 #edf2f7 #eaf2f9 #e8f2fc #e5f2ff
#e0e5ea #dbe5ef #d6e5f4 #d1e5f9 #cce5ff
#d1d8e0 #c9d8e8 #c1d8ef #bad8f7 #b2d8ff
#c1ccd6 #b7cce0 #adccea #a3ccf4 #99ccff
#a3b2c1 #93b2d1 #84b2e0 #75b2ef #65b2ff
#8499ad #7099c1 #5b99d6 #4799ea #3299ff
#667f99 #4c7fb2 #337fcc #197fe5 #007fff
#51667a #3d668e #2866a3 #1466b7 #0066cc
#3d4c5b #2d4c6b #1e4c7a #0f4c89 #004c99
#28333d #1e3347 #143351 #0a335b #003366
#14191e #0f1923 #0a1928 #05192d #001933
#eff0f4 #edeff7 #eaeef9 #e8edfc #e5ebff
#e0e2ea #dbe0ef #d6ddf4 #d1dbf9 #ccd8ff
#d1d4e0 #c9d1e8 #c1cdef #bac9f7 #b2c5ff
#c1c6d6 #b7c1e0 #adbcea #a3b7f4 #99b2ff
#a3aac1 #93a3d1 #849be0 #7593ef #658cff
#848ead #7084c1 #5b7ad6 #4770ea #3265ff
#667299 #4c65b2 #3359cc #194ce5 #003fff
#515b7a #3d518e #2847a3 #143db7 #0033cc
#3d445b #2d3d6b #1e357a #0f2d89 #002699
#282d3d #1e2847 #142351 #0a1e5b #001966
#14161e #0f1423 #0a1128 #050f2d #000c33
#efeff4 #ededf7 #eaeaf9 #e8e8fc #e5e5ff
#e0e0ea #dbdbef #d6d6f4 #d1d1f9 #ccccff
#d1d1e0 #c9c9e8 #c1c1ef #babaf7 #b2b2ff
#c1c1d6 #b7b7e0 #adadea #a3a3f4 #9999ff
#a3a3c1 #9393d1 #8484e0 #7575ef #6565ff
#8484ad #7070c1 #5b5bd6 #4747ea #3232ff
#666699 #4c4cb2 #3333cc #1919e5 #0000ff
#51517a #3d3d8e #2828a3 #1414b7 #0000cc
#3d3d5b #2d2d6b #1e1e7a #0f0f89 #000099
#28283d #1e1e47 #141451 #0a0a5b #000066
#14141e #0f0f23 #0a0a28 #05052d #000033
#f0eff4 #efedf7 #eeeaf9 #ede8fc #ebe5ff
#e2e0ea #e0dbef #ddd6f4 #dbd1f9 #d8ccff
#d4d1e0 #d1c9e8 #cdc1ef #c9baf7 #c5b2ff
#c6c1d6 #c1b7e0 #bcadea #b7a3f4 #b299ff
#aaa3c1 #a393d1 #9b84e0 #9375ef #8c65ff
#8e84ad #8470c1 #7a5bd6 #7047ea #6532ff
#726699 #654cb2 #5933cc #4c19e5 #3f00ff
#5b517a #513d8e #4728a3 #3d14b7 #3300cc
#443d5b #3d2d6b #351e7a #2d0f89 #260099
#2d283d #281e47 #231451 #1e0a5b #190066
#16141e #140f23 #110a28 #0f052d #0c0033
#f2eff4 #f2edf7 #f2eaf9 #f2e8fc #f2e5ff
#e5e0ea #e5dbef #e5d6f4 #e5d1f9 #e5ccff
#d8d1e0 #d8c9e8 #d8c1ef #d8baf7 #d8b2ff
#ccc1d6 #ccb7e0 #ccadea #cca3f4 #cc99ff
#b2a3c1 #b293d1 #b284e0 #b275ef #b265ff
#9984ad #9970c1 #995bd6 #9947ea #9932ff
#7f6699 #7f4cb2 #7f33cc #7f19e5 #7f00ff
#66517a #663d8e #6628a3 #6614b7 #6600cc
#4c3d5b #4c2d6b #4c1e7a #4c0f89 #4c0099
#33283d #331e47 #331451 #330a5b #330066
#19141e #190f23 #190a28 #19052d #190033
#f3eff4 #f4edf7 #f6eaf9 #f7e8fc #f8e5ff
#e8e0ea #eadbef #edd6f4 #efd1f9 #f2ccff
#dcd1e0 #e0c9e8 #e4c1ef #e8baf7 #ebb2ff
#d1c1d6 #d6b7e0 #dbadea #e0a3f4 #e599ff
#baa3c1 #c193d1 #c984e0 #d175ef #d865ff
#a384ad #ad70c1 #b75bd6 #c147ea #cc32ff
#8c6699 #994cb2 #a533cc #b219e5 #bf00ff
#70517a #7a3d8e #8428a3 #8e14b7 #9900cc
#543d5b #5b2d6b #631e7a #6b0f89 #720099
#38283d #3d1e47 #421451 #470a5b #4c0066
#1c141e #1e0f23 #210a28 #23052d #260033
#f4eff4 #f7edf7 #f9eaf9 #fce8fc #ffe5ff
#eae0ea #efdbef #f4d6f4 #f9d1f9 #ffccff
#e0d1e0 #e8c9e8 #efc1ef #f7baf7 #ffb2ff
#d6c1d6 #e0b7e0 #eaadea #f4a3f4 #ff99ff
#c1a3c1 #d193d1 #e084e0 #ef75ef #ff65ff
#ad84ad #c170c1 #d65bd6 #ea47ea #ff32ff
#996699 #b24cb2 #cc33cc #e519e5 #ff00ff
#7a517a #8e3d8e #a328a3 #b714b7 #cc00cc
#5b3d5b #6b2d6b #7a1e7a #890f89 #990099
#3d283d #471e47 #511451 #5b0a5b #660066
#1e141e #230f23 #280a28 #2d052d #330033
#f4eff3 #f7edf4 #f9eaf6 #fce8f7 #ffe5f8
#eae0e8 #efdbea #f4d6ed #f9d1ef #ffccf2
#e0d1dc #e8c9e0 #efc1e4 #f7bae8 #ffb2eb
#d6c1d1 #e0b7d6 #eaaddb #f4a3e0 #ff99e5
#c1a3ba #d193c1 #e084c9 #ef75d1 #ff65d8
#ad84a3 #c170ad #d65bb7 #ea47c1 #ff32cc
#99668c #b24c99 #cc33a5 #e519b2 #ff00bf
#7a5170 #8e3d7a #a32884 #b7148e #cc0099
#5b3d54 #6b2d5b #7a1e63 #890f6b #990072
#3d2838 #471e3d #511442 #5b0a47 #66004c
#1e141c #230f1e #280a21 #2d0523 #330026
#f4eff2 #f7edf2 #f9eaf2 #fce8f2 #ffe5f2
#eae0e5 #efdbe5 #f4d6e5 #f9d1e5 #ffcce5
#e0d1d8 #e8c9d8 #efc1d8 #f7bad8 #ffb2d8
#d6c1cc #e0b7cc #eaadcc #f4a3cc #ff99cc
#c1a3b2 #d193b2 #e084b2 #ef75b2 #ff65b2
#ad8499 #c17099 #d65b99 #ea4799 #ff3299
#99667f #b24c7f #cc337f #e5197f #ff007f
#7a5166 #8e3d66 #a32866 #b71466 #cc0066
#5b3d4c #6b2d4c #7a1e4c #890f4c #99004c
#3d2833 #471e33 #511433 #5b0a33 #660033
#1e1419 #230f19 #280a19 #2d0519 #330019
#f4eff0 #f7edef #f9eaee #fce8ed #ffe5eb
#eae0e2 #efdbe0 #f4d6dd #f9d1db #ffccd8
#e0d1d4 #e8c9d1 #efc1cd #f7bac9 #ffb2c5
#d6c1c6 #e0b7c1 #eaadbc #f4a3b7 #ff99b2
#c1a3aa #d193a3 #e0849b #ef7593 #ff658c
#ad848e #c17084 #d65b7a #ea4770 #ff3265
#996672 #b24c65 #cc3359 #e5194c #ff003f
#7a515b #8e3d51 #a32847 #b7143d #cc0033
#5b3d44 #6b2d3d #7a1e35 #890f2d #990026
#3d282d #471e28 #511423 #5b0a1e #660019
#1e1416 #230f14 #280a11 #2d050f #33000c

色のグラデーションについて

HSL色空間を使用して次のようにグラデーションを作成しています。


グレー

鮮やかさを0にして、明るさを

0(黒)~100(白)までの30段階(不均等)で分割しています。


その他の色

色合い … 360の範囲を15単位で24分割しています。

鮮やかさ … 100の範囲を20、40、60、80、100で

5分割しています。上記の表では

水平方向が鮮やかさのグラデーションになります。

明るさ … 100の範囲を10、20、30、40、50、

60、70、80、85、90、95で11分割しています。

上記の表では垂直方向が明るさのグラデーションになります。


   にほんブログ村 IT技術ブログへ


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTML タグ基本・インラインの要素

 HTML 4.01 要素一覧

インライン要素の一覧
要素名
分類
説明
DTD
子要素はインライン要素のみ Str Tra Fra
<div> I 範囲の指定(インライン)
<em> I 強調
<strong> I より強い強調
<abbr> I 略語(全般)
<acronym> I 略語(頭字語)
<dfn> I 定義する用語
<q> I 短文の引用(インライン)
<cite> I 引用元(出典・参照先)
<sup> I 上付き文字
<sub> I 下付き文字
<code> I ソースコード
<var> I 変数・引数
<kbd> I 入力する文字
<samp> I 出力サンプル
<bdo> I 書字方向
<font> I フォントのサイズ・色・種類 ×
<big> I 大きめの文字
<small> I 小さめの文字
<b> I 太字
<i> I イタリック体
<s> I 取り消し線 ×
<strike> I 取り消し線 ×
<u> I 下線 ×
<tt> I 等幅フォント
<a> I リンクのアンカー
<label> I 部品とラベルの関連付け
子要素はブロックレベル要素インライン要素 Str Tra Fra
<object> I オブジェクトの埋め込み
<applet> I Javaアプレットの埋め込み ×
<iframe> I インラインフレーム ×
<button> I ボタン
子要素は文字列のみ Str Tra Fra
<textarea> I 複数行の入力欄
子要素は特定の要素のみ Str Tra Fra
<select> I セレクトボックス
要素は空 Str Tra Fra
<basefont> I 基準となるフォントサイズ ×
<img> I 画像の埋め込み
<br> I 改行
<input> I フォームの部品
子要素はスクリプトのみ Str Tra Fra
<script> I スクリプト
その他 Str Tra Fra
<map> I イメージマップ


分類に関する大まかな説明です。

一部例外もありますので、詳細については各要素のページで確認してください。

●子要素はインライン要素のみ
インライン要素(および文字列)のみを直接の子要素として配置できる要素。

●子要素はブロックレベル要素インライン要素
ブロックレベル要素、およびインライン要素を直接の子要素として配置できる要素。

●子要素は文字列のみ
文字列のみを配置できる要素。

●子要素は特定の要素のみ
特定の要素のみを直接の子要素として配置できる要素。

●子要素は空
内容を持たない要素。

●子要素はスクリプトのみ
スクリプトのみを配置できる要素。
スクリプト内では、ブロックレベル要素
インライン要素ともに配置が可能。

●その他
area要素、およびブロックレベル要素
直接の子要素として配置できる要素。

※この一覧には、ブラウザ独自の拡張要素は掲載していません。

項目


マークの意味
項目
マーク
意味
説明
分類 B ブロックレベル要素  ひとつのまとまりを構成する要素
I インライン要素  文章中の一部として扱われる要素 
- その他の分類 上記の2つに分類されない要素
DTD Str Strict DTD 厳密型
Tra Transitional DTD 移行型
Fra Frameset DTD フレーム設定用
使用可 そのDTDで使用できる要素
非推奨 使用できるが推奨されない要素
× 使用不可 そのDTDでは使用できない要素


    にほんブログ村 IT技術ブログへ


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTML タグ基本・ブロックレベルの要素

 HTML 4.01 要素一覧


ブロックレベル要素の一覧
要素名
分類
説明
DTD
子要素はブロックレベル要素インライン要素 Str Tra Fra
<div> B 範囲の指定(ブロックレベル)
<center> B センタリング ×
<fieldset> B フォーム部品のグループ化
子要素は原則ブロックレベル要素のみ Str Tra Fra
<blockquote> B 長文の引用(ブロックレベル)
<form> B 入力フォーム
<noscript> B スクリプトの代替内容
子要素はインライン要素のみ Str Tra Fra
<h1>~<h6> B 見出し
<address> B 作者情報・連絡先
<p> B 段落
<pre> B 整形済みテキスト
子要素は特定の要素のみ Str Tra Fra
<ul> B 順不同のリスト
<ol> B 順序付きリスト
<dl> B 定義型リスト
<dir> B ディレクトリリスト ×
<menu> B メニューリスト ×
<table> B
子要素は空 Str Tra Fra
<hr> B 水平線
<isindex> B テキスト入力欄 ×
その他 Str Tra Fra
<noframes> B フレームの代替内容 ×

分類に関する大まかな説明です。一部例外もありますので、

詳細については各要素のページで確認してください。

子要素はブロックレベル要素インライン要素
ブロックレベル要素、およびインライン要素を直接の子要素として配置できる要素。

子要素は原則ブロックレベル要素のみ
ブロックレベル要素のみを直接の子要素として配置できる要素。
ただし、Strict DTD以外ではインライン要素
(および文字列)を直接の子要素として配置できる。

・子要素はインライン要素のみ
インライン要素(および文字列)のみを直接の子要素として配置できる要素。

・子要素は特定の要素のみ
特定の要素のみを直接の子要素として配置できる要素。
・子要素は空
内容を持たない要素。

・その他
body要素、またはブロックレベル要素を直接の
子要素として配置できる要素。ただし、
Transitional DTDの場合はbody要素は不可。
インライン要素(および文字列)を直接の
子要素として配置することも可能。

※この一覧には、ブラウザ独自の拡張要素は掲載していません。



マークの意味
項目
マーク
意味
説明
分類 B ブロックレベル要素  ひとつのまとまりを構成する要素
I インライン要素  文章中の一部として扱われる要素 
- その他の分類 上記の2つに分類されない要素
DTD Str Strict DTD 厳密型
Tra Transitional DTD 移行型
Fra Frameset DTD フレーム設定用
使用可 そのDTDで使用できる要素
非推奨 使用できるが推奨されない要素
× 使用不可 そのDTDでは使用できない要素


にほんブログ村 IT技術ブログへ  


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTML タグ基本・要素の分類

 ブロックレベル要素インライン要素

要素の多くは、「ブロックレベル要素」「インライン要素」に分類されてます。


ブロックレベル要素


文書の骨組みとなる要素です(例えば見出しや段落など)。

このタイプの要素は横幅いっぱいの領域を持つので、

要素の前後には自動的に改行が入ることになります。


インライン要素


文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。

このタイプの要素は行の一部として扱われるので、

要素の前後には改行は入りません。


 ブロックレベル要素インライン要素について

要素の多くは、「ブロックレベル要素」「インライン要素」に分類されてます。


ブロックレベル要素


文書の骨組みとなる要素です(例えば見出しや段落など)。

このタイプの要素は、body要素の直接の子要素として配置することができます


インライン要素


文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。

このタイプの要素は、通常はブロックレベル要素内で使用します。


また、インライン要素の中には「置換要素」というタイプの

要素が存在します。


置換要素


テキスト以外のものに置き換えられる要素です(例えば画像や入力欄など)。

一般的なインライン要素とは異なり、このタイプの要素は

横幅と高さを持ちます。

置換要素以外のインライン要素は、非置換インライン要素といいます)


ブロックレベル要素の前後には
【ブロックレベル要素】
改行が入ります。

インライン要素の前後には【インライン要素】改行は入りません。


ブロックレベル要素赤い境界線) … このタイプの要素は横幅いっぱいの

領域を持つので、要素の前後には自動的に改行が入ることになります。


インライン要素青い境界線) … このタイプの要素は行の一部として

扱われるので、要素の前後には改行は入りません。



 ブロックレベル要素の一覧

次の要素がブロックレベル要素になります。



・<address>

・<blockquote>

・<center>

・<dir>

・<div>

・<dl>

・<fieldset>

・<form>

・<h1>-<h6>

・<hr>

・<isindex>

・<menu>

・<noframes>

・<noscript>

・<ol>

・<p>

・<pre>

・<table>

・<ul>


詳しくは要素の一覧ブロックレベル要素をご覧ください。


 インライン要素の一覧

次の要素がインライン要素になります。



・<a>

・<abbr>

・<acronym>

・<applet>

・<b>

・<basefont>

・<bdo>

・<big>

・<br>

・<button>

・<cite>

・<code>

・<dfn>

・<em>

・<font>

・<i>

・<iframe>

・<img>

・<input>

・<kbd>

・<label>

・<map>

・<object>

・<q>

・<s>

・<samp>

・<script>

・<select>

・<small>

・<span>

・<strike>

・<strong>

・<sub>

・<sup>

・<textarea>

・<tt>

・<u>

・<var>


詳しくは要素の一覧インライン要素をご覧ください。


 置換要素の一覧

次の要素が置換要素になります。



・<img>

・<input>

・<object>

・<select>

・<textarea>



 特殊な要素


次の要素は、使用する場所によりブロックレベル要素になる場合と

インライン要素になる場合があります。



・<del>

・<ins>



にほんブログ村 IT技術ブログへ 


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTML タグ基本のDOCTYPE宣言とは

<!DOCTYPE HTML PUBLIC "">

DOCTYPE宣言とは、その文書がどのバージョンのHTMLで、
どの仕様に従って作られているのかを
ブラウザに伝えるためのものです。
(これはタグではありません)

DOCTYPE宣言は、文書の一番最初
html開始タグよりも前)に記述します。


 サンプルコード
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">


DOCTYPE宣言には、Strict(厳密型)Transitional(移行型)

Frameset(フレーム設定用)、この3つの

DTD(文書型定義)が存在します。


この宣言にURIを含めるかどうかにより、

ブラウザ側の「標準モード」と「互換モード」の切り替えが行われます。


DOCTYPE宣言の詳細

DOCTYPE宣言」とは、その文書がどのバージョンの

HTMLで、どの仕様に従って作られているのかを

ブラウザに伝えるためのものです。


HTML 4.01のルールでは、この宣言が必須とされています。

仕様に準拠した文書を作成するのであれば、

この宣言を必ず記述しておく必要があります。


 
 サンプルコード
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html>
 <head>

 </head>
 <body>

 </body>
 </html>


このDOCTYPE宣言は、文書の一番最初(html開始タグよりも前)に記述します。


 3種類のDTD

DTD(文書型定義」とは、そのバージョンのHTMLで使用する

ことができる要素と属性、要素の配置に関するルールなどを

定義しているものです。


このDTDには、Strict(厳密型)、Transitional(移行型)、

Frameset(フレーム設定用)の3種類があり、

それぞれの記述方法や意味は次のようになります。


★Strict … HTML4.01のルールに厳密かつ正確に従う指定

非推奨の要素や属性は使うことができず、要素の配置に関しても

細かい決まりごとがあります。また、フレームも

使用することができません。



 URIを含めた指定
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


 URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">



★Transitional … Strictより緩やかな指定(フレーム不可)

非推奨の要素や属性を使用できますが、フレームは使用することができません。


 
 URIを含めた指定
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 URIを省いた指定
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



★Frameset … Transitionalにフレームを加えた指定

Transitionalに加え、フレームを使用できるようにした指定です。

フレームを設定する文書では、このDOCTYPE宣言を記述します。


 
 URIを含めた指定
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


 URIを省いた指定
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">




 表示モードについて

一般的なブラウザには、標準モード互換モードという

2つの表示モードが備わっています。


標準モード

文法を正しく解釈する表示モードです、文法ミスは無視されます。


互換モード

過去のバージョンと互換性のある表示モードです。

文法ミスはある程度許容され、ブラウザがうまく

カバーして表示してくれます。

※解釈の違いにより、標準モード互換モードでは

表示のされ方も多少違ってきます


この表示モードは、DOCTYPE宣言の記述にURIを

含めるかどうかによって、自動的に切り替わる

仕組みになっています。



にほんブログ村 IT技術ブログへ   


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

HTML タグ基本の使い方

 タグと要素の違い

 <h1>HTML/CSSリファレンス</h1>

 <h1>  ~ </h1>  タグ 
 <h1>HTML/CSSリファレンス</h1>   要素 
 HTML/CSSリファレンス   要素の内容 

<h1> </h1> の部分をタグといい、

この「タグと内容を合わせた全体を「要素」といいます。




 要素名(タグ名)・属性・値

<a href="index.html">HTML/CSSリファレンス</a>

  a    要素名(タグ名) 
  href=""    属性(href の部分が属性名) 
  index.html    値(属性値) 

上記の例では、リンクを設定する要素(a)に、リンク先を

指定するための属性(href="")を追加して、

その値に index.html を指定しています。


※使用できる属性は要素により異なります。



 開始タグと終了タグ

要素には、開始タグと終了タグをセットで使用するタイプと、

単体で使用する(終了タグを必要としない)タイプがあります。


 <p>HTML/CSSリファレンス</p> 

上記の例では、<p>開始タグで </p>終了タグになります。

終了タグにはスラッシュ( / )が入ります。

次のように、開始タグのみで使用する要素もあります。

(内容を持たないこのような要素を空要素といいます)


 空要素について

内容を持たない要素のことを「空要素」といいます。

要素の多くは開始タグと終了タグをセットで使用しますが、

内容を持たない空要素の場合は終了タグは必要ありません。


★内容を持つ要素の記述例


<p>要素の内容</p>


★空要素の記述例


<hr>


【参考】


HTMLでは空要素の終了タグは必要ありませんが、

XHTMLでは次のように終了させる必要があります。

<hr /> (半角スペースに続けて / を入れます)


 <img src="example.gif" alt="サンプル">



 タグは半角文字で

タグは半角文字で記述します。全角文字は使えません。


 〇   <div>HTML/CSSリファレンス</div> 
 ✕   <div>htmlタグ・簡単検索</div> 


大文字と小文字

要素名と属性名は、大文字と小文字のどちらで記述しても構いません。


 〇   <img src="example.gif" alt="サンプル"> 
 〇   <IMG src="example.gif" alt="サンプル"> 
 〇   <IMG SRC="example.gif" ALT="サンプル"> 

※XHTMLの場合は小文字で記述する必要があります。



 引用符の有無


属性の値により、引用符(" ")を付けなければならない場合と、

省略してもいい場合があります。


属性の値を半角英数字、ハイフン( - )、アンダーバー( _ )、

コロン( : )、ピリオド( . )だけで記述する場合は、

引用符を省略することができます(付けてもOK)。

これ以外の文字列を使用する場合は、

その値を引用符で囲まなければなりません。


※省略できる場合でも、引用符を付けておくことをお勧めします。


引用符には、ダブルクォーテーション( " )または

シングルクォーテーション( ' )を使用します。

(一般的にはダブルクォーテーションが使用されています)


 〇   <font size=1>フォントサイズ</font> 
 〇   <font size="1">フォントサイズ</font> 
 〇   <font size='1'>フォントサイズ</font> 
 ✕   <font size=+1>フォントサイズ</font> 
 〇   <font size="+1">フォントサイズ</font> 

※XHTMLの場合は引用符を省略することはできません。



 要素の入れ子

次のように、複数の要素を入れ子にすることもできます。


 <p><strong><a href="index.html">HTML/CSSリファレンス</a></strong></p>

開始タグとは逆の順序で終了タグを記述していきます。


 〇   <p><strong>HTML/CSSリファレンス</strong></p> 
 ✕   <p><strong>HTML/CSSリファレンス</p></strong> 


にほんブログ村 PC家電ブログ Windowsへ 
  


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)

標準16色の色見本 カラーネームとカラーコードの一覧

HTMLで定義されている基本色。この16色は、古いブラウザでもカラーネームを解釈できます。


black
#000000
gray
#808080
silver
#c0c0c0
white
#ffffff
maroon
#800000
red
#ff0000
purple
#800080
fuchsia
#ff00ff
green
#008000
lime
#00ff00
olive
#808000
yellow
#ffff00
navy
#000080
blue
#0000ff
teal
#008080
aqua
#00ffff




にほんブログ村 PC家電ブログ Windowsへ   


















(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
検索フォーム
カウンター



閲覧者数
現在の閲覧者数:
ジャンルランキング
[ジャンルランキング]
コンピュータ
47位
ジャンルランキングを見る>>

[サブジャンルランキング]
ウィンドウズ
17位
サブジャンルランキングを見る>>
RSSリンクの表示



カテゴリ
タグ一覧

 Windows   Windows10   Windows11 

 パソコン   インターネット   HTML 

 自作パソコン   コマンドプロント 

 Microsoft   アプリケーション   iPhone 

 Android   Office2021   Excel 

 Excel2021 

 AfterEffects 

FC2リンク
  • 赤髪船長のCUSTOMラベル
  • ベジベジの自作BD・DVDラベル 超(スーパー)

  • ブロとも一覧

    You talkin' to me ? 2nd_新たなる驚異を求めて

    LEVEL1 FX-BLOG

    梅月夜の夢物語り

    株式情報市場
    QRコード
    QR
    ブログランキング




    にほんブログ村 スマホ・携帯ブログへ にほんブログ村 スマホ・携帯ブログ iPhoneへ にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ IT技術情報へ にほんブログ村 地域生活(街) 沖縄ブログへ にほんブログ村 地域生活(街) 沖縄ブログ 沖縄市・コザ情報へ

    ブログ王ランキング

    相互リンクとランキングプラス

    PC・ソフトランキング













    タイムライン
    セキュリティーソフト
    ウイルスバスター公式トレンドマイクロ・オンラインショップ

    ノートンストア

    マカフィー・ストア

    ZERO ウイルスセキュリティ

    ソフトウェア
    Acronis True Image

    サイバーリンク Power2Go 12

    アフェリエイト











    Powered By FC2ブログ