Skeleton CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。
この記事自体も、Skeletonを使って作っています。ただし見やすさを考慮して、HTMLコードに関してはシンタックスハイライター hilights.js も使用しています。
項目 | 内容 |
---|---|
URL | http://getskeleton.com/ |
Developed by | Dave Gamache |
License | MIT |
モジュール | サイズ |
---|---|
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>
<img class="u-max-full-width" src="600x600.png">
<img class="u-full-width" src="600x600.png">
<label for="first_name">First name</label>
<input type="text" placeholder="John" id="first_name">
<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="reset" value="Reset">
<label for="last_name">Last name</label>
<input type="text" placeholder="Doe" id="last_name" class="u-full-width">
<input class="u-full-width" type="submit" value="Submit">
<input class="u-full-width" type="reset" value="Reset">
<input class="button-primary" type="submit" value="Submit">
<input class="button-primary" type="reset" value="Reset">
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>