inuit.css とは
(準備中)
キーワード(keywords.inuit.css)
リストをカンマ区切りテキストに変換します。
サンプル
keywords無効
inuit.css でサポートされているプラグインは以下の通りです。
keywords有効
inuit.css でサポートされているプラグインは以下の通りです。
inuit.css でサポートされているプラグインは以下の通りです。
<ul class="keywords">
<li><a href="#breadcrumb">breadcrumb.inuit.css</a></li>
<li>ie6.inuit.css</li>
<li>dropdown.inuit.css</li>
<li><a href="#grid">12-col.inuit.css</a></li>
<li><a href="#annotate">annotate.inuit.css</a></li>
<li><a href="#keywords">keywords.inuit.css</a></li>
<li>centred-nav.inuit.css</li>
</ul>
12列グリッド(12-col.inuit.css)
CSSグリッドが簡単に実現できます。
サンプル
※わかりやすくするためにclass"my_griddemo"を追加して背景色を設定しています。標準では背景色はつきません。
grid-3
grid-3
grid-3
grid-3
<div class="grids my_griddemo">
<div class="grid-12">grid-12<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-1">grid-1<br><br></div>
<div class="grid-11">grid-11<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-2">grid-2<br><br></div>
<div class="grid-10">grid-10<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-3">grid-3<br><br></div>
<div class="grid-9">grid-9<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-4">grid-4<br><br></div>
<div class="grid-8">grid-8<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-5">grid-5<br><br></div>
<div class="grid-7">grid-7<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-6">grid-6<br><br></div>
<div class="grid-6">grid-6<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-4">grid-4<br><br></div>
<div class="grid-4">grid-4<br><br></div>
<div class="grid-4">grid-4<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-3">grid-3<br><br></div>
<div class="grid-3">grid-3<br><br></div>
<div class="grid-3">grid-3<br><br></div>
<div class="grid-3">grid-3<br><br></div>
</div><br>
<div class="grids my_griddemo">
<div class="grid-3">grid-3<br><br></div>
<div class="grid-6">grid-6<br><br></div>
<div class="grid-3">grid-3<br><br></div>
</div>
アノテート(annotate.inuit.css)
写真の任意の場所に注釈を入れます。
サンプル
写真にマウスカーソルを乗せてみて、動作を比べてください。
annotate無効
annotate有効
<figure class="annotate">
<img src="./img/a1370_000225.jpg" alt="ミニチュアホース(360x481)">
<figcaption>
<b>注釈</b>
<ul>
<li style="top:350px; left:195px;">ミニチュアホース</li>
<li style="top: 90px; left:200px;">紅葉がきれいです</li>
<li style="top:330px; left: 40px;">この柵、ずいぶん低い</li>
<li style="top:420px; left: 0px;">ノーザンホースパーク?</li>
</ul>
<i>from <a href="http://www.ashinari.com/">写真素材 足成</a> by <a href="http://www.ashinari.com/authorlist.php?blogid=2&aname=a1370&entry_id=365917">Lizhi</a></i>
</figcaption>
</figure>
パンくずリスト(breadcrumb.inuit.css)
(準備中)
サンプル
(準備中)