カテゴリー: Sass

img で文字やロゴを作成し、

.image {
  display: block;
  margin: 10px auto; //これは縦に並んだ要素の間隔調整用
  padding: 0 3px 5px; //ここで文字と線の間隔を調整
  border-bottom: solid 1px transparent; 線が出た時に高さが変わらないように

  &:hover {
    border-bottom: solid 1px $colorBlack; 
  }

かつ、リンクエリアが適切で、センターに来るようにする。

imageをinline-blockにして、そのうえのaはそのまま、そのさらに上のlist要素にtext alighn centerを実施

あるブロックの終わりに、任意の長さの線を引く

.target {
  &::after {
    content: "";
    display: block;
    margin: 25px auto 0;
    border-bottom: 1px solid $colorBlack;
    width: 140px;
  }
}

 

sass 公式のサイトで紹介されていた「sass-convert」を用いて.sassと.scssをコンバートすることができる。

sass-convert は rubyベースのツール。そのため、まずは ruby のバージョンアップを行った。

私は rbenv で rubyを管理しているので、これを使って新しい rubyをインストールする。(rbenv,ruby,homebrewの更新は他の記事参照)

rbenv versions でインストールされているバージョンを確認

rbenv global 2.4.
rbenv version で今使ってバルージョンを確認

sass をインストールする。これと一緒に sass-convert がインストールされる。
http://uxmilk.jp/38108

sass-convert -F sass -T scss src/sass src/scss -R
-F元の形式 .sass ならsassに。
-T 書き出しの方式 .scssにしたければscssに。
src/sass が元のフォルダ。src/scss が出力先フォルダ

フォルダ内を全部やりたければ -R recursiveをつける。

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

.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>

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.

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

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

透明度を指定する場合、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.