• 金. 6月 9th, 2023

HTMLにおける色の指定

Byadmin

8月 7, 2022
HTMLにおける色の指定

HTMLで色を指定するには、次の2つの方法があります。ただし、色の指定にはCSSの利用が推奨されています。

・「#rrggbb」(16進数で指定)

「#」に続けて、赤(r)、緑(g)、青(b)の値を00〜ffの16進数計6桁で表現します。例えば、黒を指定する場合には、「#000000」隣ます。基本的な16色については下記を参照してください。

・色名(色の名前で指定)

色名で直接指定します。大文字と小文字は区別されません。HTML4.01では基本的な16色が定義されています。基本的な16色については下記を参照してください。

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

HTMLにおける長さの指定

HTMLで長さを指定するには、次の3つの方法があります。どの方法で指定できるのかは要素によって異なります。

・ピクセル数で指定

ピクセル数を単位として整数で指定します。

・パーセントで指定

基準とする水平方向あるいは垂直方向の長さに対する割合を「%」をつけた数値で指定します。

・比率で指定

ピクセル数や、パーセントのほかに「*」を利用した割合による指定ができます。これらが一度に指定された場合は、まず「ピクセル数」と「%」で「指定された分が確保され、その残りの分が「*」の前につけられた数字の割合で分配されます。例えば60ピクセルに対して「,2,3*」と指定した場合には、60ピクセルを6分割(1+2+3)して、それぞれ10、20、30ピクセルということになります。主にフレームを分割するときに利用される方法です。

なお、長さの指定は文書構造ではなく見栄えに関することなので、できる限りCSSを利用するようにしましょう。

要素とタグ

要素とタグ

HTMLの基本的な構成を示すと次の様になります。

〈a href=”http://なんとかかんとか”〉アンクのページ〈/a〉

この文書ではまず最初に「なんとかかんとか」という見出しがあります。

その後の「~~~~」以降が本文になりますが、この本文には、書籍名を順不同で並べたリストが含まれています。また、この後には内容紹介文の様な文章が続くかもしれませんし、各書籍の売り上げ状況を示す表が入る場合もあるでしょう。

一つの文書はこの様に、様々な性質を持った内容が部品の様に組み合わされて出来上がります。HTMLではこの個々の部品をそれぞれ「要素」として分類し、街灯の箇所がどの要素なのかを「タグ」という印をつけてしまします。

要素やタグの特色やん文法上のルールなどは文書型定義で詳細に決められており、タグつけされた文書を解読し、定義に沿って適切に表示するのは、「ブラウザ」と呼ばれる専門ソフトウェアの役割です。

なお、本書ではwebページを作るときに役立てやすい様、〈◯◯〉タグとその属性・値という表現を主に使います。

開始タグと終了タグ

前述の文書にタグをつけると次の様になります。

〈h1〉なんとかかんとか〈/h1〉

〈p〉なんとかかんとかなんとかかんとか〈/p〉

〈!–この部分はコメントです–〉

〈ul〉

〈li〉なんとか辞典〈/li〉

〈li〉なんとか辞典〈/li〉

〈li〉javascriptなんとか辞典〈/li〉

〈li〉ホームページなんとか辞典〈/li〉

〈/ul〉

タグには「開始タグ」と「終了タグ」という物があり、この2つで「要素内容」を挟む様に述します。ただし、終了タグを省略できる要素や、内容を持たないために終了タグを持たない「空要素」というものもあります。

・終了タグを省略できる要素

次の要素では、終了タグを省略することもできます。

colgroup、dd、dt、li、option、p、tbody、td、tfoot、th、thead、tr

より正しい文書を作成するためには、終了タグも省略しないで記述した方がいいでしょう。

また、XJTMLでは終了タグを省略することはできません。

・空要素

内容を持たない要素です。空要素には開始タグのみで終了タグがありません。

area、base、br、col、frame、hr、img、input、link、meta、param

上述の様にXHTMLでは終了タグを省略できないため、空要素はHTMLとは異なる書式で記述します。