![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#norelated * CSSの共通ルール（MSGオリジナル） [#uadbd495] このページは、ページを指定しない時に表示されます。 #contents あなたのサイトに合わせ、自由に編集してください :) ((安易なSPAMやいたずらを防止するため、テーマや目的などの説明を加えた後、忘れずに凍結して下さい。パスワードの変更もお忘れなく!)) &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] 適用タグ内のテキストのフォントサイズを(親要素に対する)相対値に設定。 |>|CENTER:|CENTER:70|CENTER:70|CENTER:70|CENTER:BGCOLOR(#99ccff):70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|c |>|~ |~.font--3|~.font--2|~.font--1|~.font-0|~.font-1|~.font-2|~.font-3|~.font-4|~.font-5|~.font-6|~.font-7|h |>|LEFT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:BGCOLOR(#bbddff):|RIGHT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:|RIGHT:|c |>|~設定値（相対）|BGCOLOR(#ffffff):0.625em|BGCOLOR(#ffffff):0.75em|BGCOLOR(#ffffff):0.875em|1em|BGCOLOR(#ffffff):1.125em|BGCOLOR(#ffffff):1.3125em|BGCOLOR(#ffffff):1.5em|BGCOLOR(#ffffff):1.875em|BGCOLOR(#ffffff):2.25em|BGCOLOR(#ffffff):3em|BGCOLOR(#ffffff):3.75em| |~相当値(約)|~親要素が16pxの場合|10px|12px|14px|16px|18px|21px|24px|30px|36px |48px|60px| |~|~ 〃 が24pxの場合|15px|18px|21px|24px|27px|31px|36px|45px|54px |72px|90px| &br; **.bold [#i003109e] 適用タグ内のテキストを太字に設定。 &br; **.bold-off [#tdbf1099] 適用タグ内のテキストの太字を解除。 ※SEO的に使用する<strong>タグでインライン要素を太字にしたくない場合などに使用。 &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"> >>''<span class="&color(#dd0000){remove};">SEO対策用の隠しテキスト</span>'' ></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]]を試してみてください // ** 練習ページ [#g714653c] // - [[SandBox]] -- 編集をお試しください // - [[InterWikiSandBox]] -- [[InterWiki]]を試してみてください ** PukiWikiについて [#f791a2e6] // ** PukiWikiについて [#f791a2e6] - [[PukiWiki]] -- PukiWikiのご紹介 // - [[PukiWiki]] -- PukiWikiのご紹介 *** ドキュメント [#d61761aa] - [[ヘルプ>Help]] -- PukiWikiで編集するには？ - [[テキスト整形のルール(詳細版)>FormattingRules]] - [[プラグインマニュアル>PukiWiki/1.4/Manual/Plugin]] // *** ドキュメント [#d61761aa] // - [[ヘルプ>Help]] -- PukiWikiで編集するには？ // - [[テキスト整形のルール(詳細版)>FormattingRules]] // - [[プラグインマニュアル>PukiWiki/1.4/Manual/Plugin]] &br; RIGHT:&edit(CSS共通ルール){このページを編集};
