Skeleton

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

この記事自体も、Skeletonを使って作っています。ただし見やすさを考慮して、HTMLコードに関してはシンタックスハイライター hilights.js も使用しています。

CSSフレームワーク

Skeleton
公式サイト http://getskeleton.com/
開発者 Dave Gamache
ライセンス MIT
グリッド 12列
GitHub stars 18.1k
Skeleton v2.0.4
モジュールサイズ
normalize.css 7.61KB
skeleton.css 11.1KB
  • Emphasis
  • EM
  • Preformatted
  • PRE
  • Underline
  • U

使い方

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

公式サイトには記載されていませんが、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 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>
1
2

A

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

Anchor

.button

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

Button

.u-full-width

<a href="#" class="button u-full-width">Button</a>

Button

.button-primary

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

Primary

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

Primary

BUTTON

<button>Button</button>

.u-full-width

<button class="u-full-width">Button</button>

.button-primary

<button class="button-primary">Primary</button>
<button class="button-primary u-full-width">Primary</button>

CODE

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

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

.container

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

containerクラスは左右に余白を残してコンテンツを中央に配置します。

DL

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

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

EM

<em>Emphasis</em>

Emphasis

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

IMG

.u-max-full-width

<img class="u-max-full-width" src="600x600.png">
600x600

.u-full-width

<img class="u-full-width" src="600x600.png">
600x600

INPUT

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

.u-full-width

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

.button-primary

<input class="button-primary" type="submit" value="Submit">
<input class="button-primary" type="reset" value="Reset">

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>

.u-full-width

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

Strong

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年
姓名
白鳥紗南
野中ここな

.u-full-width

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

.u-full-width

<label for="tafw">textarea</label>
<textarea placeholder="textarea" id="tafw" class="u-full-width"></textarea>

U

<u>Underline</u>

Underline

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>

.u-pull-left

<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>
1
2
3

.u-pull-right

<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>
1
2
3