Skeleton

Skeleton CSSフレームワークの使い方を、入門者向けにサンプルを交えてご紹介します。この記事自体も、Skeletonを使って作っています。

ただし見やすさを考慮して、HTMLコードに関してはシンタックスハイライターPrismも使用しています。

  1. 使い方
  2. グリッド
  3. a
  4. button
  5. code
  6. div
  7. dl
  8. h1 - h6
  9. input
  10. ol
  11. pre
  12. select
  13. table
  14. textarea
  15. ul
Skeleton
ItemDescription
URL http://getskeleton.com/
License MIT
Skeleton v2.0.4
ModuleSize
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 column1/12の幅を持つ列
two columns2/12の幅を持つ列
three columns3/12の幅を持つ列
four columns4/12の幅を持つ列
five columns5/12の幅を持つ列
six columns6/12の幅を持つ列
seven columns7/12の幅を持つ列
eight columns8/12の幅を持つ列
nine columns9/12の幅を持つ列
ten columns10/12の幅を持つ列
eleven columns11/12の幅を持つ列
twelve columns12/12の幅を持つ列
one-half column1/2の幅を持つ列(.six .columnsと同じ)
one-third colum1/3の幅を持つ列(.four .columnsと同じ)
two-thirds colum2/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>
1
2
3
4
5
6
7
8
9
10
11
12
<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>
1
2
3
4
5
6
<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>
1
2
3
4
<div class="row">
  <div class="four columns">1</div>
  <div class="four columns">2</div>
  <div class="four columns">3</div>
</div>
1
2
3
<div class="row">
  <div class="six columns">1</div>
  <div class="six columns">2</div>
</div>
1
2
<div class="row">
  <div class="one-half column">1</div>
  <div class="one-half column">2</div>
</div>
1
2
<div class="row">
  <div class="one-third column">1</div>
  <div class="two-thirds column">2</div>
</div>
2

a

<a href="#">Anchor</a>

Anchor

<a href="#" class="button">Button</a>

Button

<a href="#" class="button button-primary">Primary</a>

Primary

button

<button>Button</button>
<button class="button-primary">Primary</button>

code

Skeletonでは<code>code</code>タグに指定するクラスはありません。

Skeletonではcodeタグに指定するクラスはありません。

div

<div class="container">
  containerクラスは左右に余白を残してコンテンツを中央に配置します。
</div>
containerクラスは左右に余白を残してコンテンツを中央に配置します。

dl

Skeletonでは、dlやその子要素に指定するクラスはありません。

<dl>
  <dt>Definition term</dt>
  <dd>Definition decription</dd>
</dl>
Definition term
Definition decription

h1 - h6

Skeletonでは、h1 - h6 に指定するクラスはありません。

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

H1

H2

H3

H4

H5
H6

input

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

ol

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>
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
    1. Nested ordered list item

pre

Skeletonでは、preタグに指定するクラスはありません。

<pre>pre</pre>
pre
<pre><code>pre code</code></pre>
pre code

select

<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

<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>
中等部2年
白鳥紗南
野中ここな
<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>
中等部1年
佐藤愛桜
戸高美湖

textarea

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

ul

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>