wiki-kouza1 @ ウィキ
CSSの一部変更
最終更新:
wiki-kouza1
-
view
このWikiというシステムは、Webサーバー上で動作していますが、通常、編集画面に入力したテキスト情報と、ちょっとした記号を入れることで、HTML書式に整形して出力してくれます。
同時に、「デザイン選択」で選択したデザインを、全てのページに適用してくれるのはよいのですが、時には、「一部だけ見栄えを変更したい」というケースもあるでしょう。
そういった場合にも、Wikiというシステムは柔軟に対応できます。ただし、少々高度な知識も要求されます。
HTMLの書式
HTML文書は、基本的に、開始タグと終了タグとでテキストや画像を囲むことで(マークアップ)、その部分を「要素」という単位で把握し、その部分が、その文書全体の中でどのような役割、位置づけになるのか、という文書構造を定義するものです。
<div>あいうえお</div>
という具合に、開始タグには、「要素名」を記述し、終了タグには、「/要素名」を記述します。
また、
また、
<h1 class="style1">あいうえお</h1>
などのように、開始タグには「要素名」に加えて「属性(ここではclass属性)」を記述することが出来ます。
各要素の役割などについては、Wikiを利用している範囲においては、特に覚える必要はありません。編集画面のアイコンで「h2」を選んだり、「リスト」や「テーブル」などを選んだりしていれば、概ねOKでしょう。
各要素の役割などについては、Wikiを利用している範囲においては、特に覚える必要はありません。編集画面のアイコンで「h2」を選んだり、「リスト」や「テーブル」などを選んだりしていれば、概ねOKでしょう。
CSSの書式
別ページでも触れましたが、CSSで見栄えを変更する場合は、どの部分を対象とするのか、を把握できないことには始まりません。それは上記の「要素」が単位となります。
見栄えを変更したい要素を、CSSセレクタで捕まえるためには、その部分がどのようなタグでマークアップされているのか、セレクタに利用できるid属性などがついているのか、などを「ソースを表示」させて、確認する必要があります。
他の部分にも同じようなタグが利用されていたり、特定のid属性やclass属性がつけられていない場合には、Wikiで記述する際に、次のような技が使えます。
#divid(style1){{{ あいうえお }}}
という記述をすると、
<div id="style1">あいうえお</div>
というHTML出力が得られますので、「CSSカスタマイズ」に次のように追記することで、特定の場所(要素)だけの見栄えを変更することが出来ます。
div#style1{ color:red; }
上記のCSSでは、div要素にid属性がつけられていて、その値が「style1」であるものだけを対象とするセレクタを記述し、続く「{」と「}」の中に、color(文字色)をred(赤)に、してくれ、というプロパティを記述しています。
同様にclass属性をつけたdiv要素も使えます。
#divclass(style2){{{ かきくけこ }}}
とWikiで記述しておいて、CSSカスタマイズの方には、
div.style2{ color:blue; font-style:italic; }
と記述することで、その部分だけを文字色を青にし、文字を斜体に変更することが出来ます。