ひかげStyle ロゴ

ひかげStyle:ひかげすたいる

WordPress(ワードプレス)やMacやxreaの他に、プラスひかげ的Webスタイル。

2016.12/30 自作テーマへ変更。

Simple Grid CSSでグリッド部分のメモ 2020-09-24

2020年9月24日 MEMO 0

軽量でシンプルなcssのレスポンシブでグリッド部分を探している、@ひかげです。

Bootstrap(ブートストラップ)ほど多機能ではなく、リセットcss(もしくはノーマライズcss)に、ボタンデザインやグリッドシムテムと最低限のcssで、個人的にミニマムな軽量レスポンシブWebデザインを目指してみます。

Simple Gridのグリッドシステム

今回は、軽量で使い勝手の良さそうなcssフレームワークの「Simple Grid」から「GRID SYSTEM」のみを抜き出しします。

グリッドシステムのCSSコード

およそ、1.5kbのcssです。

/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

グリッドシステムの使い方

公式サイトの中ほどに「Simple Code」の記載があります。

使いやすい12分割なので、簡単に使用できます。

Simple Gridの補足

Simple Gridをフル活用の場合には「ROOT FONT STYLES」に、*(アスタリスク)の指定があるので、少し使い勝手が悪いかもしれません。(html,bodyへ*の内容を記述してROOT FONT STYLESを削除するなど)

ブレイクポイントも、720pxなので、iPadでも使いやすいように修正すると、1カラム表示ができます。

@media only screen and (min-width: 45em) { /* 720px */@media only screen and (min-width:769px) { に修正。

おわりに

基本的な大枠は「.col-8」と「.col-4」の2カラムで実現できるので、必要なところだけチョイスすると更に軽量化できますね。

最新のコメント 7件

Welcome to WordPress
2016年12月30日 ひかげ
コメントテスト。 あああ...
親指タイプ トラックボール ロジクールM570
2012年11月6日 tt
再度、御返事有難うございました...
親指タイプ トラックボール ロジクールM570
2012年11月6日 ひかげ
ttさん、ふたたびのコメントあ...
親指タイプ トラックボール ロジクールM570
2012年11月5日 tt
ひかげさん 「ドラッグよりも...
親指タイプ トラックボール ロジクールM570
2012年9月4日 ひかげ
ttさん、コメントありがとうご...
親指タイプ トラックボール ロジクールM570
2012年9月4日 tt
私は今まで多くのトラックボール...
Apple Wireless Keyboard ケース 衝動買い
2012年8月31日 ひかげ
mimiさん、コメントありがと...

@ひかげ

WordPressカスタマイズ向け自作テーマ kunai

ひかげ WP自作テーマ1

ひかげStyle