タイトルが長くなったが、レスポンシブのサイトを画像メインで作る場合によく使うレイアウトで、幅、高さを親要素に対する割合で決めて、さらにその中に伸縮する画像を中央に配置したい場合のやりかた。
.background に対してバックグラウンドイメージを指定すると、背景画像を使ったボタンに、画像のテキストを中央揃え、といったことが可能になる。
See the Pen used display: flex center by nakanishi (@nakanishi) on CodePen.
ちなみに以下のようなレイアウトにしてもflexは思った通りにはならない。何故なら子要素としてボタン用とテキスト用の画像があるため、この２つを並べようとしてしまうため。absolute のほうだけを真ん中に、みたいな気持ちはあるが、ならない。
<div display:flex, justify-content:center, align-items: center/>
<img/ ボタンの画像>
<img/ ボタンのテキスト absolute>
</div>
アカベコさんの記事、リポジトリを元に、自分にあった環境を作成しました。
https://bitbucket.org/Y_NAKANISHI/web-start-npm-script
変更点は以下
もう少し改善したい。
https://vue-loader.vuejs.org/en/configurations/pre-processors.html
Vue-cli で開発環境を用意してもらっても、そのままでは Sass はかけない。まずは以下の npm をインストール。
npm install sass-loader node-sass --save-devその上で lang=”sass” を指定する。
<style lang="sass">
/* write sass here */
</style>See the Pen 斜め by nakanishi (@nakanishi) on CodePen.
See the Pen used 斜め 実際 by nakanishi (@nakanishi) on CodePen.
背景画像を指定する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.
画像を完全なレスポンシブにする場合は次の画像を参照。
Sassで変数的に値を用いる方法は次の記事に書いたが、ここで用いることができる変数はあくまでCSSで用いることが出来る「20px」といったものに限られていたた。
インターポレーションという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.
透明度を指定する場合、Sassであれば16進数で色を指定できる。CSS3の場合はRGBで指定するしかできない。アルファ=透明度は、1=100%で指定する。
See the Pen jyyjzR by nakanishi (@nakanishi) on CodePen.
最後だけ色を変えたい。最後だけ、横棒がいらない。そういうときの書き方です。
ポイントはクラス:not(nth-child)とかくところ。.box:not(last-child)というふうに。
さらに疑似要素をつけたいけど、最後だけは付けたくないときは、.box:not(last-child):afterとすればよい。boxクラスのうち、最後以外の要素に、アフター疑似要素をつけますよ、の意。
See the Pen exceptforlast by nakanishi (@nakanishi) on CodePen.
よくある横にならんだ文字が縦線で区切られたフッターの作り方。
含まれるItemをinline-blockにすることでマージンやパディングを付けることが出来るし、横に並ぶし、均等に配置できるし、中身の分量で伸び縮みすることが出来る。
See the Pen used footer list by nakanishi (@nakanishi) on CodePen.
丸を書く場合には四角いdivを作ったあとにborder-radiusで丸くすれば良い。
See the Pen used circle by nakanishi (@nakanishi) on CodePen.