下線を擬似要素で追加

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 を .scss にコンバートする

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をつける。

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.