Skeleton CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Skeletonを使って作っています。
ただし見やすさを考慮して、HTMLコードに関してはシンタックスハイライターPrismも使用しています。
| Item | Description |
|---|---|
| URL | http://getskeleton.com/ |
| License | MIT |
| Module | Size |
|---|---|
| normalize.css | 7.61KB |
| skeleton.css | 11.1KB |
Skeleton CSSフレームワークを使うためには、HTMLのhead内でCSSをインポートします。
<head>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/skeleton.css">Skeletonでは、水平方向を12列に分割したグリッドレイアウト構造を採用しています。
| クラス | 説明 |
|---|---|
| one column | 1/12の幅を持つ列 |
| two columns | 2/12の幅を持つ列 |
| three columns | 3/12の幅を持つ列 |
| four columns | 4/12の幅を持つ列 |
| five columns | 5/12の幅を持つ列 |
| six columns | 6/12の幅を持つ列 |
| seven columns | 7/12の幅を持つ列 |
| eight columns | 8/12の幅を持つ列 |
| nine columns | 9/12の幅を持つ列 |
| ten columns | 10/12の幅を持つ列 |
| eleven columns | 11/12の幅を持つ列 |
| twelve columns | 12/12の幅を持つ列 |
| one-half column | 1/2の幅を持つ列（.six .columnsと同じ） |
| one-third colum | 1/3の幅を持つ列（.four .columnsと同じ） |
| two-thirds colum | 2/3の幅を持つ列（.eight .columnsと同じ） |
<div class="row">
<div class="one column">1</div>
<div class="one column">2</div>
<div class="one column">3</div>
<div class="one column">4</div>
<div class="one column">5</div>
<div class="one column">6</div>
<div class="one column">7</div>
<div class="one column">8</div>
<div class="one column">9</div>
<div class="one column">10</div>
<div class="one column">11</div>
<div class="one column">12</div>
</div><div class="row">
<div class="two columns">1</div>
<div class="two columns">2</div>
<div class="two columns">3</div>
<div class="two columns">4</div>
<div class="two columns">5</div>
<div class="two columns">6</div>
</div><div class="row">
<div class="three columns">1</div>
<div class="three columns">2</div>
<div class="three columns">3</div>
<div class="three columns">4</div>
</div><div class="row">
<div class="four columns">1</div>
<div class="four columns">2</div>
<div class="four columns">3</div>
</div><div class="row">
<div class="six columns">1</div>
<div class="six columns">2</div>
</div><div class="row">
<div class="one-half column">1</div>
<div class="one-half column">2</div>
</div><div class="row">
<div class="one-third column">1</div>
<div class="two-thirds column">2</div>
</div><a href="#">Anchor</a><a href="#" class="button">Button</a><a href="#" class="button button-primary">Primary</a><button>Button</button><button class="button-primary">Primary</button>Skeletonでは<code>code</code>タグに指定するクラスはありません。Skeletonではcodeタグに指定するクラスはありません。
<div class="container">
containerクラスは左右に余白を残してコンテンツを中央に配置します。
</div>Skeletonでは、dlやその子要素に指定するクラスはありません。
<dl>
<dt>Definition term</dt>
<dd>Definition decription</dd>
</dl>Skeletonでは、h1 - h6 に指定するクラスはありません。
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6><label for="first_name">First name</label>
<input type="text" placeholder="John" id="first_name">
<label for="last_name">Last name</label>
<input type="text" placeholder="Doe" id="last_name" class="u-full-width"><label>
<input type="checkbox">
<span class="label-body">checkbox</span>
</label><label>
<input type="radio" name="gender" value="m" checked>
<span class="label-body">男性</span>
</label>
<label>
<input type="radio" name="gender" value="f">
<span class="label-body">女性</span>
</label><input type="submit" value="Submit">
<input type="submit" value="Submit" class="button-primary">Skeletonでは、olやその子要素に指定するクラスはありません。
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item
<ol>
<li>Nested ordered list item</li>
</ol>
</li>
</ol>Skeletonでは、preタグに指定するクラスはありません。
<pre>pre</pre>pre
<pre><code>pre code</code></pre>pre code<select>
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select><select class="u-full-width">
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select><table>
<caption>中等部2年</caption>
<thead>
<tr><th>姓</th><th>名</th></tr>
</thead>
<tbody>
<tr><td>白鳥</td><td>紗南</td></tr>
<tr><td>野中</td><td>ここな</td></tr>
</tbody>
</table>| 姓 | 名 |
|---|---|
| 白鳥 | 紗南 |
| 野中 | ここな |
<table class="u-full-width">
<caption>中等部1年</caption>
<thead>
<tr><th>姓</th><th>名</th></tr>
</thead>
<tbody>
<tr><td>佐藤</td><td>愛桜</td></tr>
<tr><td>戸高</td><td>美湖</td></tr>
</tbody>
</table>| 姓 | 名 |
|---|---|
| 佐藤 | 愛桜 |
| 戸高 | 美湖 |
<label for="ta">textarea</label>
<textarea placeholder="textarea" id="ta"></textarea>
<label for="tafw">textarea</label>
<textarea placeholder="textarea" id="tafw" class="u-full-width"></textarea>Skeletonでは、ulやその子要素に指定するクラスはありません。
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item
<ul>
<li>Nested unordered list item</li>
</ul>
</li>
</ul>