トップ > スッキリかんたんスタイルシート


ショップへ
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
まず始めに,個別に指定する方法と,まとめて指定する方法について解説します。

このボックスは,枠線の太さを個別に指定しています。
記述は,ちょっと煩雑です。

このボックスは,枠線の太さをまとめて指定しています。
値の順番(2px 10px 20px 3px)は,top right bottom left

>>> HTMLソース
border-width 枠線の太さの上下左右をまとめて指定する
border-width:2px ←上下左右すべてが2px
border-width:2px 10px ←上下が2px 左右が10px
border-width:2px 10px 20px ←上が2px 左右が10px 下が20px
border-width:2px 10px 20px 2px ←上が2px 右が10px 下が20px 左が2px
>>> HTMLソース
枠線の太さを利用した見出しのパターン
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
margin マージンを割合で指定する

マージンを割合で指定する
「preview」から,新しいブラウザでこのファイルを開き, ブラウザの大きさを変えてみると割合で指定する意味が分かります。

>>> HTMLソース
ウィンドウと要素の余白をなくす

ウィンドウと要素の余白をなくす
ウィンドウと要素の余白をなくすには,body要素の値を0に設定します。 p要素のマージンの値を0に設定しても,ウィンドウと要素の余白はなくなりません。

>>> HTMLソース
ブロックをセンタリングする

ブロックをセンタリングする
margin-leftとmargin-rightにautoの値を指定する。

>>> HTMLソース
padding タイトルと段落のデザイン

Yahoo!ウェブホスティング

Yahoo! JAPANの提供するレンタルサーバーサービス「Yahoo!ウェブホスティング ライト・コース」のご案内です。7月にスタートした月額980円のライトコースは、容量100MB・メールアドレス5個で、ドメイン(gTLDドメイン:.com/.net/.info/.org/.biz)取得無料、初月無料で提供しているサービスです。

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
border-style 枠線の種類 太さは指定しない

solid:1本線で表示する。

double:2本線で表示する。

groove:へこんで見えるように表示する。

ridge:飛び出して見えるように表示する。

inset:枠線の内側がへこんで見えるように表示する。

outset:枠線の内側が飛び出して見えるように表示する。

dashed:波線で表示する。(WinIE5.5以下は未対応)

dotted:点線で表示する。(WinIE5.5以下は未対応)

>>> HTMLソース
枠線の種類をまとめて指定する

border-style:dashed → border-style:上下左右

border-style:dashed doubl → border-style:上下 左右

border-style:dashed double solid → border-style:上 左右 下

border-style:dashed double solid groove → border-style:上 左 右 下

>>> HTMLソース
border-color 枠線の色を指定する

border-color:#ff3366

border-color:#99cc00

border-color:#AE0000

border-color:#008040

>>> HTMLソース
画像に枠線を指定する
>>> HTMLソース
枠線を活用したページデザイン

iTunes 6 Mac + Windows

iTunesは、コンピュータで音楽を整理、共有、聴くための一番簡単な方法です。新しいお気に入りを見つけたり、ますます充実するライブラリを整理できます。また、iTunesはiPodのベストフレンド。MacまたはWindowsに対応する iTunes 6を無料でダウンロードしましょう。
耳に残るあの曲。いますぐiTunesでダウンロードしよう。

>>> HTMLソース
枠線を活用したロールオーバー1

>>> HTMLソース
枠線を活用したロールオーバー2

>>> HTMLソース
width 要素の幅を指定する

width:8em

width:80%

width:80px

width:auto

>>> HTMLソース
height 要素の高さを指定する

height:2em

height:100%

height:50px

height:auto

>>> HTMLソース
要素の高さを指定する
china china china
このファイルは標準準拠モードなので,60%に指定した画像がうまく表示されていません。[Preview]でご覧ください。
>>> HTMLソース
消耗品 >>> インク

つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
Copyright(C)1997. itoben style. All Rights Reserved.