Milligram

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

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

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

使い方

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

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

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

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

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

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
  <head>
  <body>
    <!-- contents -->
  </body>
</html>

.container

<div class="container">
  Milligram is a minimalist CSS framework.
</div>
Milligram is a minimalist CSS framework.

.column

<div class="container">
  <div class="row">
    <div class="column">first</div>
    <div class="column">second</div>
  </div>
</div>
first
second
<div class="container">
  <div class="row">
    <div class="column">first</div>
    <div class="column">second</div>
    <div class="column">third</div>
  </div>
</div>
first
second
third

.column-{n}

<div class="container">
  <div class="row">
    <div class="column column-100">100%</div>
  </div>
</div>
100%
<div class="container">
  <div class="row">
    <div class="column column-10">10%</div>
    <div class="column column-90">90%</div>
  </div>
</div>
10%
90%
<div class="container">
  <div class="row">
    <div class="column column-20">20%</div>
    <div class="column column-80">80%</div>
  </div>
</div>
20%
80%
<div class="container">
  <div class="row">
    <div class="column column-25">25%</div>
    <div class="column column-75">75%</div>
  </div>
</div>
25%
75%
<div class="container">
  <div class="row">
    <div class="column column-33">33%</div>
    <div class="column column-67">67%</div>
  </div>
</div>
33%
67%
<div class="container">
  <div class="row">
    <div class="column column-40">40%</div>
    <div class="column column-60">60%</div>
  </div>
</div>
40%
60%
<div class="container">
  <div class="row">
    <div class="column column-50">50%</div>
    <div class="column column-50">50%</div>
  </div>
</div>
50%
50%

EM

<em>Emphasis</em>

Emphasis

.float-left

<div class="clearfix">
  <div class="float-left">#1</div>
  <div class="float-left">#2</div>
</div>
#1
#2
<div class="clearfix">
  <div class="float-left">float-left</div>
  <div class="float-right">float-right</div>
</div>
float-left
float-right

.float-right

<div class="clearfix">
  <div class="float-right">#1</div>
  <div class="float-right">#2</div>
</div>
#1
#2

blockquote

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

<blockquote>Blockquote</blockquote>
Blockquote

.button

<button class="button">
  Button
</button>
<a class="button" href="#">
  Link
</a>
Link
<input type="submit" class="button">

.button-outline

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

.button-clear

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

CODE

<code>code</code>

code

DL

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

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

INPUT

<input type="checkbox" id="cb">
<label class="label-inline" for="cb">
  同意する
</label>
<input type="radio" name="radio" id="s" checked>
<label class="label-inline" for="s">
  普通預金
</label>
<input type="radio" name="radio" id="c" checked>
<label class="label-inline" for="c">
  当座預金
</label>
<label for="first_name">
  First name
</label>
<input type="text" id="first_name" placeholder="John">

SELECT

<label for="bank">
  銀行
</label>
<select id="bank">
  <option value="0001">みずほ銀行</option>
  <option value="0005">三菱UFJ銀行</option>
  <option value="0009">三井住友銀行</option>
</select>

TEXTAREA

<label for="textarea">
  Textarea
</label>
<textarea placeholder="textarea" id="textarea">
</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>first</li>
  <li>second
    <ol>
      <li>third</li>
    </ol>
  </li>
</ol>
  1. first
  2. second
    1. third

pre

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

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

SMALL

<small>Small</small>
Small

STRONG

<strong>Strong</strong>
Strong

table

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

Caption
th th
td td
td td
th th

U

<u>Underline</u>

Underline

UL

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

<ul>
  <li>first</li>
  <li>second
    <ul>
      <li>third</li>
    </ul>
  </li>
</ul>