Milligram

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

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

Milligram
ItemDescription
URL https://milligram.io/
License MIT
Milligram v1.3.0
ModuleSize
milligram.min.css 8.51KB

使い方

MilligramはGoogle fontsRobotoを使用することを推奨しています。Google fontsのRobotoを使用するには、フォントをインポートします。

Google fontsを使用しなくてもMilligramを使用できますが、WindowsやMac、AndroidなどのOSによってフォントのデザインが異なります。

Milligramはnormalize.cssをベースにしているので、これをインポートします。

Milligramを使うには、CSSをインポートします。

CSSはCDN (Contents Delivery Network) を通じてインポートできます。

<head>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">

Container

<div class="container">.container</div>
.container

Grid

Milligramのグリッドレイアウトでは、必要な列を行に追加するだけで、使用可能なスペースを均等に占有します。

2列が必要な場合は2列を追加し、3列が必要な場合は3列を追加します。列の数に制限はありません。

<div class="container">
  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>
  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>
</div>
.column
.column
.column
.column
.column

列の幅

列の幅を指定することもできます。

列の幅は、親となる行に対する比率をパーセンテージで指定します。

ただし、任意のパーセンテージを指定できるわけではなく、次のいずれかを指定します。

列の幅
クラス
column-10 10%
column-20 20%
column-25 25%
column-33 33%
column-40 40%
column-50 50%
column-60 60%
column-67 67%
column-75 75%
column-80 80%
column-90 90%
column-100 100%
<div class="container">
  <div class="row">
    <div class="column column-25">.column-25</div>
    <div class="column column-75">.column-75</div>
  </div>
</div>
.column-25
.column-75

Float

Milligram CSSには、ブロック要素をフロート表示するためのクラスが用意されています。

クラス 説明
clearfix ブロック要素をフロートにします。
float-left 左寄せ
float-right 右寄せ
<div class="clearfix">
  <div class="float-left">.float-left</div>
  <div class="float-right">.float-right</div>
</div>
.float-left
.float-right

a

aタグにbuttonクラスを指定することで、リンクをボタン状に表示することができます。

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

blockquote

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

<blockquote>Blockquote</blockquote>
Blockquote

button

buttonタグにbuttonクラスを指定すると、Milligramのイメージカラーにすることができます。

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

ボタンのラベルは Upper case になります。

.button-outline

buttonタグにbutton-outlineクラスを指定すると、アウトライン状にすることができます。

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

.button-clear

buttonタグにbutton-clearクラスを指定すると、枠線のないボタンにすることができます。

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

code

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

<code>code</code>

code

dl

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

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

form

Checkbox

Radio

Select option

Text

Textarea

h1 - h6

Milligramでは、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

Milligramでは、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

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

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

table

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

Caption
th th
td td
td td
th th

ul

Milligramでは、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>