MAJIDEKA.COM -Lesson 02-

初心者にもわかりやすいWEBサイト作成お助けサイトです。

色
フォント
単位
画像形式
コメント
『ブロックレベル要素』と『インライン要素』
『空要素』
汎用ブロックレベル要素『div要素』(Division)

色

フォントや背景などの色の表現はRGB(Red、Green、Blue)値(#RRGGBB)やカラー名で指定します。RGB値は16進数で配合し、#000000のように記述します。また、RGBは00、33、66、99、CC、FFで表されます。RGBの割合は00は0、33は51、66は102、99は153、CCは204、FFは255となります。なお、細かい色彩などはディスプレイの環境によって異なります。

RGB値
■ #000000	■ #003300	■ #006600	■ #009900	■ #00CC00	■ #00FF00
■ #000033	■ #003333	■ #006633	■ #009933	■ #00CC33	■ #00FF33
■ #000066	■ #003366	■ #006666	■ #009966	■ #00CC66	■ #00FF66
■ #000099	■ #003399	■ #006699	■ #009999	■ #00CC99	■ #00FF99
■ #0000CC	■ #0033CC	■ #0066CC	■ #0099CC	■ #00CCCC	■ #00FFCC
■ #0000FF	■ #0033FF	■ #0066FF	■ #0099FF	■ #00CCFF	■ #00FFFF
■ #330000	■ #333300	■ #336600	■ #339900	■ #33CC00	■ #33FF00
■ #330033	■ #333333	■ #336633	■ #339933	■ #33CC33	■ #33FF33
■ #330066	■ #333366	■ #336666	■ #339966	■ #33CC66	■ #33FF66
■ #330099	■ #333399	■ #336699	■ #339999	■ #33CC99	■ #33FF99
■ #3300CC	■ #3333CC	■ #3366CC	■ #3399CC	■ #33CCCC	■ #33FFCC
■ #3300FF	■ #3333FF	■ #3366FF	■ #3399FF	■ #33CCFF	■ #33FFFF
■ #660000	■ #663300	■ #666600	■ #669900	■ #66CC00	■ #66FF00
■ #660033	■ #663333	■ #666633	■ #669933	■ #66CC33	■ #66FF33
■ #660066	■ #663366	■ #666666	■ #669966	■ #66CC66	■ #66FF66
■ #660099	■ #663399	■ #666699	■ #669999	■ #66CC99	■ #66FF99
■ #6600CC	■ #6633CC	■ #6666CC	■ #6699CC	■ #66CCCC	■ #66FFCC
■ #6600FF	■ #6633FF	■ #6666FF	■ #6699FF	■ #66CCFF	■ #66FFFF
■ #990000	■ #993300	■ #996600	■ #999900	■ #99CC00	■ #99FF00
■ #990033	■ #993333	■ #996633	■ #999933	■ #99CC33	■ #99FF33
■ #990066	■ #993366	■ #996666	■ #999966	■ #99CC66	■ #99FF66
■ #990099	■ #993399	■ #996699	■ #999999	■ #99CC99	■ #99FF99
■ #9900CC	■ #9933CC	■ #9966CC	■ #9999CC	■ #99CCCC	■ #99FFCC
■ #9900FF	■ #9933FF	■ #9966FF	■ #9999FF	■ #99CCFF	■ #99FFFF
■ #CC0000	■ #CC3300	■ #CC6600	■ #CC9900	■ #CCCC00	■ #CCFF00
■ #CC0033	■ #CC3333	■ #CC6633	■ #CC9933	■ #CCCC33	■ #CCFF33
■ #CC0066	■ #CC3366	■ #CC6666	■ #CC9966	■ #CCCC66	■ #CCFF66
■ #CC0099	■ #CC3399	■ #CC6699	■ #CC9999	■ #CCCC99	■ #CCFF99
■ #CC00CC	■ #CC33CC	■ #CC66CC	■ #CC99CC	■ #CCCCCC	■ #CCFFCC
■ #CC00FF	■ #CC33FF	■ #CC66FF	■ #CC99FF	■ #CCCCFF	■ #CCFFFF
■ #FF0000	■ #FF3300	■ #FF6600	■ #FF9900	■ #FFCC00	■ #FFFF00
■ #FF0033	■ #FF3333	■ #FF6633	■ #FF9933	■ #FFCC33	■ #FFFF33
■ #FF0066	■ #FF3366	■ #FF6666	■ #FF9966	■ #FFCC66	■ #FFFF66
■ #FF0099	■ #FF3399	■ #FF6699	■ #FF9999	■ #FFCC99	■ #FFFF99
■ #FF00CC	■ #FF33CC	■ #FF66CC	■ #FF99CC	■ #FFCCCC	■ #FFFFCC
■ #FF00FF	■ #FF33FF	■ #FF66FF	■ #FF99FF	■ #FFCCFF	■ #FFFFFF

カラー名
■ black	■ maroon	■ green	■ navy
■ silver	■ red	■ lime	■ blue
■ gray	■ purple	■ olive	■ teal
■ white	■ fuchsia	■ yellow	■ aqua

フォント

フォントは無数に存在しますが、必ずしも自分のパソコンにインストールされているフォントがWEBサイトを見た方のパソコンにインストールされているとは限りません。そのため、フォントを指定する場合には、WindowsやMacintoshに初めからインストールされているフォントを指定しましょう。また、最新のOSにインストールされているものから順に記述します。

メイリオ→Meiryo→ヒラギノ角ゴ Pro W3→Hiragino Kaku Gothic Pro→MS Pゴシック→MS P Gothic→sans-serif

単位

フォントの大きさやmarginやpaddingの単位の指定には相対的なものと絶対的なものがあります。

相対的なものには、px、em、ex、%があり、表示されるサイズはディスプレイの環境によって異なります。

単位	意味
px(ピクセル)	1pxを1として対象のサイズを指定します。
em(エム)	現在使用しているフォントの高さを1としてサイズを指定します。
ex(エックスハイト)	現在使用しているフォントの小文字の"x"の高さを1としてサイズを指定します。
%(パーセント)	サイズを割合で指定しますが、何を対象としての割合かは状況によって変化します。

絶対的なものには、pt、mm、cm、in、pcがあり、表示されるサイズはディスプレイの環境に左右されません。

単位	意味
pt(ポイント)	72pt=1in。
mm(ミリメートル)	1mm=0.1cm。
cm(センチメートル)	1cm=10mm。
in(インチ)	1in=2.54pc。
pc(パイカ)	1pc=12pt。

画像形式

使用できる画像形式はGIF(Graphic Interchange Format)、JPEG(Joint Photographic Experts Group)、PNG(Portable Network Graphics)の3種類です。

画像形式	意味
GIF	256色までの色を扱うことのできる画像形式で、画像の水平方向の連続した同じ色をグループ化してデータを圧縮するので、色数の少ないイラストなどに向きます。
JPEG	約1670万色もの色を扱うことのできる画像形式で、写真などに向きます。
PNG	PNG-8、PNG-24、PNG-32の3つの形式があり、それぞれ256色、フルカラー、フルカラー+αチャンネル256階調を扱うことができ、透明色をも扱うことができる画像形式です。

コメント

HTMLソースの中に、編集のための注意書きを記述するために使用するもので、で囲んで注意書きを記述します。なお、コメントはブラウザには表示されません。

『ブロックレベル要素』と『インライン要素』: 『body要素』内を構成するものには、大きく分けて『ブロックレベル要素』と『インライン要素』の2種類があります。

『ブロックレベル要素』: 見出し(h1～h6要素)、段落(p要素)、リスト(ul、ol、dl要素)、表(table要素)、フォーム(form要素)など、コンテンツの塊を定義するものです。

『インライン要素』: アンカー(a要素)、画像(img要素)、強調(em、strong要素)など、テキストなどに部分的な意味を与えるものです。

『空要素』

テキストなどの内容を持たないもののことで、普通タグは開始タグと終了タグで内容を囲みますが、『head要素』内における『meta要素』や『link要素』、『body要素』内における水平線(hr要素)、改行(br要素)、画像(img要素)、フォームパーツ(input要素)などは、終了タグを記述せず、簡易終了タグとして要素名の横に半角スペースとスラッシュ(/)を記述します。

<hr />

<br />

『div要素』(Division)

ページ内のコンテンツが、ヘッダー、ナビゲーション、メイン部分、サイド部分、フッターなど大まかな範囲に分かれることから、これらの範囲を示すために使用します。

『div要素』には、id属性を振り、示した範囲がどういったものかを具体的にします。ページ内に複数出現するような範囲については、class属性を振ります。

id属性とclass属性

id属性はそのページ内に1つだけ出現するものに使用し、class属性はそのページ内に複数出現するものに使用します。なお、id属性とclass属性に利用できる文字は、アルファベット(a～z、A～Z)、数字(0～9)、ハイフン(-)、アンダースコア(_)、ピリオド(.)です。また、必ずアルファベットで始める必要があります。

<<Lesson01 || Lesson 03>>

▲PageTop