個人的に軽量フレームワークを使ってつくるデモサイト（公開日:2022-08-04）

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

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

更新日:2022-08-14

floatの解除パターン

回り込みのfloatを解除したサンプル

グリッドシステムのデモサイト

シンプルなレスポンシブ向けのグリッドシステム

flexbox レスポンシブデモサイト

flexboxでシンプルなレスポンシブ向けのグリッドシステム

flexbox レスポンシブデモサイト

見出し2

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

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

見出し3

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

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

見出し4

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

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

見出し5

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

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

見出し6

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

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

見出し2-1

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

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

見出し3-1

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

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

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

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