デモサイト Responsive Grid System

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

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

公式サイト

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

• Responsive Grid System

デモサイト

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

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

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

grid.css

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

@charset "UTF-8";
/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 0 0 0 1%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 880px) {
.col {  margin: 0; }
.span_3_of_3,
.span_2_of_3,
.span_1_of_3 { width: 100%; }
}

箇条書きリスト

• リスト
• リスト
• リスト
• リスト
• リスト

番号付きリスト

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト
4. 番号付きリスト
5. 番号付きリスト
6. 番号付きリスト
7. 番号付きリスト
8. 番号付きリスト
9. 番号付きリスト
10. 番号付きリスト

説明リスト

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

description term(dt）= 説明する言葉

definition / description(dd）= 定義分もしくは説明文

definition / description(dd）= 定義分もしくは説明文

入れ子のテスト

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

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

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

VenoBox

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