CSS共通ルールの編集

#norelated
* CSSの共通ルール（MSGオリジナル） [#uadbd495]

#contents

&br;
&br;

* ブロック関連 [#e9ac89b1]
**.relative [#g8eec882]

適用タグを強制的に「relative」化（position: relative;）

&br;

**.block [#l563d853]

適用タグを強制的にブロック化（display: block;）

&br;

**.inline-block [#t25222e2]

適用タグを強制的にインラインブロック化（display: inline-block;）

&br;

**.pt-0 [#jbcb65ac]

適用タグの上余白(padding-top) を強制的に打ち消し(0px)

&br;

**.pb-0 [#r66cf68d]

適用タグの下余白(padding-bottom) を強制的に打ち消し(0px)

&br;

**.space　 .space-half [#t2cafef9]

適用タグに余白(padding-top) を入れる。
※単独で使用することで、行間に大きめの余白を入れることができる。

&br;

**.block-box [#h7f6eea4]

適用タグの上下に大幅な余白を入れる。
※主には、コンテンツ内のブロック分けで使用。
※pt-0、またはpb-0を組み合わせることで、上(または下)のみに大幅な余白入れることができる。

&br;
&br;

* テキスト関連 [#z2c4ed3c]
**.font-(-3～0～7) [#qb7b45ed]

&br;

**.bold [#i003109e]

適用タグ内のテキストを太字に設定。

&br;

**.bold-off [#tdbf1099]

適用タグ内のテキストの太字を解除。
※SEO的に使用するタグでインライン要素を太字にしたくない場合などに使用。

&br;

**.mincho [#icfdc5de]

適用タグ内のテキストを明朝体に設定。

&br;

**.tAc　 .tAl　 .tAr [#u2a1513e]

適用タグ内のインライン要素をセンタリング(.tAc)、左寄せ(.tAl)、右寄せ(.tAr)に設定。
※スマホの場合は無効。

&br;

**.xtAc　 .xtAl　 .xtAr [#l140cd25]

適用タグ内テキストをセンタリング(.xtAc)、左寄せ(.xtAl)、右寄せ(.xtAr)に設定。
※端末にかかわらず常時有効。

&br;
&br;

* その他 [#h9621747]
**.remove [#x1fede97]

（例えばSEO対策用に）テキスト要素を疑似画像化する場合の共通クラスとして使用。

>.remove {
>>position: relative; &color(#bbbbbb){/* 要素のrelative化 */};
>>overflow: hidden; &color(#bbbbbb){/* はみ出し要素を非表示 */};
>>display: block; &color(#bbbbbb){/* 要素をブロック化 */};
>>width: 100%; &color(#bbbbbb){/* 横幅を親要素いっぱいに */};
>>height: 0; &color(#bbbbbb){/* 高さを無効（個別にpadding-topを指定することで、親要素に合わせた等倍拡大縮小が可能） */};
>>font-size: 0.5em; &color(#bbbbbb){/* フォントサイズを極小に（0pxだとスパム判定になるのでこの数値） */};
>>text-align: left; &color(#bbbbbb){/* テキストを左寄せ */};
>>text-indent: -9999px; &color(#bbbbbb){/* テキストを要素外に飛ばす */};
>>background-position: center; &color(#bbbbbb){/* 背景を中央合わせ */};
>>background-repeat: no-repeat; &color(#bbbbbb){/* 背景の繰り返しなし */};
>>background-size: cover; &color(#bbbbbb){/* 縦横比はそのままで、領域いっぱいに背景を描画 */};
>}

>※上記プロパティを要素ごとに個別に指定する必要がない。

&br;

''使用例''

>↓html
><a href="http://kurabiz.jp/" id="''test''" class="relative block">
>>''SEO対策用の隠しテキスト''
></a>

&br;

>↓CSS
>#test { width: 300px; }
>#test > span {
>>padding-top: 75%; &color(#bbbbbb){/* 4:3の比率 */};
>>background-image: url(../img/logo.png);
>}

>>※各要素ごとに余白値と背景画像を設定するだけ。

&br;
&br;

// ** 練習ページ [#g714653c]
// - [[SandBox]] -- 編集をお試しください
// - [[InterWikiSandBox]] -- [[InterWiki]]を試してみてください

// ** PukiWikiについて [#f791a2e6]

// - [[PukiWiki]] -- PukiWikiのご紹介

// *** ドキュメント [#d61761aa]
// - [[ヘルプ>Help]] -- PukiWikiで編集するには？
// - [[テキスト整形のルール(詳細版)>FormattingRules]]
// - [[プラグインマニュアル>PukiWiki/1.4/Manual/Plugin]]
&br;
RIGHT:&edit(CSS共通ルール){このページを編集};

タイムスタンプを変更しない

#norelated
* CSSの共通ルール（MSGオリジナル） [#uadbd495]

#contents

&br;
&br;

* ブロック関連 [#e9ac89b1]
**.relative [#g8eec882]

適用タグを強制的に「relative」化（position: relative;）

&br;

**.block [#l563d853]

適用タグを強制的にブロック化（display: block;）

&br;

**.inline-block [#t25222e2]

適用タグを強制的にインラインブロック化（display: inline-block;）

&br;

**.pt-0 [#jbcb65ac]

適用タグの上余白(padding-top) を強制的に打ち消し(0px)

&br;

**.pb-0 [#r66cf68d]

適用タグの下余白(padding-bottom) を強制的に打ち消し(0px)

&br;

**.space　 .space-half [#t2cafef9]

適用タグに余白(padding-top) を入れる。
※単独で使用することで、行間に大きめの余白を入れることができる。

&br;

**.block-box [#h7f6eea4]

&br;
&br;

* テキスト関連 [#z2c4ed3c]
**.font-(-3～0～7) [#qb7b45ed]

&br;

**.bold [#i003109e]

適用タグ内のテキストを太字に設定。

&br;

**.bold-off [#tdbf1099]

適用タグ内のテキストの太字を解除。
※SEO的に使用するタグでインライン要素を太字にしたくない場合などに使用。

&br;

**.mincho [#icfdc5de]

適用タグ内のテキストを明朝体に設定。

&br;

**.tAc　 .tAl　 .tAr [#u2a1513e]

適用タグ内のインライン要素をセンタリング(.tAc)、左寄せ(.tAl)、右寄せ(.tAr)に設定。
※スマホの場合は無効。

&br;

**.xtAc　 .xtAl　 .xtAr [#l140cd25]

適用タグ内テキストをセンタリング(.xtAc)、左寄せ(.xtAl)、右寄せ(.xtAr)に設定。
※端末にかかわらず常時有効。

&br;
&br;

* その他 [#h9621747]
**.remove [#x1fede97]

（例えばSEO対策用に）テキスト要素を疑似画像化する場合の共通クラスとして使用。

>※上記プロパティを要素ごとに個別に指定する必要がない。

&br;

''使用例''

>↓html
><a href="http://kurabiz.jp/" id="''test''" class="relative block">
>>''SEO対策用の隠しテキスト''
></a>

&br;

>↓CSS
>#test { width: 300px; }
>#test > span {
>>padding-top: 75%; &color(#bbbbbb){/* 4:3の比率 */};
>>background-image: url(../img/logo.png);
>}

>>※各要素ごとに余白値と背景画像を設定するだけ。

&br;
&br;

// ** 練習ページ [#g714653c]
// - [[SandBox]] -- 編集をお試しください
// - [[InterWikiSandBox]] -- [[InterWiki]]を試してみてください

// ** PukiWikiについて [#f791a2e6]

// - [[PukiWiki]] -- PukiWikiのご紹介

テキスト整形のルールを表示する

CSS共通ルール の編集

CSS共通ルールの編集