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-b...
&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]
適用タグ内のテキストのフォントサイズを(親要素に対する)相...
|>|CENTER:|CENTER:70|CENTER:70|CENTER:70|CENTER:BGCOLOR(#...
|>|~ |~.font--3|~.font--2|~.font--1|~.font-0|~.font-1|~.f...
|>|LEFT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:BGCOLOR(#bbddff):|RIG...
|>|~設定値（相対）|BGCOLOR(#ffffff):0.625em|BGCOLOR(#ffff...
|~相当値(約)|~親要素が16pxの場合|10px|12px|14px|16px|18px...
|~|~ 〃 が24pxの場合|15px|18px|21px|24px|27px|31px|36px...
&br;
**.bold [#i003109e]
適用タグ内のテキストを太字に設定。
&br;
**.bold-off [#tdbf1099]
適用タグ内のテキストの太字を解除。
※SEO的に使用する<strong>タグでインライン要素を太字にした...
&br;
**.mincho [#icfdc5de]
適用タグ内のテキストを明朝体に設定。
&br;
**.tAc .tAl .tAr [#u2a1513e]
適用タグ内のインライン要素をセンタリング(.tAc)、左寄せ(.t...
※スマホの場合は無効。
&br;
**.xtAc .xtAl .xtAr [#l140cd25]
適用タグ内テキストをセンタリング(.xtAc)、左寄せ(.xtAl)、...
※端末にかかわらず常時有効。
&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...
>>font-size: 0.5em; &color(#bbbbbb){/* フォントサイズを極...
>>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="relati...
>>''<span class="&color(#dd0000){remove};">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-b...
&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]
適用タグ内のテキストのフォントサイズを(親要素に対する)相...
|>|CENTER:|CENTER:70|CENTER:70|CENTER:70|CENTER:BGCOLOR(#...
|>|~ |~.font--3|~.font--2|~.font--1|~.font-0|~.font-1|~.f...
|>|LEFT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:BGCOLOR(#bbddff):|RIG...
|>|~設定値（相対）|BGCOLOR(#ffffff):0.625em|BGCOLOR(#ffff...
|~相当値(約)|~親要素が16pxの場合|10px|12px|14px|16px|18px...
|~|~ 〃 が24pxの場合|15px|18px|21px|24px|27px|31px|36px...
&br;
**.bold [#i003109e]
適用タグ内のテキストを太字に設定。
&br;
**.bold-off [#tdbf1099]
適用タグ内のテキストの太字を解除。
※SEO的に使用する<strong>タグでインライン要素を太字にした...
&br;
**.mincho [#icfdc5de]
適用タグ内のテキストを明朝体に設定。
&br;
**.tAc .tAl .tAr [#u2a1513e]
適用タグ内のインライン要素をセンタリング(.tAc)、左寄せ(.t...
※スマホの場合は無効。
&br;
**.xtAc .xtAl .xtAr [#l140cd25]
適用タグ内テキストをセンタリング(.xtAc)、左寄せ(.xtAl)、...
※端末にかかわらず常時有効。
&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...
>>font-size: 0.5em; &color(#bbbbbb){/* フォントサイズを極...
>>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="relati...
>>''<span class="&color(#dd0000){remove};">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共通ルール){このページを編集};
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
