記事内に高さの同じ枠つきの欄を作成する – flexbox を使う方法 –

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改) | comemo com|2013-04-10」で紹介した CSS の flexbox 版です。

一番下の段は、幅が広くなると2列から4列になります。

2016-02-19 at 18.19

comemoarrow

2016-02-19 at 18.17

まだ、細かい検証はしていませんが、とりあえず、公開しておきます。

サムネイル画像のセンタリングについての考察

最終更新日:2016-01-19

サムネイル画像のセンタリングについての考察です。

この記事は、私自身も決して詳しいわけではなく、かつ、説明が面倒なので手抜きである程度、CSS の知識があるという前提で端的にお話しします。

私自身は、例えば、こういう縦長のサムネイル画像があった場合、

2016-01-18 at 11.45.png

続きを読む

「display:table-cell」を使って欄の高さを揃えているボックス内の要素の一部を下に移動する

image

続きを読む

#2013

display:table-cell を使って高さの同じ枠付きのボックスを作成する -見かけ上、ボックスを縦方向につなげる方法についての考察-

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」において、display:table-cell を使って高さの同じ枠付きのボックスを作成する方法について検討しましたが、今度はさらに「見かけ上」ボックスを縦方向につなげる方法について検討してみました。

やり方は、「つなげる」のではなく、「display:table-cell を指定したボックスの中に display:table-row を指定したボックスを複数入れて分割し、結果的にその他のボックスがつながったように見せる」という方法です。

各ブラウザ対応の方は概ね、OK っぽいです。

sdgafgsfd
mac の safari

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)

最終更新日:2014-05-30

以前、「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –」という記事を書きましたが、欄の間に隙間を作るのに、border を背景と同じ色にするといった力技ではなくて、スマートな方法が分かったので、その覚書です。

display:table を指定している要素に「border-collapse: separate; border-spacing: 10px;」といった感じの記述を追加すると、欄と欄との間にスペースを確保できるようです。

ブログ上での表示は、以下のような感じです。

見出し

本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

見出し

本文 本文 本文

見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –

※ 改訂版を作成しました。
記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)
(2013年4月10日追記)

前回の記事「記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –」の方法だと、記事への記述がちょっとごちゃごちゃしていて、カスタム CSS をあまり有効に利用できていないような気がするので、極力、記事への記述を最小限に抑える方法のひとつとして、「display: table」を使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

検討した結果を反映させたデモは以下のとおりです。

srgadafda

続きを読む

#2013, #nodisplay

記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –

高さの同じ枠つきの欄を作成するとき、現在では jQuery を使うのが一般的なのだそうですが、また、一般のウェブサイトを見てみると、高さの同じ枠つきの欄自体、ほとんど使われていないようなので、個別に調整してしまったほうが手っ取り早いような気もするのですが、勉強の一環として、CSS のみを使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

参考にしたのは以下の記事です。5年以上前の記事です。

agsgffsd
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

続きを読む

#2013