CSSてすと

###実装機能一覧###

　文字カラーを動的に指定できるかのテスト用．ムリです(確信)

・balloon_exクラス，balloon_text_exクラス

　<span class="balloon_ex">(またはdiv)内に<span class="baloo_text_ex">(またはdiv)を入れると，balloon_exクラス範囲内の文字にカーソルを合わせたときにbaloo_text_exクラス範囲内の文字がフェードインでバルーン表示されます．言葉で説明するよりソース見たほうが早いと思います

　注意点:バルーン幅が200pxで固定されていますが，これは文字幅をフレキシブルにすると親要素(balloon_exクラス)の文字幅以下に自動修正されてしまうためです．要は1文字に適用するとバルーン幅も1文字になってしまい，縦に伸びてしまいます．現状これを回避する手段は無いので，脚注を長めにして違和感を無くすなどで対処してください

---

　普通の文字列に適用する場合……

<p><span class="balloon_ex">ここがカーソルを合わせる対象となる文字列です<span class="balloon_text_ex">バルーンの内容はここに入ります</span></span></p>

 

　脚注として適用する場合(アンカー名:anc_1，適宜変更してください)……

<p>ここが脚注したい文字列です<sup><span class="balloon_ex"><a href="#anc_1">脚注番号です</a><span class="balloon_text_ex">ここが脚注の内容です</span></span></sup></p>

<p><a name="anc_1">脚注番号です</a>:上の*1をクリックするとこの行に飛びます</p>

---

 

・div.footnote_exクラス

　<div class="footnote_ex"></div>内にある脚注文を囲うことが出来ますが，あんまり意味はないです．

・clear_exクラス

　カーソルを合わせたときに半透明になります．他のクラスやimg，hrefと組み合わせることがほぼ前提です．

・appear/disappear_exクラス

　普段は非表示/表示でカーソルを合わせると表示/非表示されます．ただし実体は居るので後述するrelative/absolute_exクラスと組み合わせなければ他の文字や図表と重ねることはできません．これも他のクラスやimg，hrefと以下略．

・click_appear/disappear_exクラス

　普段は非表示/表示でクリックしている間だけ表示/非表示されます．appear/disappearクラスのクリック版です．

・slow_motion_exクラス

　単体では何の意味も無いですが，前述のカーソル選択時に状態変化するクラスと組み合わせるとアニメーション変化になります(現状では0.5秒固定)．

・relative_ex/absolute_exクラス

　それぞれ単体では何の意味も無いですが，relativeなdiv親要素の中にrelativeな子要素とabsoluteな子要素を同時に突っ込むことで左上座標を一致させることができます．

・priority_[x]_exクラス

　それぞれ単体ではあまり意味は無いですが，要素同士が重なる場合にこれらを指定するとx=high>mid_high>mid>mid_low>lowの順でレイヤーが構成されます．

・link_target_exクラス(カスタムデータ属性:data-link-target-before-ex,data-link-target-after-ex)

　単体では意味がありませんが，脚注など他のページ内リンクからこのクラスを持つ要素に移動したときにハイライト表示させることができます．また，要素内でdata-link-target-before-ex="►"，data-link-target-after-ex="◄"などとすれば，ハイライト領域の前後に特定の文字列を挿入することができます．

・modal_window_exクラス

　クリック時にモーダルウィンドウ(ポップアップ)表示をすることが出来ます．言葉で説明するよりコードを見たほうが早いです．

　・modal_window_open_exクラス…画像サイズを180*180pxに制限します．主に画像拡大表示のために用いることを想定しています．

　・modal_window_exクラス…モーダルウィンドウの本体です．これで囲まれた中にウィンドウ内の情報を記述します．

　・modal_window_bg_exクラス…モーダルウィンドウの背景部分です．サイズは内部の記述によって自動整形されます．

　・modal_window_close_exクラス…これで囲まれた記述はモーダルウィンドウの右上に重なるように配置されます．閉じるボタンに対して使うことを想定していますが，これ自体に閉じるボタンとしての効果はありません．

<p><a href="#modal1"><img class="modal_window_open_ex" src="https://img.wiki3.jp/ray_co99/サンコウチョウ表紙.png" /> </a></p>

<div class="modal_window_ex" id="modal1">
<div class="modal_window_bg_ex">
<p><img src="https://img.wiki3.jp/ray_co99/サンコウチョウ表紙.png" /></p>

<p>てすとてきすと</p>

<p><a class="modal_window_close_ex" href="#close">close</a></p>
</div>
</div>

・return_to_top_exクラス

　画面最下部，右から50pxの位置に画像などを固定できます．これ単体では画像を固定するだけなので，画面上部にアンカーを打っておき，そこへのリンクを設定しておくことを想定しています．

・img_switch_exクラス

　画像に対して「通常時」「マウスホバー時」「クリック時」の3パターンを設定できます．イラストの差分を組み合わせることを想定しています．

 

ちなみに

class=""のダブルクォーテーションの中に半角スペースで複数クラスを指定すると，各クラスのスタイル(効果？)が同時に適用されるようです(次の緑文字参照)．

 

###実装例###

 

追加の緑色クラステスト

カーソル乗せるとバルーンがでるよここに注釈が書けるよ

上付き・下付き文字と組み合わせてこういう使い方が有効かも？^{*1ここに脚注と同じことを書くとパッと見では脚注をプレビューしてる感じになります．ここでは脚注にアンカーが撃ってあるのでクリックで移動できます}

カーソル乗せるとクリアになるよ

カーソル乗せるとゆっくりクリアになるよ

ソース内に class="clear_ex"を追加するとカーソル乗せたときにゆっくりクリアになるよ

右にカーソルを合わせると→文字が出現するよ

 

三段切替できるボタンです(リンク先はこのページです)

クリックするとモーダルウィンドウ(ポップアップ)で拡大表示されます

てすとてきすと

close

 

---

*1:こんな感じです