Skeleton CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。
この記事自体も、Skeletonを使って作っています。ただし見やすさを考慮して、HTMLコードに関してはシンタックスハイライター hilights.js も使用しています。
| Item | Description |
|---|---|
| URL | http://getskeleton.com/ |
| License | MIT |
| Module | Size |
|---|---|
| normalize.css | 7.61KB |
| skeleton.css | 11.1KB |
Skeleton CSSフレームワークを使うためには、HTMLのhead内でCSSをインポートします。
事前にSkeletonのCSSをダウンロードして配置しておく必要があります。Skeletonは normalize.css を利用するので、同様にダウンロードして配置しておきます。
<html>
<head>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/skeleton.css" />
</head>
<body>
<!-- content -->
</body>
</html>公式サイトには記載されていませんが、CDNを使うこともできます。
cdnjs を通じてSkeletonを使用するテンプレートは次のとおりです。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
crossorigin="anonymous" />
</head>
<body>
<!-- content -->
</body>
</html>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 u-full-width">Button</a><a href="#" class="button button-primary">Primary</a><a href="#" class="button button-primary u-full-width">Primary</a><button>Button</button><button class="u-full-width">Button</button><button class="button-primary">Primary</button><button class="button-primary u-full-width">Primary</button><p>
Skeletonでは<code>code</code>タグに指定するクラスはありません。
</p>Skeletonではcodeタグに指定するクラスはありません。
<div class="container">
<p>containerクラスは左右に余白を残してコンテンツを中央に配置します。</p>
</div>containerクラスは左右に余白を残してコンテンツを中央に配置します。
Skeletonでは、dlやその子要素に指定するクラスはありません。
<dl>
<dt>Definition term</dt>
<dd>Definition decription</dd>
</dl><em>Emphasis</em>Emphasis
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><strong>Strong</strong>Strong
<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><u>Underline</u>Underline
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><div style="width:100px" class="u-pull-left">1</div>
<div style="width:100px" class="u-pull-left">2</div>
<div style="width:100px" class="u-cf">3</div><div style="width:100px" class="u-pull-right">1</div>
<div style="width:100px" class="u-pull-right">2</div>
<div style="width:100px" class="u-cf">3</div>