個人用途として、モダンブラウザでレスポンシブ表示をさせる、軽量で基本的なFlexboxのCSSを書いたデモサイト

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

個人用にシンプルなレスポンシブの2カラムで使う用途（12カラム構造）

WinやMacほか、タブレット、ブラウザによっては表示に不具合が出るかもしれません。

縦表示のiPadほか880px以下は1カラム表示、881px以上で2カラム表示。

公開日:2022-08-06

更新日:2023-10-15

環境

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

grid.css

約488バイト（グリッド部分のみ）

@charset "UTF-8";
.container {
display:flex;
flex-flow:row wrap;
align-content:flex-start;
flex-direction:row;
}

[class^="col"] {
display:inline-block;
width:100%;
}

@media screen and (min-width: 55em) {  /* 880px */
.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}
}

グリッドの使い方

container の中に col-* を書く。

<div class="container">

    <div class="col-8">
メイン
    </div><!-- /.col-8 -->

    <div class="col-4">
サイド
    </div><!-- /.col-4 -->

</div><!-- /.container -->

HTMLタグ文字実体参照の変換ツール

HTMLタグやコードを書くときに、エンコード変換できる便利なツール

デモサイト

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

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

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

VenoBox

箇条書きリスト

リスト
リスト
リスト
リスト
リスト

番号付きリスト

番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト
番号付きリスト

説明リスト

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

description term(dt）= 説明する言葉: definition / description(dd）= 定義分もしくは説明文; definition / description(dd）= 定義分もしくは説明文

description term(dt）= 説明する言葉: definition / description(dd）= 定義分もしくは説明文; definition / description(dd）= 定義分もしくは説明文

入れ子のテスト

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

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

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

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

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

環境