コミュニティセントラル
アカウントをお持ちでない場合
登録
コミュニティセントラル
登録
コミュニティセントラル
コミュニティセントラル
414
ページ
分類: 非推奨のenclose引数を使用しているページ、ヘルプ、編集、ソース編集
日本語

ヘルプ:ページのフォーマット/ウィキテキスト/CSS

< ヘルプ:ページのフォーマット‎ | ウィキテキスト
編集するにはログイン
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : w:de:Hilfe:Formatieren/Wikitext/CSS。理由 :英語版の元になったドイツ語版のページ更新

はじめに[]

インラインCSSとは、HTML要素に直接指定するCSSのことです。HTMLタグに続けて、style属性でスタイルを指定します (style="…") 。半角ダブルクオーテーション内に複数のCSSを指定することができ、HTML要素に囲まれた部分に適用されます。 ソースモードで編集すると、多くのHTMLタグを使用することができます。そのため、インラインCSSを使ってより高度なレイアウトを行うことができるようになります。段落の装飾には <div style="">…</div> タグを使い、単語や文には <span style="">…</span> タグを用います。また、インラインCSSを使って、テーブルをデザインすることもできます。（テーブルのデザインについては、ヘルプ:テーブル/ウィキテキストをご覧ください。）

構文例[]

次の例では、テキストの色（緑色）、および修飾（点滅）[1]を指定しています。 

<span style="color: green; text-decoration: blink;">…</span>

以下に、CSSの各属性ごとに指定できる値とその説明を示します。

テーブル[]

以下の属性は、テーブルのデザインによく使われますが、他の要素に使われることもあります。

枠線 (border)[]

枠線の太さ・線種・色[]

枠線の太さ・線種・色の３つは、"border" 属性にまとめて指定することができます。その場合、半角コロン (:) に続けて、太さ・線種・色の順に、半角スペースで区切って指定します。枠線の影の色は、指定した線種と色によって決められます。

<div style="border:___ … …;">…</div>
太さの値 説明
thin 細い線
medium 中程度の線 (このテーブルの枠線の太さ)
thick 太い線
__px 線の太さをピクセルで指定
<div style="border: … ___ …;">…</div>
線種の値 説明
none 線を表示しない
dotted 点線
dashed 波線
solid 実線
double 二重線 (このテーブルの枠線のスタイル)
groove 凹んだ線 (色によって見え方が異なります)
ridge 凸んだ線 (色によって見え方が異なります)
inset 凹んで見える囲み (色によって見え方が異なります)
outset 凸んでみえる囲み (色によって見え方が異なります)
<div style="border:… … ___;">…</div>
色の値 説明
___ 指定した色 (指定できる色はヘルプ:カラー参照)
transparent 透明 (このテーブルの枠線の色)

上下左右の枠線を異なったものにする場合には、それぞれ"border-top"、"border-bottom"、"border-left"、"border-right"を使います。

枠線の描画方法[]

{| style="border-collapse:___;"
…
|}
値 説明
collapse 重なり合わせて表示
separate 離して表示 (このテーブルの枠線の描画方法)
枠線の間隔[]

隣接するセルの境界線が離れている場合、その間隔 border-spacing で指定することができます。値を2つ指定した場合、記述した順に、左右、上下の間隔を指定します。

{| style="border-collapse:separate; border-spacing: ___ ___;"
…
|}
値 説明
__px 間隔をピクセルで指定
__em 間隔をその要素のフォントサイズで指定 (1em = 1文字分の長さ)
__ex 間隔をその要素の文字“x”の高さで指定 (1ex = アセンダおよびディセンダがない英字1文字の高さ)
空白セルの枠線表示[]

隣接するセルの境界線が離れている場合の、空白セルの枠線の表示・非表示を指定します。

{| style="border-collapse:separate; empty-cells: ___;"
…
|}
値 説明 例
show 空白セルで表示  
hide 空白セルで非表示

角を丸くする[]

border-radius では、スラッシュ (/) よりも前の4つの値で楕円の横半径、後の4つの値で楕円の縦半径を指定します。それぞれ、左上の角から時計回りに指定します。4つ目 (左下) を省略すると右上と、3つ目 (右下) を省略すると左上と、2つ目 (右上) を省略すると左上と同じ値になります。

<div style="border-radius: _ _ _ _ / _ _ _ _;">…</div>
<div style="border-radius: _;">…</div>
値 説明
__px ピクセル単位での半径
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
__% その要素の幅を基準に指定

マージン (外側の余白)[]

Margin では、4つの値でそれぞれ（時計回りに）上、右、下、左の外側の余白を指定します。4つ目 (左) を省略した場合は右と、3つ目 (下) を省略した場合は上と、2つ目 (右) を省略した場合は上と同じ値になります。

<div style="margin:_ _ _ _;">…</div>
値 説明
auto 自動 (この例を参照)
__px ピクセル単位での間隔
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
__% その要素の幅を基準に指定

margin-right:auto や margin-left:auto を指定した場合、テキストの回り込みや内側のコンテンツの位置を変更せずに、ボックスを左寄せや右寄せにすることができます。

パディング (内側の余白)[]

Paddingでは、4つの値でそれぞれ（時計回りに）上、右、下、左の内側の余白を指定します。(指定のしかたはマージンと同じです。)

<div style="border-collapse:separate; padding:_ _ _ _;">…</div>
値 説明
__px ピクセル単位での間隔 (この例では8px)
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
__% その要素の幅を基準に指定

横幅・高さ[]

"width" で要素の横幅、"height" で要素の高さを指定します。

<div style="width:___;">…</div>
値 説明
auto 自動 (初期値)
__px ピクセル単位での横幅
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
__% その要素の幅を基準に指定 (この例では90%)
<div style="height:___;">…</div>
値 説明
auto 自動 (初期値)
__px ピクセル単位での高さ (この例では270px)
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
__% その要素の幅を基準に指定

横幅・高さおよび max-height (高さの最大値を指定)、min-height (高さの最小値を指定)、max-width (幅の最大値を指定)、min-width (幅の最小値を指定) は、それぞれ横幅または高さのみを指定しても構いません。

はみ出た部分の表示方法[]

overflow は、ボックスの範囲内に内容が入りきらない場合、はみ出た部分をどのように表示するかを指定します。

<div style="overflow:___;">…</div>
値 説明
visible
領域をはみ出して表示 (初期値)
hidden
領域をはみ出した部分を表示しない
scroll
はみ出した部分をスクロールで表示
auto 必要に応じてスクロールで表示

表題の表示位置[]

{| style="caption-side:___;"
|+ »表題«
…
|}
値 説明
top 表の上に配置 (初期値)
bottom 表の下に配置 (この例を参照)

フロート（浮動化）[]

<div style="float:___;">…</div>
値 説明
none 回り込みをしない / 要素を移動しない (初期値)
right 右端に寄せ、後続の内容を左側に回り込ませる
left 左端に寄せ、後続の内容を右側に回り込ませる (この例を参照)

この例では、テーブルの後の内容を、テーブルの右側に回り込ませています。

Die Float-Eigenschaft schiebt das Element an den Rand und lässt darauf folgende Inline-Elemente wie etwa Text um das Element herumfließen.

影[]

Tabellen und Div-Abschnitte können mittels box-shadow einen Schatten schlagen. Die ersten beiden Werte (Position des Schattens nach rechts/unten) sind Pflicht, alle anderen können weggelassen werden.

<div style="box-shadow:___ ___ ___ ___ ___ ___;">…</div>
1～4の値
(1, 2は負の値も可)		 1, 2の説明 3の説明 4の説明
__px ピクセル単位での距離 ぼかしの距離 広がりの距離
__em フォントサイズに依る (1em = 1文字分の長さ)
__ex フォントサイズに依る (1ex = 小文字1文字分の高さ)
5の値 説明
___ 影の色の値 (指定できる色はヘルプ:カラー参照)
6の値 説明
inset (insetキーワードを指定した場合) 影を枠線の内側に描画

テキスト[]

文字色[]

<div style="color:___;">…</div>
値 説明
___ 文字色 (指定できる色はヘルプ:カラー参照)

文字サイズ[]

<div style="font-size:___;">…</div>
値 説明

xx-small
x-small
small
medium
large
x-large
xx-large

絶対サイズで指定 (この例では "large")
xx-small、x-small、small、medium、large、x-large、xx-largeの7段階で、初期値は "medium"。
__px ピクセル単位での文字サイズ ("20px")
__em フォントサイズに依る ("2em")
__ex フォントサイズに依る ("2ex")
__% フォントサイズに依る ("70%")

文字の間隔[]

<div style="letter-spacing:___;">…</div>
値 説明
normal 標準 (初期値)
__px ピクセル単位での文字間隔 ("2px")
__em フォントサイズに依る ("0.2em")
__ex フォントサイズに依る ("-0.08ex")

行の高さ[]

<div style="line-height:___;">…</div>
値 説明
normal 標準 (初期値)
__px ピクセル単位での行の高さ
("30px")
__em フォントサイズに依る
("1.7em")
__ex フォントサイズに依る
("1.7ex")
__% フォントサイズに依る
("166%")

水平方向の表示位置[]

<div style="text-align:___;">…</div>
値 説明
left 左寄せ
center 中央揃え
right 右寄せ
justify 両端揃え (均等割付)[2]

垂直方向の表示位置[]

<span style="vertical-align:___;">…</span>
値 説明
top 上端揃え
middle 中央揃え
bottom 下端揃え
super 上付き文字
sub 下付き文字
__px ピクセル単位で指定 （正の値は上方向、負の値は下方向に移動） ("40px")
__em フォントサイズに依る ("1.7em")
__ex フォントサイズに依る ("-3ex")

Mit vertical-align kann mehr als nur Text ausgerichtet werden.

１行目の字下げ (インデント)[]

<div style="text-indent:___;">…</div>
値 説明
__px ピクセル単位のインデント ("20px")
__em フォントサイズに依る ("1.2em")
__ex フォントサイズに依る ("1ex")
__% 親要素の幅に依る ("25%")

文字の書式 (スタイル)[]

<div style="font-style:___;">…</div>
値 説明
normal 標準 (初期値)
italic イタリック体
oblique 斜体

文字の太さ[]

<div style="font-weight:___;">…</div>
値 説明
normal 標準 (初期値)
bold 太字
bolder 一段階太くする
lighter 一段階細くする

大文字表記[]

<div style="font-variant:___;">…</div>
値 説明
normal 標準のフォントで表示 (初期値)
Font variant
small-caps 小文字をすべて、小さめの大文字 (スモールキャピタル) に変換
Font variant

大文字と小文字の変換[]

<div style="text-transform:___;">…</div>
値 説明
lowercase 全ての文字を小文字に変換
capitalize 単語の先頭文字を大文字に変換
uppercase 全ての文字を大文字に変換

文字の装飾[]

<div style="text-decoration:___;">…</div>
値 説明
none 装飾なし (初期値)
underline 下線
overline 上線
line-through 打ち消し線
blink 文字を点滅させる

文字の影[]

Die ersten beiden Werte (Position des Schattens nach rechts, unten) sind Pflicht, alle anderen können weggelassen werden.

<div style="text-shadow:___ ___ ___ ___;">…</div>
1～3の値
(1, 2は負の値も可)		 1, 2の説明 3の説明
__px ピクセル単位での位置 影をぼかす半径
__em フォントサイズに依る
__ex フォントサイズに依る
4の値 説明
___ 影の色 (指定できる色はヘルプ:カラー参照)

フォント[]

<span style="font-family:'Times New Roman',Georgia,Serif;">…</span>

An das Font-family-Attribut lassen sich eine Liste von Schriftarten übergeben, von denen der Internetbrowser die erste verfügbare für den umschlossenen Text nutzt. Als treffsichere Alternative kann zuletzt immer eine generische Gruppenbezeichnung wie serif oder sans-serif benutzt werden.

日本語のフォント[]

日本語のフォント指定について、Re Simple inc. の CSSフォント指定を考える2015より、以下に一例を提示します。

ゴシック書体
<span style="font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;">…</span>
明朝書体
<span style="font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3″, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;">…</span>

背景色[]

<div style="background-color:___;">…</div>
値 説明
transparent 透明 (初期値)
___ 背景色 (指定できる色はヘルプ:カラー参照)

箇条書き[]

Listen lassen sich mit der Eigenschaft list-style gestalten, welche bis zu drei Werte annimmt: Typ und Position der Listenpunkte, sowie eine URL zu einer Grafikdatei, die als Listenpunkt verwendet werden soll (in dieser Reihenfolge).

Inline-CSS bei Listen kann nur mit purem HTML (ヘルプ:リスト) benutzt werden.

<ol style="list-style:_ … …;"><li>…</li><li>…</li>…</ol>
種類の値 説明
none 表示しない
disc 黒丸 (●)
circle 白丸 (○)
square 黒四角 (■)
decimal 数字 (1, 2, 3...)
decimal-leading-zero 0付き数字 (01, 02, 03...)
upper-latin 大文字ラテン文字 (A, B, C...)
lower-latin 小文字ラテン文字 (a, b, c...)
upper-roman 大文字ローマ数字 (I, II, III...)
upper-roman 小文字ローマ数字 (I, II, III...)
<ol style="list-style:… _ …;"><li>…</li><li>…</li>…</ol>
位置の値 説明
inside マーカーを文章と同じインデント位置に表示
outside マーカーを文章よりも左側の位置に表示 (箇条書きの文章の先頭が他の文章の先頭と揃う) (初期値)
<ol style="list-style:… … _;"><li>…</li><li>…</li>…</ol>
画像の値 説明
none 画像を使用しない (初期値)
url('___') マーカーの画像を指定

輪郭線 (アウトライン)[]

Die Eigenschaft outline setzt einen Rahmen außen um das Objekt (also auch um den Außenabstand herum). Outline wird genauso gesetzt wie border.

透明[]

<div style="opacity:___;">…</div>
値 説明
___ 透明度を 0.0 (透明) ～1.0 (不透明) の数値で指定 (この例では0.4)

テキストの回り込みを解除[]

… oder ähnliche Inline-Elemente.

<div style="clear:___;">…</div>
値 説明
none 解除しない
right 右側のみ解除
left 左側のみ解除
both 左右両方解除

Diese Eigenschaft wird gerne in <br style="clear:both;" /> am Ende eines Abschnittes benutzt, um zu verhindern, dass von unten nichts nach oben reinrutscht.

要素の表示・非表示[]

<div style="visibility:___;">…</div>
値 説明
visible 表示 (初期値)
hidden 非表示 (要素の領域はそのまま)

要素の表示形式[]

<div style="display:___;">…</div>
値 説明
none 表示しない (領域そのものを生成しない)
inline インラインボックスとして表示 (テキスト中の画像のように表示) (初期値)
block ブロックボックスとして表示 (中心に置かれた画像のように改行して表示)

脚注[]

  1. ↑ 点滅 (blink) は、Firefox・Operaの過去のバージョンではサポートされていましたが、現在主要なブラウザでサポートを外されており動作しません。
  2. ↑ 2015年8月現在ほとんどのブラウザでサポートされていません。

関連情報[]

リンク[]

フォント拡張[]

注: フォントファイルのアップロードには、別途申請が必要です。

ウィキテキストに関するヘルプページ

ウィキテキストとは

テキスト関連： テキスト・署名  •  リスト  •  リンク  •  HTMLタグ
ページ全体： テーブル  •  インフォボックス  •  メインページのカラムタグ  •  テンプレート  •  テンプレートの置換  •  リダイレクト  •  マジックワード
画像関連： 画像  •  ギャラリー・スライドショー・スライダー

スタイリング： CSSを利用したスタイリング

その他のヘルプとフィードバック[]

Deutsch Português Русский Українська
特に記載のない限り、コミュニティのコンテンツはCC-BY-SAライセンスの下で利用可能です。