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

使い方

Skeleton CSSフレームワークを使うためには、HTMLのhead内でCSSをインポートします。

事前にSkeletonのCSSをダウンロードして配置しておく必要があります。Skeletonは normalize.css を利用するので、同様にダウンロードして配置しておきます。

<!DOCTYPE html>
<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を使用するテンプレートは次のとおりです。

<!DOCTYPE html>
<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>

.one .column

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>

.two .columns

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

.three .columns

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

.four .columns

<div class="row">
  <div class="four columns">1</div>
  <div class="four columns">2</div>
  <div class="four columns">3</div>
</div>

.five .columns

<div class="row">
  <div class="five columns">1</div>
  <div class="seven columns">2</div>
</div>

.six .columns

<div class="row">
  <div class="six columns">1</div>
  <div class="six columns">2</div>
</div>

.seven .columns

<div class="row">
  <div class="seven columns">1</div>
  <div class="five columns">2</div>
</div>

.eight .columns

<div class="row">
  <div class="eight columns">1</div>
  <div class="four columns">2</div>
</div>

.nine .columns

<div class="row">
  <div class="nine columns">1</div>
  <div class="three columns">2</div>
</div>

.ten .columns

<div class="row">
  <div class="ten columns">1</div>
  <div class="two columns">2</div>
</div>

.eleven .columns

<div class="row">
  <div class="eleven columns">1</div>
  <div class="one column">2</div>
</div>

.one-half .column

<div class="row">
  <div class="one-half column">1</div>
  <div class="one-half column">2</div>
</div>

.one-third .column

<div class="row">
  <div class="one-third column">1</div>
  <div class="two-thirds column">2</div>
</div>

.two-thirds .column

<div class="row">
  <div class="one-third column">1</div>
  <div class="two-thirds column">2</div>
</div>

<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タグに指定するクラスはありません。

<dl>

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

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

Definition term: Definition decription

<em>

<em>
  The quick brown fox jumps over the lazy dog.
</em>

The quick brown fox jumps over the lazy dog.

<h1>

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

<h2>The Picture of Dorian Gray</h2>

<h2>

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

<h2>To Kill a Mockingbird</h2>

To Kill a Mockingbird

<h3>

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

<h3>Pride and Prejudice</h3>

Pride and Prejudice

<h4>

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

<h4>The Book Thief</h4>

The Book Thief

<h5>

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

<h5>Animal Farm</h5>

Animal Farm

<h6>

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

<h6>Gone with the Wind</h6>

Gone with the Wind

.u-max-full-width

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

.u-full-width

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

<input>

<label for="first_name">First name</label>
<input type="text" placeholder="John" id="first_name">

First name

<label>
  <input type="checkbox">
  <span class="label-body">checkbox</span>
</label>

checkbox

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

Last name

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

Ordered list item
Ordered list item
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>
  The quick brown fox jumps over the lazy dog.
</strong>

The quick brown fox jumps over the lazy dog.

<table>

<table>
  <caption>メディアクエリ</caption>
  <thead>
    <tr>
      <th>メディア</th>
      <th>寸法</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mobile</td>
      <td>≥0px</td>
    </tr>
    <tr>
      <td>phablet</td>
      <td>≥400px</td>
    </tr>
    <tr>
      <td>tablet</td>
      <td>≥550px</td>
    </tr>
    <tr>
      <td>desktop</td>
      <td>≥750px</td>
    </tr>
    <tr>
      <td>desktop HD</td>
      <td>≥1000px</td>
    </tr>
    <tr>
      <td>desktop extra HD</td>
      <td>≥1200px</td>
    </tr>
  </tbody>
</table>

メディアクエリ
メディア	寸法
mobile	≥0px
phablet	≥400px
tablet	≥550px
desktop	≥750px
desktop HD	≥1000px
desktop extra HD	≥1200px

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

textarea

.u-full-width

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

textarea

<u>

<u>
  The quick brown fox jumps over the lazy dog.
</u>

The quick brown fox jumps over the lazy dog.

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

Unordered list item
Unordered list item
Unordered list item
- Nested unordered list item

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

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

Skeleton

CSSフレームワーク

使い方

CDN

.one .column

.two .columns

.three .columns

.four .columns

.five .columns

.six .columns

.seven .columns

.eight .columns

.nine .columns

.ten .columns

.eleven .columns

.one-half .column

.one-third .column

.two-thirds .column

<a>

.button

.u-full-width

.button-primary

<button>

.u-full-width

.button-primary

<code>

.container

<dl>

<em>

<h1>

<h2>

To Kill a Mockingbird

<h3>

Pride and Prejudice

<h4>

The Book Thief

<h5>

Animal Farm

<h6>

Gone with the Wind

.u-max-full-width

.u-full-width

<input>

.u-full-width

.button-primary

<ol>

<pre>

<select>

.u-full-width

<strong>

<table>

.u-full-width

<textarea>

.u-full-width

<u>

<ul>

.u-pull-left

.u-pull-right