軽量フレームワークを使ってつくるデモサイト
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文字
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ
あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ
箇条書きリスト
- リスト
- リスト
- リスト
- リスト
- リスト
番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
説明リスト
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 %}