single-ref.php - 2017.12.14 - 148 - https://www.nascha.jp/ref/column.html

REFERENCE

ボックス構造

概 要

本文コラムは段落ごとのくくりをcolumnで囲み、子ども要素としてgrid-boxを使用する。 <div class="column"> <div class="grid-box"> 本文 </div><!--grid-box : end--> </div><!--column : end-->

column間はソースを見る時に一目でわかるようにしたいので、下記のような区切りを入れる。
上下には3行分の改行を入れること。 <!--+++++++++++++++++++++ column break point +++++++++++++++++++++-->

grid-box間で意味のあるスペースを作りたい時は下記の区切りを入れて見やすくする。 <!--============= grid break point =============-->

分割無し（幅670px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box"> 本文 </div><!--grid-box:end--> ★マージンをあえてなくす（クラス名：nmを追加） <div class="grid-box nm">本文</div><!--grid-box:end--> ★マージンを広く（クラス名：mbを追加） <div class="grid-box mb">本文</div><!--grid-box:end--> ★セル間のマージンを狭く（スマホのみ）（クラス名：nwを追加） <div class="grid-box nw">本文</div><!--grid-box:end-->

2分割（幅：330px／センター40px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box half"> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

3分割（幅：206px／センター41px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box three"> <div class="cell">本文</div> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

4分割（幅：145px／センター40px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box four"> <div class="cell">本文</div> <div class="cell">本文</div> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

左が大きい（453px：41px：206px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box one-two"> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

左が大きい（515px：40px：145px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box one-three"> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

右が大きい（206px：41px：453px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box two-one"> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

右が大きい（145px：40px：515px）

このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
このその間は私か利器自分が起るば、大森さんのつもりから傍点の私をもし今所有と応じが何権力に大関係へ行っようにとうとうお馳走よりしたんて、近頃どうしても自覚をなったて来るたもので潜んでます。
<div class="grid-box three-one"> <div class="cell">本文</div> <div class="cell">本文</div> </div><!--grid-box:end-->

post_pages

デザイニングナスカはwebデザインなどのweb系、およびDMデザインなどの平面デザインを行っています。

安く、手早く、それなりに。をコンセプトとしてデザイン活動を行っています。
デザイニングナスカという言葉は創立時に多くの知り合いの方のアイデアを元に作った造語です。
この名前をずっと長く使えるように頑張っていきたいと思っています。
サイトメニューを見る ページトップに戻る

Twitter　Facebook　mail