Dead Simple Gridを使ってつくるデモサイト

デモサイト Dead Simple Grid

レスポンシブのグリッドシステム「Dead Simple Grid」を使ってつくるデモサイト。

880px以下は1カラム、881px以上は2カラム。

公式サイト

グリッドシステムの公式サイト

Dead Simple Grid

デモサイト

軽量フレームワークを使ってつくるデモサイト

2カラムをベースに、各フレームワークを利用して、ペラのHTMLでシンプルに作成。

軽量フレームワークを使ってつくるデモサイト
- デモサイト Pure
- デモサイト Min
- デモサイト Skeleton
- デモサイト Simple Grid
- デモサイト Milligram

grid.css

約392バイト（グリッド部分のみ、修正あり）

/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */

.row .row { margin: 0 -1.5em; }
.col { padding: 0 1.5em; }
.col {padding:1rem;}

.row:after {
    content: "";
    clear: both;
    display: table;
}

@media only screen { .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
}}

@media only screen and (min-width: 54em) {
.main { width: 66.66%; }
.side { width: 33.33%; }
}

見出し2

見出し2のパラグラフ、30文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ

箇条書きリスト

リスト
リスト
リスト
リスト
リスト

番号付きリスト

番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト

説明リスト

HTML5のdescription list(dl）= 説明リスト

description term(dt）= 説明する言葉: definition / description(dd）= 定義分もしくは説明文; definition / description(dd）= 定義分もしくは説明文

description term(dt）= 説明する言葉: definition / description(dd）= 定義分もしくは説明文; definition / description(dd）= 定義分もしくは説明文

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

入れ子のテスト

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

あいうえおあいうえおあいうえおあいうえおあいうえお
- かきくけこかきくけこかきくけこかきくけこかきくけこ
  - たちつてとたちつてとたちつてとたちつてとたちつてと
    - なにぬねのなにぬねのなにぬねのなにぬねのなにぬねの

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

見出し3

見出し3のパラグラフ、35文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそ

見出し4

見出し4のパラグラフ、40文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

見出し5

見出し5のパラグラフ、45文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえお

見出し6

見出し6のパラグラフ、50文字

あいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねの

VenoBox

pre,code,pre+code

pre

.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
  and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

code

sudo apt update

まずはconsole.log('Hello, world!')を実行してみましょう。

and here's a line of some really, really, really, really long text, just to see how the PRE tag

pre+code

{% if page.earlier %}Previous article: {{ page.earlier.permalink }}{% endif %}
{% if page.later %}Next article: {{ page.later.permalink }}{% endif %}