HTML＆CSSお勉強

始まりは、webデザイン担当小川の、この依頼でした。

いや……無理やん？

都合の良いように変更してツッコミが入ったら「最初からそんなんでしたよ？ほら、こっちのillustrator、CS5ですし？CCじゃないですし？データが壊れちゃったんですよ。CCに変えてくれたら大丈夫なんですけどね〜変えてくれたらね〜」と論点のすり替えを行おうかとも思ったのですが。
一応、頑張ってみました。

とは言っても、永遠の初心者コーダーです。
とりあえずダイヤの画像を作って、beforeとafterに入れてみれば何とかなるんじゃないか、と軽い気持ちで試してみたところ……

そりゃこうなりますよね〜。

いっそ画像じゃなくて、疑似要素でダイヤ作っちゃえばいいんじゃないかな。でもそんな知識は……と思った能登でしたが、ふと思い出したのが、いつも利用させていただいている、デザインサンプルでした。
スキルもなければセンスもない私の強い味方です。

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50（NxWorld様　より）

こちらの「マーク #1」を参考に、このようなコードにしてみました。

■HTML

<h1>タイトル</h1>

■CSS

h1 {
  position: relative;
  padding: 0 1em;
  border-bottom: 1px solid #000;
}
h1::before {
  position: absolute;
  bottom: -.2em;
  left: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
h1::after {
  position: absolute;
  bottom: -.2em;
  right: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

成功しました！
レスポンシブでも問題ないです。
確認した限りだと、横320pxまでは両端にダイヤがありました。

タイトルが長くなり、複数行になっても

大丈夫です。
大丈夫じゃないのは、とうとうカラスまで羨み始めた社長だけです。

いつものように、社長のfacebook記事からでした。

暑くて食欲がなくなりがち……だと思ったら、大好きだけど最近足を運べていないレストランがFacebookページを更新したのを見て、お腹が鳴りました。
仕事中のFacebookは色々と危険ですね。

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

レスポンシブデザインにおいて、今や大人気の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; }

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

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

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

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

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

あちこちで語り尽くされているとは思うのですが、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% であることが前提です。
横サイズを限定したい場合は、下の画像のサイズも指定すると、その通りに表示されると思います。きっと。

【ハートブレーン】https://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年までの仕様らしいです。

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

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

特にギャラリーを自作した場合など、そう思いますよね。
いや、私はギャラリー作れないのですが。
サイト内の画像が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行のままでした。

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

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