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>

npm script でタスク処理する開発環境を作った npm スクリプトでタスク処理をする環境を作りました。akabebeko さんのものを元に修正しました。.sass, Babel, Browserify, 開発用サーバーを立てる、デプロイ用のイメージを作成する

アカベコさんの記事、リポジトリを元に、自分にあった環境を作成しました。

npm-scripts で Web フロントエンド開発を管理する

https://bitbucket.org/Y_NAKANISHI/web-start-npm-script

変更点は以下

  • stylus ではなく Sass を使用する。そのための npm は node-sass を用いる。
  • Sass の import のためのディレクトリも最初から用意。
  • assets以下に、jsだけしか入っていないフォルダ (例えば自分以外の人が以前のプロジェクトで書いたjsを引き継ぐとか、npm にないライブラリを、bower も使わないで管理したいとかそういうフォルダ) を無理くりコピーする。本当は cpx でバチコーンと出来るはずだとは思うんですが、書き方がわからなかった!!
  • 自分は絶対使うので最初から jQuery を仕込む。

もう少し改善したい。

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%にする方法

Sassで文字列を変数に用いる インターポレーション

Sassで変数的に値を用いる方法は次の記事に書いたが、ここで用いることができる変数はあくまでCSSで用いることが出来る「20px」といったものに限られていたた。

Sassにおける $変数名 @mixin @include @extend

インターポレーションというSassで使用できる機能を用いることで、文字列を変数として扱うことが出来る。

変数を宣言する場合
$variable: “.box”

文字列を呼び出すには、#{}で変数名を囲む
#{$variable}

インターポレーションとは、文字列に埋め込まれた特定の記述を評価して、値を挿入するシステムである。

See the Pen used sass variable inter by nakanishi (@nakanishi) on CodePen.

特にBEMに基づいてクラスを設計している場合に、あるエレメントが他のエレメントを指定する場合に、インターポレーションが有用である。

次のように指定することで、そのネストまでのブロック名もしくはエレメント名までを取得できる。

$variable: &

See the Pen used bem block interporation by nakanishi (@nakanishi) on CodePen.

最後だけ色を変えたい 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.