ここがヘッダー

CSSフレームワーク "inuit.css" サンプル


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-12


grid-1

grid-11


grid-2

grid-10


grid-3

grid-9


grid-4

grid-8


grid-5

grid-7


grid-6

grid-6


grid-4

grid-4

grid-4


grid-3

grid-3

grid-3

grid-3


grid-3

grid-6

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無効

ミニチュアホース(360x481)
注釈
  • ミニチュアホース
  • 紅葉がきれいです
  • この柵、ずいぶん低い
  • ノーザンホースパーク?
from 写真素材 足成 by Lizhi
 

annotate有効

ミニチュアホース(360x481)
注釈
  • ミニチュアホース
  • 紅葉がきれいです
  • この柵、ずいぶん低い
  • ノーザンホースパーク?
from 写真素材 足成 by Lizhi
 
<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)

(準備中)

サンプル

(準備中)