Wiki3記法とCSSについて

いろいろわかったこと

・Wiki3では一部のHTML記法が使えません(input，labelなど)．使えないタグを見分ける方法は，ソースに直打ちして見たままモードに戻し，再度ソース表示したときに自動校正で消去されているかどうかで判断できます(消去されていれば使えません)．

・トグル動作を始めとしたクリック後の動作はHTML/CSSで実装不可能です．おそらくWiki3におけるトグル動作は，カスタムデータ属性「data-uk-toggle」に代入されたターゲットクラスをjavaなどで処理しているものと思われます．そのため，変則的な動作を行う場合はCSSの:hoverや:activeなどの擬似クラスで対応するしかありません．

・トグル動作はslow_motion_exが適用されず，その条件を満たすのはdisplayセレクタがnoneのときだけなので，クリック時にdisplayセレクタをnoneと切り替えてるっぽいです．

・擬似クラスのうち:not()は動作していないようです(要検証)．一応この擬似クラスを使わなくとも大抵のことはできますが，変にこだわると1時間浪費した僕みたいに抜け出せなくなる可能性があるので気をつけてください．

・CSS記述では属性を指定しないクラスでは「.クラス名」，a(アンカー)やdiv(ブロック区切り)などの属性を持っている場合のみ動作するクラスでは「属性名.クラス名」という記述が必要です．また，クラス名1のあとにスペースを空けてクラス名2を記述すると，親要素がクラス名1であるクラス名2の要素に適用されます．

・HTML記述ではクラスのスタイルを複数適用でき，例えば赤文字にするクラス"word_red"と大文字にするクラス"word_big"があるとき，<span class="word_red word_big">この部分は赤文字かつ大文字になります</span>．

　このWikiに実装されているCSSコードはここを参照してください

+CSS記述例

//属性名を指定しないクラス"class_all"です．

in CSS:

.class_all{ color: red; }

in HTML:

<div class="class_all">赤色になります</div>

<span class="class_all">赤色になります</span>

 

//属性名をspanのみに指定したクラス"class_span"です．

in CSS:

span.class_span{ color: red; }

in HTML:

<div class="class_span">赤色になりません</div>

<span class="class_span">赤色になります</span>

 

//親要素をclass_parentのみに指定したクラス"class_child"です．

in CSS:

.class_parent {color: blue; }

.class_parent .class_child{ color: red; }

in HTML:

<span class="class_parent">青色になります<span class="class_child">赤色になります</span></span>

<span class="class_child">青色にも赤色にもなりません</span>

 

//親要素をカーソルが乗っているclass_parentのみに指定したクラス"class_child"です．

in CSS:

.class_parent {color: blue; }

.class_parent:hover .class_child{ color: red; }

in HTML:

<span class="class_parent">++青色になります:<span class="class_child">青色ですが「++」で囲まれてる範囲にカーソルが乗っているとき赤色になります++</span></span>

<span class="class_child">カーソルにかかわらず青色にも赤色にもなりません</span>