display: flex で画面幅に対して相対的に縦横の長さが決まる親要素divの中に、親要素の幅に対して比率で決まる画像を中央に配置する

タイトルが長くなったが、レスポンシブのサイトを画像メインで作る場合によく使うレイアウトで、幅、高さを親要素に対する割合で決めて、さらにその中に伸縮する画像を中央に配置したい場合のやりかた。

.background に対してバックグラウンドイメージを指定すると、背景画像を使ったボタンに、画像のテキストを中央揃え、といったことが可能になる。

See the Pen used display: flex center by nakanishi (@nakanishi) on CodePen.

ちなみに以下のようなレイアウトにしてもflexは思った通りにはならない。何故なら子要素としてボタン用とテキスト用の画像があるため、この2つを並べようとしてしまうため。absolute のほうだけを真ん中に、みたいな気持ちはあるが、ならない。

<div display:flex, justify-content:center, align-items: center/>
<img/ ボタンの画像>
<img/ ボタンのテキスト absolute>
</div>

display: flex を使ってヘッダー、均等並びのボックスを実装

See the Pen flex ヘッダー等の横棒をそろえる二段 by nakanishi (@nakanishi) on CodePen.

//赤い要素に幅があれば、
//横に詰めていって、入らなくなったら wrap する指定
//ラップした上で横方向均等揃えになる

.flex-box
width: 200px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右は詰めて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center
//折り返しを許可
flex-wrap: wrap

&__item
width: 50px
height: 10px
background-color: red
border: solid 1px black

See the Pen flex ヘッダー等の横棒をそろえる by nakanishi (@nakanishi) on CodePen.

.title
font-size: 60px
color: yellow
text-align: center

.flex-box
//flex-box を指定する要素には幅を指定する。
//絶対指定する必要はないが、その幅の中で配置が決まる
width: 640px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右につめて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center

//display: flex した対象の
//子要素には何も指定しなくていい
&__item
width: 150px
height: 10px
background-color: red
border: solid 1px black

background 背景

背景画像を指定するbackground-imageを使う際に、まず考えるのは、背景画像を指定したブロックの横幅、縦幅である。

ボタンのように横幅縦幅を固定していい場合は、width:とheight:で指定する。

少しむずかしいのは、あるセクションの背景画像のように、横幅が変化する場合である。この場合の定番処理として、min-widthを指定し(これはbody要素に付けることが多い)、背景画像をつけるセクションの高さをheight:で指定し、この領域をおおう背景画像のサイズをbackground-sizeで指定する方法である。

次のコードでは、background-sizeを100% autoにしているが、横幅は100%つまり、背景を指定したブロックと同じ幅になるが、縦幅がautoのため、元画像の縮尺を保つため、結果として横幅を短くすると、背景画像の高さが足りなくなる。

See the Pen used 100% by nakanishi (@nakanishi) on CodePen.

次のコードはこの目的を達成するために改善されたものである。

background-sizeをcoverに指定することで、画像の比率を保ったまま、対象の範囲を全て覆うように、画像サイズが変更される。positionをcenterにするのもポイントである。ただしこれは、縦幅が固定されている場合にのみ機能する。

See the Pen used cover by nakanishi (@nakanishi) on CodePen.

しかし次のようにコンテンツの量によって高さが決まるような場合にも機能する。

See the Pen used cover by nakanishi (@nakanishi) on CodePen.

画像を完全なレスポンシブにする場合は次の画像を参照。

バックグラウンドイメージ背景の画像を画面幅100%にする方法

最後だけ色を変えたい nth-child not last

最後だけ色を変えたい。最後だけ、横棒がいらない。そういうときの書き方です。

ポイントはクラス:not(nth-child)とかくところ。.box:not(last-child)というふうに。

さらに疑似要素をつけたいけど、最後だけは付けたくないときは、.box:not(last-child):afterとすればよい。boxクラスのうち、最後以外の要素に、アフター疑似要素をつけますよ、の意。

See the Pen exceptforlast by nakanishi (@nakanishi) on CodePen.

footerによくある横並び、縦線で区切られたリストの作り方

よくある横にならんだ文字が縦線で区切られたフッターの作り方。

含まれるItemをinline-blockにすることでマージンやパディングを付けることが出来るし、横に並ぶし、均等に配置できるし、中身の分量で伸び縮みすることが出来る。

See the Pen used footer list by nakanishi (@nakanishi) on CodePen.

PSDファイルでデザインが規定されている場合の、レスポンシブデザインを実装する手順について

See the Pen used レスポンシブ by nakanishi (@nakanishi) on CodePen.

PSDファイルでデザインが規定されている場合、大きく分けて2つの実装パターンがある。

1つは全ての要素の「幅、高さ」をPSDファイルで指定されたpxで固定するパターンで、その場合、ラッパーのマージンがAUTOで変化する。つまり画面幅の変化に対して、「追従して変化するのは」ラッパーのマージンだけ、ということになる。(またラッパーに対してmin-width: –px で、それ以上小さくならないように指定することも多い。) これはユーザーのブラウザ横幅が、ある一定値よりも大きいほうでバリエーションが多いことを想定できる場合、つまりPC版で主に使われる。(900pxとか970pxとか1200pxとか、比較的大きい幅で見る人が多いであろう状況)

このパターンの実装は比較的容易で、各要素の幅をPSDファイルで指定されたpxに設定し、マージンも規定されたpxで設定すればよい。(特に画像パーツの幅、高さは全て指定してよい)

次に2つめのパターンとして、スマートホン版等、どんな横幅でも同じ見た目にするには、全ての要素を%で指定する。

このパターンの場合、width を指定すれば、margin: auto は効く。ただしposition: absolute、relative 等を設定した場合、margin: auto は効かない。しかし、margin-left: –% も left: –% も効く。そのため、中央に配置したい場合は、left: 23%等、マージン幅の全体に占める割合を指定することで配置する。

また画像そのものをレスポンシブにするには次の記事を参照

float position z-index の考察 / 仮説

こんなふうになっているのではないか…仮説…

See the Pen used box float absolute2 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute3 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute4 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute5 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute6 by nakanishi (@nakanishi) on CodePen.

CSSの世界は3層ある

層が上のほうがかならず表示的に上に来る。position層だけはz-indexで表示順を操作できる。

  1. ノーマル層。position: static かつ float: none。 ぶつかり合って、同じ位置は占有できないので、弾かれる。親要素から唯一見える。(position: relativeは例外的にここに存在する。)
  2. float層。ぶつかり合って弾かれるが、1の層の上でおきているので、1の層とは干渉しないし、上に表示される。親要素からは消える。
  3. position層。平面的な世界で、ぶつかりあうことはなく、同じ位置に何個でも置ける。表示順はz-indexで指定する。top,left、z-indexが効く。親要素からは消える。(relativeだけは消えない。例外)
position / float none left / right
static  1層へ  2層へ
relative top,right等効く。1層へ top,right等効く。2層へ
absolue, fixed top,right等効く。3層へ  floatは効かない

標準位置

  • position: static
  • float: none
  • top、left等: auto (0とは違う)