A.T-MOON

contents

パンくずリスト

メッセージエリア

タグ 要素と属性

メッセージエリア

要素及び属性は【HTMLタグ】であるか【スタイルシート】であるかによって記述の仕方がかわるので注意して下さい。
【HTMLタグ】には水色でマーカー、【スタイルシート】にはピンク色でマーカーをしておきます。

【索引】
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A   B
align属性 … 表示位置の設定
<要素 align="">
要素 {align: ;}
要素 … text,img,tableなど
値 … leftcenterrightで指定

a、a:visited、a:active、a:hover … リンクの種類
(擬似クラス)
要素{ 擬似クラス:値;}
a … 未訪問ページへのスタイル指定
a:visited … 訪問済みページへのスタイル指定
a:active … クリックした瞬間のスタイル指定
a:hover … マウスカーソルが重なったときのスタイル指定
  • 【リンクテキストの指定】
    擬似クラス{text-decoration:;}
    <擬似クラス style="text-decoration:;">
    noneunderlineoverlineline-throughblinkで指定
     
  background属性 … 背景のの設定
要素{background-ココに属性;}
  • 【背景色の指定】
    {background-color:;}
    <要素 style="background-color:;">
    カラーコードカラーネームで指定
     
  • 【背景に画像の指定】
    {background-image:画像のURL}
    <要素 style="background-image:画像のURL;">
    画像のURLで指定
     
  • 【背景画像固定】
    {background-image;attachment:fixed;}
    <属性 style="background-image;attachment:fixed;">
    fixedで指定
     
  • 【背景画像を並べる】
    {background-repeat:ココに指定;}
    <要素 style="background-repeat:ココに指定;">
    repeat-xrepeat-yで指定
    • repeat-x … 横に並べる
    • repeat-y … 縦に並べる
  •  
  • 【背景画像を一枚のみ】
    {background-repeat:no-repeat;}
    <属性 style="background-repeat:no-repeat;">
    no-repeatで指定
     
  • 【背景画像の位置を指定】
    {background-position:横方向 縦方向;}
    <属性 style="background-position:横 縦;">

    横方向は
    • left … 左
    • right … 右
    • center …中央
    • % …パーセント
    • px …ピクセル指定
    • pt …ポイント

    縦方向は
    • top … 上
    • bottom … 下
    • center …中央
    • % …パーセント
    • px …ピクセル指定
    • pt …ポイント
     
  • 【背景を透過】
    {background:色; filter:Alpha(opacity=ココに数値);}
    <属性 style="background:色の指定; filter:Alpha(opacity=ココに数値);">
    filter:Alpha(opacity=1〜100の数値)で指定

    例えばテーブルを半透明にしたい場合は、要素をtable,tr,tdにします。  

border … 線の位置
要素{border-属性:太さ 色;}
<要素 style="border-属性:ココに指定;">
値をひとつだけ記述の場合は一括指定

    【要素】
    • div
    • span
    • p
    • table
    【属性】
    • top … 上
    • right … 右
    • bottom … 下
    • left … 左

border-color … 線の色の設定
要素{border-color: ココに値;}
要素{border-color:上の色,右の色,下の色,左の色;}
     カラーコードカラーネームtransparentで透明に
           値をひとつだけ記述の場合は一括指定

border-style … 線の種類
要素{border-style: ココに値;}
要素{border-style:上の色,右の色,下の色,左の色;}
soliddottedなど線の種類を記述。
値をひとつだけ記述の場合は一括指定
  • none; … デフォルト
  • hidden; … 線を表示しない
  • solid; … 実線
  • dotted; … 点線
  • double; … 二重線
  • dashed; … 破線
  • groove; … へこんだように見える線
  • ridge; … 浮き上がったように見える線
  • inset; … 内側がへこんだように見える線
  • outset; … 内側が浮き上がったように見える線
ページTOP
ひとつ前のページに戻る
C   D
clear … 回り込み解除
要素{clear:ココに値;}
  • left; … 対象が左側にある時の解除
  • right; … 対象が右側にある時の解除

color … 色の設定
要素{color:ココに値;}
要素には 【font】 【border】 など
  • 値はカラーコード及びカラーネームを参照して下さい
  display … 表示形式
要素{display:ココに値;}
  • none; … 非表示
  • block; … ブロックレベル要素として扱う
  • inline; … インラインレベル要素として扱う
  • list-item; … リスト項目用のボックスを生成

div … テキストや画像などをひとつのまとまりに設定
  • align … 表示位置の指定
  • style … スタイルシートを使って指定
ページTOP
ひとつ前のページに戻る
E   F
    filter:Alpha(opacity=50);  …半透明の設定
<font ココに属性="ココに値">
  • color … 色の指定 カラーコードカラーネーム
  • size … 大きさの指定 1〜7の数字
  • face … 種類の指定 フォント表参照
  • weight … 太さの指定 

<style="width:100%;filter:Shadow(color=影の色,direction=影の方向);  …影をつける
属性<style="width:100%;filter:Shadow(color=影の色,direction=影の方向);">
方向は上が『0』右は『90』下は『180』左は『270』で 時計回りの角度を指定します。
font …フォントの設定
<font ココに属性="ココに値">
  • 【色の指定】 カラーコードカラーネーム
    <font color="ココに色">
     
  • 【大きさの指定】 数字
    <font size="ココに値">
     
  • 【種類の指定】 フォント表参照
    <font face="ココに種類">
     
  • 【太さの指定】 pxnormalboldlighterなど
    <font weight="ココに太さの値">
     

font … フォントの指定
  • 【色の指定】 カラーコードカラーネーム
    {font-color:ココに色;}
    <font style="color:ココに色;">
     
  • 【大きさの指定】 pxptなど
    {font-size:ココに大きさ;}
    <font style="font-size:ココに大きさ;">
     
  • 【種類の指定】 フォント表参照
    {font-family:ココに種類;}
    <font style="font-family:ココに種類;">
     
  • 【スタイルの指定】 normalitalicobliqueなど
    {font-style:ココにスタイル;}
    <font style="font-style:ココにスタイル;>
     
  • 【太さの指定】 pxnormalboldlighterなど
    {font-weight:ココに太さの値;}
    <font style="font-weight:ココに太さの値;">
     
  • 【文字と文字の間隔指定】 pxptemで指定
    {font-letter-spacing:ココに値;}
    <font style="letter-spacing:ココに値;">
     
  • 【行間の指定】 pxpt%で指定
    {font-line-height:ココに値;}
    <font style="line-height:ココに値;">
     

float: … 回りこみ設定
要素{float:ココに属性;}
  • left … 対象の左側に回りこむ
  • right … 対象の右側に回りこむ
  • none … 回りこまない
要素…p,div,span,table,imgなど
frame … フレーム設定
<frameset><frame>〜</frame></frameset>
  • 【フレームの枠の太さ】
    <frame border="太さ">〜</frame>
    pxで指定(NSのみ対応)
     
  • 【フレームの名前】
    <frame name="任意の名前">〜</frame>
    好きな名前で指定
     
  • 【フレーム枠の有無】
    <frame frameborder="有無の指定">〜</frame>
    0(無)1(有)で指定(IEのみ対応)

    IEとNSの両方に対応するフレームの枠を制御する
    アトリビュートはないので
    常にborderとframeborderの両方を
    指定しないといけない。
     
  • 【上下のマージンの太さ】
    <frame marginheight="太さ">〜</frame>
    フレーム内でpxで指定
     
  • 【左右のマージンの太さ】
    <frame marginwidth="太さ">〜</frame>
    フレーム内でpxで指定
     
  • 【フレームのサイズ変更を禁止】
    <frame noresize>〜</frame>

    普段は枠が表示されている場合
    マウスで枠をクリックすると動かすことができる。
    ただし枠の幅が"0"だとリサイズはできない。
     
  • 【スクロールバーの有無】
    <frame scrolling="有無">〜</frame>
    yes(有)no(無)auto(自動)で指定
     
  • 【フレーム内で表示されるファイルの指定】
    <frame src="ファイルのURL">〜</frame>
    <frameset>を含んだhtml文書を指定すれば
    さらにフレーム内を分割できる。
     
  • 【追記】
    よく使うのは、borderframeborder
    両方内容は同じなのだが
    互換性の問題で両方指定する必要がある。
    フレームの境界線を消したいときは
    これを両方0にすればいい。
    フレームを利用するときの利点の一つに
    普通では指定できないページ内での
    上下左右に生じるマージンの幅が
    指定できるということが上げられる。
    marginheightmarginwidthを使えば
    マージンを0にしたり、
    逆にもっと幅を大きくしたりできる。
    尚、IEとNSとでは1ピクセルの誤差があるので注意。
     

frameset … フレーム設定
<frameset>〜</frameset>
  • 【縦にページを分割】
    <frameset cols="分割幅の指定">〜</frameset>
    各フレーム幅をpx%*で指定
    *を記述した場合は残り全部が指定される。
    cols="30px,*"→左30pxと残り全部が右となる
     
  • 【横にページを分割】
    <frameset rows="分割幅の指定">〜</frameset>
    各フレーム幅をpx%*で指定
    *を記述した場合は残り全部が指定される。
    rows="30px,*"→上30pxと残り全部が下となる
     
  • 【フレーム内スクロールバー】
    <frameset scrolling="スクロールバーの指定">〜</frameset>
    yesnoautoで指定
     
  • 【フレームの枠の太さ】
    <frameset border="太さ">〜</frameset>
    各フレーム幅をpxで指定(NSのみ対応)
     
  • 【フレーム枠の有無】
    <frameset frameborder="有無の指定">〜</frameset>
    0(無)1(有)で指定(IEのみ対応)

    IEとNSの両方に対応するフレームの枠を制御する
    アトリビュートはないので
    常にborderとframeborderの両方を
    指定しないといけない。
     
  • 【フレームの間隔】
    <frameset framespacing="間隔">〜</frameset>
    pxで指定
     
ページTOP
ひとつ前のページに戻る
G   H
    hr … ラインの設定
<hr>
  • 【ラインの長さ】
    <hr width="長さ">
    数値%で指定
     
  • 【ラインの太さ】
    <hr size="太さ">
    数値で指定
     
  • 【ラインの色の指定】
    <hr color="">
    カラーコードカラーネームで指定
     
ページTOP
ひとつ前のページに戻る
I   J
iframe … インラインフレーム設定
<iframe>〜</iframe>
  • 【インラインフレームの枠の太さ】
    <iframe border="太さ">〜</iframe>
    pxで指定
     
  • 【フレームの名前】
    <iframe name="任意の名前">〜</iframe>
    好きな名前で指定
     
  • 【境界線の有無】
    <iframe frameborder="有無の指定">〜</iframe>
    0(無)1(有)auto(自動)で指定
     
  • 【境界線の色】
    <iframe bodercolor="">〜</iframe>
    カラーコードカラーネームで指定
     
  • 【スクロールバーの有無】
    <iframe scrolling="有無">〜</iframe>
    yes(有)no(無)auto(自動)で指定
     
  • 【インラインフレーム内で表示されるファイルの指定】
    <iframe src="ファイルのURL">〜</iframe>

     
  • 【フレーム内の左右マージン】
    <iframe marginwidth="有無">〜</iframe>
    pxで指定
     
  • 【フレーム内の上下マージン】
    <iframe marginheight="有無">〜</iframe>
    pxで指定
     
  • 【テキストや画像の位置】
    <iframe align="位置">〜</iframe>
    topmiddlebottomleftrightで指定
     
   
ページTOP
ひとつ前のページに戻る
K   L
    letter-spacing … 文字と文字の間隔指定
要素{letter-spacing:ココに値;}

line-height … 行間の指定
要素{line-height:ココに値}
ページTOP
ひとつ前のページに戻る
M   N
margin … 外側の余白の設定
要素{margin:ココに値;}
数値のみpx%autoで指定
値をひとつだけ記述の場合は一括指定
  • 外側上部の余白
    {margin-top:ココに値;}
    <属性 style="margin-top:ココに値;">
     
  • 外側右部の余白
    {margin-right:ココに値;}
    <属性 style="margin-right:ココに値;">
     
  • 外側下部の余白
    {margin-bottom:ココに値;}
    <属性 style="margin-bottom:ココに値;">
     
  • 外側左部の余白
    {margin-left:ココに値;}
    <属性 style="margin-left:ココに値;">
     
  • 外側余白一括指定(全て同じ余白)
    {margin:ココに値;}
    <属性 style="margin:ココに値;">
     
  • 外側の余白一括指定(個別で指定)
    {margin:上 右 下 左;}
    <属性 style="margin:上 右 下 左;">
     
  • 外側の余白一括指定(左右と上下で指定)
    {margin:上下の値 左右の値;}
    <属性 style="margin:上下の値 左右の値;">
     

marquee … 自動スクロールの設定
<marquee>〜</marquee>
数値のみpx%autoで指定
値をひとつだけ記述の場合は一括指定
  • 【マーキーの幅 】
    <marquee width="">〜</marquee>
    px%で指定
     
  • 【マーキーの高さ】
    <marquee height="">〜</marquee>
    px%で指定
     
  • 【マーキーの左右の余白】
    <marquee hspace="">〜</marquee>
    pxで指定
     
  • 【マーキーの上下の余白】
    <marquee vspace="">〜</marquee>
    pxで指定
     
  • 【マーキーの動き方】
    <marquee behavior="ココに指定">〜</marquee>
    scrollalternateslideで指定
    • scroll = 横切る動作の繰り返し
    • alternate = 左右に行き来
    • slide = スクロールする範囲の片方で停止
     
  • 【スクロールの回数】
    <marquee loop="回数">〜</marquee>
    数字で指定
    何も記述しないとデフォルトで無限ループ
     
  • 【スクロールの時間】
    <marquee scrolldelay="秒数">〜</marquee>
    数字で指定
    単位は1/1000秒。デフォルトは85
     
  • 【再描写までの距離】
    <marquee scrollamount="距離">〜</marquee>
    pxで指定
     
  • 【マーキーの背景色】
    <marquee bgcolor="距離">〜</marquee>
    カラーコードpxで指定
     
   
ページTOP
ひとつ前のページに戻る
O   P
overflow … 表示しきれない部分の処理
要素{overflow:ココに属性;}
  • visible … 
  • hidden … 
  • scroll … 
  • auto … 
  padding … 内側の余白の設定
要素{padding:ココに値;}
数値のみpx%autoで指定
値をひとつだけ記述の場合は上下左右一括指定
  • 内側上部の余白
    {padding-top:ココに値;}
    <属性 style="padding-top:ココに値;">
     
  • 内側右部の余白
    {padding-right:ココに値;}
    <属性 style="padding-right:ココに値;">
     
  • 内側下部の余白
    {padding-bottom:ココに値;}
    <属性 style="padding-bottom:ココに値;">
     
  • 内側左部の余白
    {padding-left:ココに値;}
    <属性 style="padding-left:ココに値;">
     
  • 内側余白一括指定(全て同じ余白)
    {padding:ココに値;}
    <属性 style="padding:ココに値;">
     
  • 内側の余白一括指定(個別で指定)
    {padding:上 右 下 左;}
    <属性 style="padding:上 右 下 左;">
     
  • 内側の余白一括指定(左右と上下で指定)
    {padding:上下の値 左右の値;}
    <属性 style="padding:上下の値 左右の値;">
     

position … 位置の設定
要素{position:a;b;c;}
    aには
    • static = デフォルト
    • relative = 相対位置指定
    • absolute = 絶対位置指定
    • fixed = 絶対位置指定(スクロールしても移動しない)

    bには
    • top = 上
    • right = 右
    • bottom = 下
    • left = 左
    • z-index =

    cには
    • pxptで指定
ページTOP
ひとつ前のページに戻る
Q   R
     
ページTOP
ひとつ前のページに戻る
S   T
scrollbar … スクロールバーの設定
要素{scrollbar-ココに属性:ココに値;}

  • face-color
  • highlight-color
  • shadow-color
  • 3dlight-color
  • darkshadow-color
  • arrow-color
  • track-color
  • base

span … テキストや画像などをひとつのまとまりに設定
  • align … 表示位置の指定
  • style … スタイルシートを使って指定
  table … テーブルの設定
<table ココに属性>〜</table>
  • 【テーブル枠の幅】
    <table width="幅">〜</table>

    px%autoで指定
     
  • 【テーブル枠の高さ】
    <table height="幅">〜</table>

    px%autoで指定
     
  • 【テーブル枠の色(内)】
    <table bordercolor="色">〜</table>

    カラーコードカラーネームで指定
     
  • 【テーブル枠の色(外)】
    <table style="border-color:色;">〜</table>

    カラーコードカラーネームで指定
     
  • 【テーブルの枠の太さ(外、一括)】
    <table border="太さ">〜</table>

    pxで指定
     
  • 【テーブルの枠の太さ(外、個別)】
    <table style="border-width:上,右,下,左;">

    の順で数値で指定
     
  • 【テーブルの線の種類(外)】
    <table style="border-style:種類;">

    nonehiddensolidなどで指定

    線の種類
    • none … デフォルト
    • hidden … 線を表示しない
    • solid…実線
    • dotted … 点線
    • double … 二重線
    • dashed … 破線
    • groove … へこんだように見える線
    • ridge … 浮き上がったように見える線
    • inset … 内側がへこんで見える線
    • outset … 内側が浮き上がって見える線
     
  • 【テーブルの外枠の指定】
    <table frame="種類">〜</table>

    voidaboveboxなどで指定

    線の種類
    • void … 外枠なし
    • above … 上のみ
    • below … 下のみ
    • vsides … 左右のみ
    • lhs … 左のみ
    • box … 外枠全て
    • border … 四辺の縁取り
     
  • 【テーブルの内枠の太さ】
    <table cellspacing="太さ">

    pxで指定
     
  • 【セルの中身とセルの境界との距離】
    <table cellpadding="距離">

    pxで指定
     
  • 【テーブルの背景色】
    <table bgcolor="色">

    カラーコードカラーネームで指定
     
  • 【テーブルの背景に画像】
    <table background="画像のURL">

    画像ファイル名で指定
     
  • 【テーブル内の文字の種類】
    <table style="font-family:種類;">

    フォント表参照
     
  • 【テーブル内の文字の大きさ】
    <table style="font-size:大きさ;">

    1〜7の数値pxなどで指定
     
  • 【テーブル内の文字の色】
    <table style="color:色;">

    カラーコードカラーネーム
     
  • 【テーブルの表示位置】
    <属性 align="位置"><table>〜</table></属性>

    属性に範囲を指定するpdivspanが入ります

    <属性 style="位置"><table>〜</table></属性>

    属性に範囲を指定するpdivspanが入ります

    位置には"z-index:1; position:absolute; top:上からの位置; left:左からの位置;"のように
    スタイルシートを使っての詳細な指定ができます。
     
  • 【テーブルにタイトル】
    <table><caption>ココにタイトル</caption></table>

    <table><caption align="位置">ココにタイトル</caption></table>
    とすることで、タイトルの文字の位置を指定できます。
    位置にはleftcenterrightが入ります
     
  • 【テーブルに見出し】
    <table><th>ココに見出し</th></table>

    <table><th align="位置">ココに見出し</th></table>
    とすることで、タイトルの文字の位置を指定できます。
    位置にはleftcenterrightが入ります
     

tr … セルの設定
<tr ココに属性>〜</tr>
  • 【セルの幅】
    <tr width="幅">〜</tr>

    px%autoで指定
     
  • 【セルの高さ】
    <tr height="幅">〜</tr>

    px%autoで指定
     
  • 【境界線の太さ】
    <tr border="太さ">〜</tr>

    pxで指定
     
  • 【セルの背景色】
    <tr bgcolor="色">

    カラーコードカラーネームで指定
     
  • 【セルの背景に画像】
    <tr background="画像のURL">

    画像ファイル名で指定
     
  • 【セルの中身の表示位置(横位置)】
    <tr align="位置">

    leftcenterrightで指定
     
  • 【セルの中身の表示位置(縦位置)】
    <tr valign="位置">

    topbottommiddlebaselineで指定
     
  • 【セルが隣のセルと比べて何個分か】
    <tr rowspan="個数">

    数値で設定
     
  • 【セルが上下のセルと比べて何個分か】
    <tr colspan="個数">

    数値で設定

    上の行にセルが二個ある場合
    colspan="2" にすることで
    上の二個分の幅のセルができる。
    指定しないと幅一個分のセルと幅一個分の空欄ができる。
     
  • 【セル内の文の改行防止】
    <tr nowrap>
     

text … テキストの設定
{text-ココに属性;}
  • 【ラインを引く】
    要素{text-decoration:ココに属性;}
    <要素 style="text-decoration:ココに属性;">

    要素にはpdivなどが入ります
    属性にはunderlineoverlineなどが入ります
     
    • underline … テキストに下線
    • overline … テキストに上線
    • overline underline … テキストに上下線
    • line-through … テキストに取り消し線
    • none … 線なし
    • blank … 
  •  
  • 【インデントの指定】
    要素{text-indent:ココに値;}
    <要素 style="text-indent:ココに属性;">

    要素にはpdivなどが入ります
    属性にはpxptemなどが入ります
     
  • 【大文字小文字の指定】
    要素{text-transform:ココに属性;}
    <要素 style="text-transform:ココに属性;">

    要素にはpdivなどが入ります
    属性にはnonecapitalizeemなどが入ります
     
    • none … 
    • capitalize … 
    • owercase … 
    • uppercase … 
     

textarea … テキストエリアの設定
<textarea ココに属性>〜</textarea>
  • 【テキストエリアの幅】
    <textarea cols="幅">

    数字のみで指定します。(半角文字数)
     
  • 【テキストエリアの高さ】
    <textarea rows="高さ">

    カラーコードカラーネームで指定します
     
  • 【テキストエリアのフォントの色】
    <textarea style="color:色;">

    数字のみで指定します(行数)
     
  • 【テキストエリアのフォントのサイズ】
    <textarea style="font-size:大きさ;">

    pxptで指定します
     
  • 【テキストエリアのフォントの位置】
    <textarea style="text-align:位置;">

    leftcenterrightで指定します
     
  • 【テキストエリアのスクロールバーの指定】
    <textarea style="スクロールバーの指定;">

    カラーコードカラーネームで指定します
    • scrollbar-highlight-color:色;
    • scrollbar-highlight-color:色;
    • scrollbar-shadow-color:色;
    • scrollbar-3dlight-color:色;
    • scrollbar-arrow-color:色;
    • scrollbar-track-color:色;
    • scrollbar-darkshadow-color:色;
  •  
  • 【背景色の指定】
    <textarea style="background-color:色;">

    属性にはカラーコードカラーネームで指定
     
  • 【背景に画像の指定】
    <textarea style="background-image:画像のURL;">

    属性には画像ファイル名で指定
     
  • 【画像の表示位置指定】
    <textarea style="background-position:位置;">

    %で指定
     
  • 【背景画像の表示方法指定】
    <textarea style="background-表示方法;">

     
    • attachment:fixed; … 画像固定
    • repeat:repeat-x; … 画像を横に並べる
    • repeat:repeat-y; … 画像を縦に並べる
    • repeat:no-repeat; … 画像を一枚のみ
     

ページTOP

U   V
    valign … 縦方向の位置揃えを指定
<要素 valign="ココに属性">
  • top … 上に寄せて揃える
  • middle … 中央に寄せて揃える(デフォルト)
  • bottom … 下に寄せて揃える
  • baseline … 一行目のベースラインに寄せて揃える
visibility … 可視不可視を指定
要素{visibility:ココに属性;}
  • visible … 
  • hidden … 
  • collapse … 
ページTOP
ひとつ前のページに戻る
W   X
width … 横の長さ    
ページTOP
ひとつ前のページに戻る
Y   Z
     

ページTOP
ひとつ前のページに戻る


Design&Action