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

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

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

更新日:2023-10-15

環境

パソコン: X230（Lenovo ThinkPad,core i5）
OS: LinuxMint 20.3
ブラウザ: Firefox 118.0.2（64ビット）

floatの解除パターン

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

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

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

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

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

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

見出し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文字

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

見出し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

まずは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 %}

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

環境

floatの解除パターン

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

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

見出し2

箇条書きリスト

番号付きリスト

説明リスト

入れ子のテスト

見出し3

見出し4

見出し5

見出し6

見出し2-1

見出し3-1

VenoBox

pre,code,pre+code

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