メニュー



色んなこと



外部リンク



リンク



他のサービス





ここを編集

更新履歴

取得中です。
ここを編集

CSSの一部変更

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

このWikiというシステムは、Webサーバー上で動作していますが、通常、編集画面に入力したテキスト情報と、ちょっとした記号を入れることで、HTML書式に整形して出力してくれます。

同時に、「デザイン選択」で選択したデザインを、全てのページに適用してくれるのはよいのですが、時には、「一部だけ見栄えを変更したい」というケースもあるでしょう。

そういった場合にも、Wikiというシステムは柔軟に対応できます。ただし、少々高度な知識も要求されます。

HTMLの書式


HTML文書は、基本的に、開始タグと終了タグとでテキストや画像を囲むことで(マークアップ)、その部分を「要素」という単位で把握し、その部分が、その文書全体の中でどのような役割、位置づけになるのか、という文書構造を定義するものです。

<div>あいうえお</div>
という具合に、開始タグには、「要素名」を記述し、終了タグには、「/要素名」を記述します。
また、
<h1 class="style1">あいうえお</h1>
などのように、開始タグには「要素名」に加えて「属性(ここではclass属性)」を記述することが出来ます。
各要素の役割などについては、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;
}
と記述することで、その部分だけを文字色を青にし、文字を斜体に変更することが出来ます。
|新しいページ|検索|ページ一覧|RSS|@ウィキご利用ガイド | 管理者にお問合せ
|ログイン|