Skeleton

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

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

  1. Skeleton CSSフレームワークとは
  2. Skeletonの使い方
  3. Grid
  4. a
  5. button
  6. code
  7. form
  8. h1 - h6
  9. ol
  10. pre
  11. table
  12. ul
Skeleton
ItemDescription
URL http://getskeleton.com/
License MIT
Skeleton v2.0.4
ModuleSize
normalize.css 7.61KB
skeleton.css 11.1KB

Skeletonの使い方

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

<head>
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/skeleton.css">

Grid

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と同じ）

単数形は.column、複数形は.columnsとなっていることに注意が必要です。

<div class="container">
  <div class="row">
    <div class="six columns">.six .columns</div>
    <div class="six columns">.six .columns</div>
  </div>
</div>
.six .columns
.six .columns
<div class="container">
  <div class="row">
    <div class="four columns">.four .columns</div>
    <div class="four columns">.four .columns</div>
    <div class="four columns">.four .columns</div>
  </div>
</div>
.four .columns
.four .columns
.four .columns
<div class="container">
  <div class="row">
    <div class="one-half column">.one-half .column</div>
    <div class="one-half column">.one-half .column</div>
  </div>
</div>
.one-half .column
.one-half .column
<div class="container">
  <div class="row">
    <div class="one-third column">.one-third .column</div>
    <div class="one-third column">.one-third .column</div>
    <div class="one-third column">.one-third .column</div>
  </div>
  <div class="row">
    <div class="one-third column">.one-third .column</div>
    <div class="two-thirds column">.two-thirds .column</div>
  </div>
  <div class="row">
    <div class="two-thirds column">.two-thirds .column</div>
    <div class="one-third column">.one-third .column</div>
  </div>
</div>
.one-third .column
.one-third .column
.one-third .column
.one-third .column
.two-thirds .column
.two-thirds .column
.one-third .column

a

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

Anchor

.button

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

.button

.button-primary

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

.button .button-primary

button

<button>button</button>

.button-primary

<button class="button-primary">.button-primary</button>

code

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

<code>code</code>

code

dl

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

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

form

checkbox

checkbox

select

.u-full-width

selectタグにu-full-widthクラスを指定すると、横幅いっばいになります。

submit

.button-primary

text

.u-full-width

u-full-widthクラスを指定すると、横幅いっばいになります。

textarea

.u-full-width

textareaタグにu-full-widthクラスを指定すると、横幅いっばいのテキストエリアになります。

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

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

table

tableタグに何もクラスを指定しないと、次のようなテーブルになります。

Caption
thead ththead th
tbody tdtbody td
tbody tdtbody td
tfoot thtfoot th

.u-full-width

tableタグにu-full-widthクラスを指定すると、横幅いっぱいのテーブルになります。

<table class="u-full-width">
Caption
thead ththead th
tbody tdtbody td
tbody tdtbody td
tfoot thtfoot th

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>