|
JavaScriptでスタイルを変更する
|
|
--- 書いて試せるホームページ制作講座 ---
|
JavaScriptでスタイルを変更する
このページの使い方
上のタブで項目を開き「ソースを実行」ボタンをクリックしてください。各項目の四角い枠内は編集可能で、書き直したソースが「ソースを実行」ボタンでＷｅｂページとして開かれます。なお、ソースは<BODY>から</BODY>の間だけを記述してしても実行されます。
このページのコンセプト
JavaScriptを使ってスタイルを変更する方法は色々ありますが、このページではＤＯＭを使い
document.getElementById("固有のＩＤ").style.スタイル要素=変更後の値;
の形式を使用します。また、スタイル要素でtext-alignなど-があるものはJavaScriptではtextAlignと表記します。
各項目の四角い枠内を変更し、「ソースを実行」ボタンをクリックして、変更結果をお試しください。
頻繁に使うスタイル一覧
文章全般
- ・ color:
- 文字の色をカラーナンバーまたは色名
- ・ text-align:
- 文字の左寄せ右寄せセンタリングをleft,right,center,justifyで指定
- ・ text-decoration:
- 文字のアンダーライン、打消し線等をnone,underline,overline,line-through,blinkで
- ・ line-height:
- 行の高さ（行間）
- ・ letter-spacing:
- 文字間の幅
- ・ text-transform:
- 大文字小文字の指定をnone,capitalize,lowercase,uppercaseで
- ・ text-indent:
- テキストの一行目のインデント幅を数値＋単位（省略はpx）で
ＢＯＸの形状と装飾
- ・ width:
- ボックスの横幅を数値＋単位（省略はpx）、％値、autoで
- ・ height:
- ボックスの縦幅を数値＋単位（省略はpx）、％値、autoで
- ・ margin-top,margin-bottom,margin-left,margin-right:
- 上下左右のマージンを数値＋単位（省略はpx）、％値、autoで
- ・ margin:
- マージンの一括指定で必要な値をスペースで区切って指定
- ・ padding-top,padding-bottom,padding-left,padding-right:
- 上下左右のパディングを数値＋単位（省略はpx）、％値、autoで
- ・ padding:
- パディングの一括指定で必要な値をスペースで区切って指定
- ・ border-top-color,border-bottom-color,border-left-color,border-right-color:
- 上下左右のボーダー色をカラーナンバー、色名、transparent（透明）で
- ・ border-color:
- ボーダー色の一括指定で必要な値をスペースで区切って指定
- ・ border-top-width,border-bottom-width,border-left-width,border-right-width:
- 上下左右のボーダーの太さを数値＋単位（省略はpx）またはthin,medium,thickで
- ・ border-width:
- ボーダーの太さの一括指定で必要な値をスペースで区切って指定
- ・ border-top-style,border-bottom-style,border-left-style,border-right-style:
- 上下左右のボーダーの形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで
- ・ border-style:
- ボックスの枠線の形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで
- ・ border-top,border-bottom,border-left,border-right:
- 上下左右のそれぞれのボーダーの色、太さ、形式を設定
- ・ border:
- ボックスの上下左右ボーダーの色、太さ、形式一括指定で、必要な値をスペースで区切って指定
表示形式と位置
- ・ display:
- 要素の表示形式をnone,block,inlineで
- ・ position:
- top、left、z-indexなどの指定方法をstatic、relative、absolute、fixedで
- ・ top,bottom,left,right:
- 上下左右からの位置を数値＋単位（省略はpx）、％値、autoで
- ・ z-index:
- 奥行きを数値＋単位（省略はpx）、autoで
- ・ float:
- 文字の回り込みの設定をleft,right,noneで
- ・ clear:
- 文字の回り込みを解除をleft,rightで
- ・ overflow:
- 表示しきれない部分の処理をvisible,hidden,scroll,autoで
- ・ visibility:
- 可視不可視をvisible,hidden,collapseで
- ・ clip:
- 表示する範囲をrect(上辺,右辺,下辺,左辺) で指定（左上からのピクセル値）position:absoluteと併用して使用
フォント（文字）
- ・ font-family:
- フォント名、「,」で区切って複数指定可能、font-family: "ＭＳ Ｐ明朝";など
- ・ font-size:
- フォントサイズを数値＋単位（省略はpx）で指定
- ・ font-weight:
- フォントの太さを数値＋単位（省略はpx）やnormal,bold,lighter,bolderなどで指定
- ・ font-style:
- フォントのスタイルをnormal,italic,obliqueなどで指定
- ・ font-variant:
- フォントの小文字を大文字にする
- ・ font:
- フォントの一括指定で必要な値をスペースで区切って指定
要素の背景
- ・ background-color:
- 背景色をカラーナンバー、色名、transparent（透明）で
- ・ background-image:
- 背景画像をurl()関数で画像URIを指定background-image:url("〜.jpg");など
- ・ background-repeat:
- 背景画像のリピート方法repeat（全面）repeat-x(横）repeat-y（縦）no-repeat（一つ）
- ・ background-position:
- 背景画像の開始位置left,right,top,bottom,center、または数値か％値で横方向値と縦方向値を空白で区切る
- ・ background-attachment:
- 背景画像のスクロール方法をfixed（固定）、scroll（スクロール）
- ・ background:
- 背景の一括指定で必要な値をスペースで区切って指定
表の仕様
- ・ table-layout:
- テーブルの表示方法をfixedかautoで
- ・ border-collapse:
- セルのボーダーの表示方法をcollapseかseparateで
- ・ border-spacing:
- セルのボーダーの上下左右の間隔を数値＋単位（省略はpx）で
- ・ vertical-align:
- インライン要素やTH、TD要素の表示される行の中での縦方向の位置
リストの仕様
- ・ list-style-image:
- リストの見出し画像をurl()関数で画像URIを指定list-style-image:url("〜.jpg");など
- ・ list-style-position:
- リスト項目の二行目以降のインデントをoutside,insideで
- ・ list-style:
- リストの一括指定で必要な値をスペースで区切って指定
カーソル
- ・ cursor:
- カーソルの形状をcrosshair（十字型）pointer（リンク）move（移動）text（l）wait（砂時計）他で