HTML&CSSお勉強

Flexboxで複数行のリストを作る場合の余白の設定

レスポンシブデザインにおいて、今や大人気のflexですが。
カラムレイアウトなら良いのですが、リストや表を作る時に、綺麗に整えるのは少々難しいようです。

Flexbox 改行の弱点(鼻ちょうちん様 より)

正しくこの記事での指摘通りです。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

このようなタグで、3列・複数行のリストを作る場合、ついこのようにしてしまいがちです。

ul { display: flex; flex-flow: row wrap; margin: 0 -2% 0 0; }
li { width: 32%; margin: 0 2% 0 0; }

しかし、実はこうなります。

space-between

あくまでリストとして考えると、何となく不格好です。
なので、上記の記事の通り、ネガティブマージンを用いてみました。

ul { display: flex; flex-flow: row wrap; margin: 0 -2% 0 0; }
li { width: 32%; margin: 0 2% 0 0; }

ただし、パーセント指定で可変幅に対応させたい、という理由でpxは使わずに。
その結果

ネガティブマージン

こうなってしまいました。
この方法、px指定だと全く問題ないのです。
しかし%の場合、少なく見積もらないと、カラム落ちしてしまうようです。
2%を1%に減らすと、綺麗に表示されました。
少し左に寄ってしまうのですが。

なので、左右にmarginを設定しました。

ul { display: flex; flex-flow: row wrap; }
li { width: 32%; margin: 0 0.5%; }

左右にmargin

パーセント指定(と楽な方法)にこだわるのであれば、これが1番無難なのかもしれません。
他の区切りとは左右幅が狭くなってしまうのが気になりますが。

結局のところ、綺麗に見せたければ、上記の記事で出されていた結論「ブレークポイントで justify-content の指定を分ける」が確かに現時点では1番良いのかもしれません。

2枚の画像を重ねて縦中央に揃えつつレスポンシブに対応したい時

あちこちで語り尽くされているとは思うのですが、2枚の画像を重ね、上に配置した画像を縦横の中央にセンタリングしたい時があります。
情報が錯綜していて、結構ごちゃごちゃになってしまって、かなり試行錯誤したのですが。
自分なりにまとめてうまくいった方法を紹介します。

社長の影を隠す意図ではない

このように、2つの画像を縦横中央に揃えたい場合ですが、少なくとも私の場合、片方を背景画像にしようとして失敗しました。
というのも、レスポンシブwebデザインに対応しようとしていたのです。

なので、あまり良い方法ではないかもしれないのですが、positionとz-indexを使いました。

HTML

<div class="box">
<div class="background"><img src="tanbo.jpg" alt="1枚目の画像"></div>
<div class="photo"><img src="heartbrain.jpg" alt="2枚目の画像"></div>
</div>

CSS

.box {
	position:relative;
	top: 50%;
}
	
.box .background { z-index: 0; }
	
.box .photo {
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
	
.box .photo img {
	width: 30%;
	max-width: 150px;
	height: auto;
}

私が確認した限り、問題はありませんでした。

上のコードは、下の画像が width: 100% であることが前提です。
横サイズを限定したい場合は、下の画像のサイズも指定すると、その通りに表示されると思います。きっと。

【ハートブレーン】http://heartbrain.net

今更すぎるフレキシブルレイアウトについて

世間を騒がせ、コーダーの負担を大幅に減らした、CSS3のフレキシブルボックス。
と言いながら、Nがそれに出会ったのはつい最近という、相変わらずの浦島太郎コーダーなのですが。

フレキシブルボックスとは、画面やブラウザのサイズに応じ、要素の位置やサイズを一定に保ちつつ綺麗に整え、自由自在なレイアウトを実現する、というものです。
レスポンシブwebデザインには欠かせません。
自由自在なレイアウトって何?というと、具体的には要素の配置方向・順序、折り返し方法、整列までできちゃう、という画期的というか、これまでfloatに苦しめられた日々が報われた気がします。

フレキシブルボックスのレイアウト

画像のように、カラムを画面のサイズに応じて自由自在に変えたい時にはとても便利です。
画像は最近各方面にご無沙汰している、最近の社長です。
既にこのブログで紹介した社長の画像ばかりですが、数年前と少しも(本当に少しも)変わらない社長の姿をお楽しみください。

CSS3なので、当然注意しなければならないのは、各ブラウザの対応状況ですが。

Google Chrome(PC)
バージョン4~20までは「display:-webkit-box」
21~28までは「display:-webkit-flex」
28以降は「display:flex」

Firefox(PC)
バージョン2~21までは「display:-moz-box」
22以降は「display:flex」

InternetExplorer(PC)
バージョン9までは「未対応」
10は「display:-ms-flexbox」
11は「display:flex」

Safari(PC)
バージョン3.1~6.0までは「display:-webkit-box」
6.1以降は「display:-webkit-flex」

標準ブラウザ(Android)
バージョン2.1~4.3までは「display:-webkit-box」
4.4では「display:flex」

Google Chrome(Android)
バージョン35?「display:flex」

Safari(iOS)
バージョン3.2~6.1までは「display:-webkit-box」
7.0では「display:-webkit-flex」

CSS3の「フレキシブルレイアウト」使い方まとめ(フラップイズム様 より)

最新版は全て display:flexで統一されている……と思いきや、Apple……!
しかし -o- だの -ms だの書かなくて済むようになったのはありがたいです。
CSSの行数的に。

SafariとかFirefoxは最新版へのアップデートの敷居が低いので、ほぼ最新版だと思ってよさそうですし。
IEは11以外はYahooすらまともに見れない状況で、11へのアップデートを余儀なくされていますし。

CSSの記述ですが、Google先生にお伺いを立てると、display:flex と display:flexbox が出てくるのですが。
display:flex が正解で、display:flexbox は2015年までの仕様らしいです。

【ハートブレーン】http://heartbrain.net

高さの違う画像をcssのみでタイルのように並べたい場合

写真をかっこよく並べたい。

なかなか難しい

特にギャラリーを自作した場合など、そう思いますよね。
いや、私はギャラリー作れないのですが。
サイト内の画像がPinterestのようなレイアウトにできたら……!

jQueryプラグインなどで対応可能のようですが、ここは敢えてcssのみでできたらうれしいな、などと他力本願な私の願いを叶えてくれる記事を発見しました。

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック(コリス様 より)

プラグインからヒントを得て実装するなど、私には到底できません。

しかし

順番まで狂った

どうしてこうなった……。

いや、恐らく5の画像(縦長の画像)が、1・2の画像の合計よりも少し長くて高さが余ったから、自動計算などにすると必然的に3行目が出来上がるのだろうと予想はつきますが。
何故なら

#photos img {
  width: 100% !important;
  height: auto !important;
}

この記述を削除すれば、2行にはなるからです。
ただし、1→3→(下へ)→2→4、という順番にはなるのですが。
これでいいか、と一瞬だけ私の中に巣食うナマケモノが囁いたのですが、レスポンシブwebデザインの場合、画像の比率がおかしくなります。

もうtableタグにするしかないのかなぁ、と諦めかけたのですが、何とか解決法を見つけました。
恐らく完璧な方法とは言い難い、その場しのぎではあるのだと思いますが。
付け焼き刃はいつものことなのです。

HTML

<div id="photo">
<div>
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
<div><img src="5.jpg"></div>
</div>

CSS

#photo {
	display: table;
	width: 100%;
	margin: 0 0 30px;
	}
#photo div {
	display: table-cell;
	width: 35%;
	padding: 0 0 0 5%;
	}
#photo div:first-child {
	width: 65%;
	padding: 0;
	}
#photo div ul {
	line-height: 0;
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	column-count: 2;
	column-gap: 10px;
	width: 100%;
	}
#photo div ul li {
	padding: 0 0 10px;
	}
#photo img {
	width: 100%;
	height: auto;
	}

参考にさせていただいた記事では、画像を隙間なく並べるということで、column-gapが0になっていますが、今回私は少しだけ間隔を空けたかったので、2にしました。
尚、問題発生時は、column-gapを0にしても、画像1〜3は3行のままでした。

もう少しスマートで効果的な方法も探します。

【ハートブレーン】http://heartbrain.net

Lightboxの表示位置がおかしい原因にこんなパターンも

HTMLの基本といえば、基本なのですが……。
つい忘れがちなんですよね。
DOCTYPE宣言って。

Lightbox系のプラグインの表示位置がおかしい、という内容の嘆き兼無能告白を、何度かこのブログでしていると思うのですが。
またこのような現象が起きました。

下すぎてスマートフォンでは読み取れません

jQueryのバージョンが1.11.0だったので、これが悪いのか?と思って2.3.0にしても変わらず。
bodyの閉じタグ直前に置いていたscriptタグが悪いのか?と思って位置を上にしても変わらず。
今度こそお手上げか?と思ったのですが、明らかと言える原因がありました。
明らかというか、盲点というか、灯台下暗しなのですが。

DOCTYPE宣言を忘れていたのです……!

DOCTYPEとは、各ブラウザに「このファイルはHTML4だよ」「このファイルの規格はXHTMLだよ」と最初に伝えるものです。
ファイルの最上部で宣言します。
これがなくても、cssなどは各ブラウザ毎の解釈によって大体の場合は正しく表示されるのですが、プラグインだとそうも行かないこともあるようです。
つい省略してしまいがちですが、やはり大きな意味があるのですね。

ちなみに、HTML4の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTMLの場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5の場合

<!DOCTYPE html>

HTML5はこれまでの賑やかさがウソのような、シンプルなDOCTYPE宣言です。

ヘッダーは訳の分からない記述も多くて、つい何も考えずにコピー&ペーストで済ませてしまいそうなのですが、1つ1つ意味を読み解くと、新しい発見があって楽しいです。

【ハートブレーン】http://heartbrain.net

1 2 3 4 8
メールでのお問合せ・お見積りはコチラ