サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
css.eweb-design.com
禁則処理を、PタグやDIVタグなどに指定します。 禁則処理とは、「ぁぃぅぇぉっ」などの小文字や「ー」などが行の先頭に来ないようにすることです。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- P { line-break: normal } /* 通常の禁則処理を適用する */ DIV { line-break: strict } /* 厳密な禁則処理を適用する */ --> </STYL
TABLE { border-collapse: collapse; border-style: solid; /* 枠の種類 */ border-color: #666699; /* 枠の色 */ border-width: 1px; /* 枠の幅 */ } TH { color: #ffffff; /* 文字の色 */ background-color: #99cc99; /* 背景の色 */ border-style: solid; /* 枠の種類 */ border-color: #666699; /* 枠の色 */ border-width: 1px 0px; /* 枠の幅 */ } TD { color: #ffffff; /* 文字の色 */ background-color: #9999cc; /* 背景の色 */ border-style:
要素の位置を指定します。 あらかじめ「position」を用いて配置方法を決定しておく必要があります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .tp { position: absolute; /* 絶対位置で指定(親ボックス基準) */ top: 100px; /* 上から100px */ } .tl {
H1 { color: #000099; /* 文字の色 */ } H2 { color: #000099; /* 文字の色 */ } H3 { color: #000099; /* 文字の色 */ } H1 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-height: 130%; /* 行の高さ */ } H2 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-height: 130%; /* 行の高さ */ } H3 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-h
背景画像を固定します。 画面をスクロールしても背景画像は止まったままになります。 通常は、BODYタグにのみ使用します。 ブラウザによっては正常に動作しない場合があります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("img/sbgi06.gif"); /* 全体の背景画像 */ background-repeat: no-
縦方向の位置関係を、BODYタグやDIVタグなどに指定します。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .tp { vertical-align: top } /* 上に揃える */ .md { vertical-align: middle } /* 中心に揃える */ .bt { vertical-alig
フォントサイズを、BODYタグやTABLEタグなどに指定します。 ほぼ全てのタグに適用することが可能です。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { font-size: medium } /* 標準 */ .xs { font-size: xx-small } /* 小2 */ .xm { font-size: x-
サンプルを別ウィンドウで開いて、ブラウザの印刷プレビューを見てください。 ２ページにわたって表示されていたら正常に動作しています。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .break { page-break-before: always; } --> </STYLE> </HEAD> <BODY> <DIV> サンプルサン
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 → 押したらへこむリンクボタン A { display: block; /* ブロック要素にする */ width: 80px; /* 横幅 */ color: #ffffff; background-color: #666699; /* 背景色 */ border: outset 2px #9999cc; /* 枠の色 */ margin: 0px; padding: 3px 1px 1px 0px; font-size: 12px; /* フォントサイズ */ line
フォーム入力時に、テキスト領域などにフォーカスすると、自動的に全角モードまたは半角モードに切り替えます。 ただし、Internet Explorer5.0↑で有効になります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .txtmode1 { ime-mode: active; /* 全角モード */ } .txtmode2 {
スタイルシートの継承について スタイルシートでは、その設定が親要素から子要素に引き継がれるものがあります。 例えば、<BODY>要素の文字色を赤に設定した場合、<BODY>要素の子要素にあたる<P>要素の文字も<BODY>要素の設定が引き継がれて赤になります。 属性に「inherit」を指定すると、通常は継承を行わない属性でも、強制的に継承させることができます 継承される値が相対値の場合は、絶対値に変換された値が継承されます。 継承を行う属性
テキストや画像にグラデーションをかけます。 ただし、画像の場合は透過部分に、テキストの場合は背景部分にかかります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- /* 赤〜緑 */ .ft0 { filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffff000
マウスカーソルの形を変更します。 BODYタグに指定すると、全体のマウスカーソルを変更することができます。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { cursor: move } /* 移動可能 */ .cr { cursor: crosshair } /* 十字 */ .hd { cursor: hand }
要素の表示・非表示を設定します。 ページのレイアウトは、非表示にしても表示した場合と同じになります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .vb { visibility: visible; } /* 表示する */ .hd { visibility: hidden; } /* 表示しない */ --> </STYLE>
外部スクリプトファイル(HTML Component、拡張子.htc)を読み込んで実行させます。 外部スクリプトファイルは、JavaScriptまたはVBScriptで、<SCRIPT>〜</SCRIPT>の間に記述します。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .beh { behavior: url('s0814.htc'); }
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 → 枠を表示 H1 { color: #333399; /* 文字の色 */ background-image: url("img/i1404a.gif"); /* 画像の指定 */ border-style: double; /* 枠の種類 */ border-color: #6666ff; /* 枠の色 */ border-width: 4px; /* 枠の幅 */ line-height: 120%; /* 行の高さ */ text-align: center; /* テキストの配置 */ } H2 { color: #33339
解説 スタイルシートは、外部ファイル(拡張子.css)から呼び出すことができます。 各ページ内に外部ファイルを呼び出す記述を書き、そのスタイルを適用します。 外部ファイルのスタイルを変更するだけで、サイト内のスタイルを全て変更することができ、大規模サイトの制作には欠かせないものになります。 外部ファイルの書き方は、「ページ全体に適用」の場合と全く同じです。 外部ファイルの読み込みは、HEADタグ内に必ず配置し、複数の外部ファイルを読み込むことも可能です。 このサイトも、この方法でスタイルシートを適用しています。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → サンプル <HTML> <HEAD> <TITLE><
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 注意：Internet Explorer5.5以上での動作になります。 → グラデーションをかける１ HR { color: #009900; /* 線の色(IE用) */ background-color: #009900; /* 線の色(NN用) */ height: 3px; /* 線の太さ */ border: 0px; /* 枠の太さ */ filter: Alpha(opacity=100, finishopacity=0, style=1); /* フィルタ */ } 他のサンプルの指定方法はこちらをご覧ください。 filte
TH { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景の色 */ border-style: solid; /* 枠の種類 */ border-color: #9999cc #333366 #333366 #9999cc; /* 枠の色 */ border-width: 1px; /* 枠の幅 */ } TD { color: #ffffff; /* 文字の色 */ background-color: #9999cc; /* 背景の色 */ border-style: solid; /* 枠の種類 */ border-color: #ccccff #666699 #666699 #ccccff; /* 枠の色 */ border-width: 1px; /* 枠の幅 */ }
フォントの種類を、BODYタグやTABLEタグなどに指定します。 ほぼ全てのタグに適用することが可能です。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { font-family: sans-serif } /* ゴシック系フォント */ .sr { font-family: ser
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 → 左枠を表示 H1 { color: #000099; /* 文字の色 */ border-left-color: #cc6666; /* 左枠の色 */ padding: 5px 0px 0px 10px; /* 余白の幅 */ border-style: solid; /* 枠の種類 */ border-width: 0px 0px 0px 20px; /* 枠の幅 */ } H2 { color: #000099; /* 文字の色 */ border-left-color: #cc6666; /* 左枠の色 */ padding
スクロールバー付きのボックスを設定します。 PタグやDIVタグなどに指定します。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .scr { overflow: scroll; /* スクロール表示 */ width: 100px; height: 100px; background-color: red; } .vsb {
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 使い方：→ ページ全体に適用 → 別ファイルから適用 → 二重線にする HR { color: #ffff00; /* 線の色(IE用) */ background-color: #ffff00; /* 線の色(NN用) */ height: 8px; /* 線の太さ */ border: 3px; /* 枠の太さ */ border-color: #0000ff; /* 枠の色 */ border-style: double; /* 枠の種類 */ }
スタイルシートは、見栄えやレイアウトなどの表示に関する指定を行うものです。スタイルシートを用いるとHTMLだけでは表現できない様々なデザインが可能になります。 サンプルソースはご自由にカスタマイズなどをしてお使いください。
このページを最初にブックマークしてみませんか？
『スタイルシートサンプル CSS Samples - eWeb』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
