個人的に軽量フレームワークを使ってつくるデモサイト(公開日: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でシンプルなレスポンシブ向けのグリッドシステム

見出し2

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

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

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

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

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

箇条書きリスト

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

番号付きリスト

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

説明リスト

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

画像のテキスト

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