flex-growで余白をコントロール

下のような縦レイアウトで真ん中の要素を伸ばして底の要素を固定したいときflexを使うと簡単に実現できます。flexboxは余白の部分をどこの要素に割り当てられるかを指定できます。このようにflexはいままで厄介だった余白をコントロールできる特徴をもっています。floatの代わりだけではありません。

html

  <ul class="Container">
    <li class="Container__item">
      <dl class="ImgBox">
        <dt class="ImgBox__block"><img class="ImgBox__block-img" src="sample.jpg" alt="わんこ"></dt>
        <dd class="ImgBox__text">テストテストテストテストテス</dd>
        <dd class="ImgBox__date">2019/04/23</dd>
      </dl>
    </li>
    <li class="Container__item">
      <dl class="ImgBox">
        <dt class="ImgBox__block"><img class="ImgBox__block-img" src="sample.jpg" alt="わんこ"></dt>
        <dd class="ImgBox__text">
          テストテストテストテストテストテストテストテストテストテストテストテストテストトテストテストテストテストテストテストテストテスト
          テストテストテストテストテストテストテストテストテストテストテストテストテストトテストテストテストテストテストテストテストテスト
        </dd>
        <dd class="ImgBox__date">2019/04/23</dd>
      </dl>
    </li>
  </ul>

日付の部分を右の要素のように底に固定する感じにしたい。flexを日付の部分の余白をImgBox__textクラスに割り当てるといい感じになりそうです。割り当てる方法は「flex-grow」を使うと割り当てることができます。

html

  <ul class="Container">
    <li class="Container__item">
      <dl class="ImgBox">
        <dt class="ImgBox__block"><img class="ImgBox__block-img" src="sample.jpg" alt="わんこ"></dt>
        <dd class="ImgBox__text">テストテストテストテストテス</dd>
        <dd class="ImgBox__date">2019/04/23</dd>
      </dl>
    </li>
    <li class="Container__item">
      <dl class="ImgBox">
        <dt class="ImgBox__block"><img class="ImgBox__block-img" src="sample.jpg" alt="わんこ"></dt>
        <dd class="ImgBox__text">
          テストテストテストテストテストテストテストテストテストテストテストテストテストトテストテストテストテストテストテストテストテスト
          テストテストテストテストテストテストテストテストテストテストテストテストテストトテストテストテストテストテストテストテストテスト
        </dd>
        <dd class="ImgBox__date">2019/04/23</dd>
      </dl>
    </li>
  </ul>

CSS

.ImgBox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100%;
}
.ImgBox__block {
  margin: 0 0 10px;
}
  .ImgBox__block-img {
    width: 100%;
  }
.ImgBox__text {
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin: 0 0 10px;
}
.ImgBox__date {
  text-align: right;
}

SCSS

.ImgBox{
	display: flex;
	flex-direction: column;
	height: 100%; //これがないと機能しない
	&__block{
		margin: 0 0 10px;
		&-img{
			width: 100%;
		}
	}
	&__text{
		flex-grow: 1; //余白を割り当てる
		margin: 0 0 10px
	}
	&__date{
		text-align: right;
	}
}

flex-growは余白の部分をどの要素にどれくらい分配するか指定することのできるプロパティです。計算方法はflexアイテムのflex-growの合計を求め、その合計値の数だけ余白を分割し指定した要素に分配します。今回の場合はImgBox__textクラスに1、ほかの要素は指定していませんので(デフォルトは0)余白の部分は分割されずにそのままImgBox__textクラスに余白全てを割り当てるという意味になります。

flex-grow: 1 をすべてのアイテムに指定した場合

flex-growを使うと簡単に余白をコントロールできます。

動的に記事を出力するとき、通常であればPHPを使って文字列を省略してきました。しかしPHPがわからない、仕事でシステムの人に頼むのも面倒。そのような人に持って来いなのが今回の省略技です。なんとCSSを使って文字列を省略することができるのです。今回はこの方法をご紹介します。

text-overflow

このプロパティは、ボックスに収まらない文章の表示方法を指定できます。そして表示方法を「ellipsis」に指定するとはみ出して表示されない文字列を省略します。

使用方法

省略したい文字列の要素にクラス「is-text-overflow」を追加するだけ。

html

<div class="Contents">
  <div class="Container">
    <div class="Container__text is-text-overflow">
      長い長い長い長い長い文字列を省略します。
      長い長い長い長い長い文字列を省略します。
      長い長い長い長い長い文字列を省略します。
    </div>
  </div>
</div>

CSS

.Container {
  width: 300px;
  margin: 30px;
  padding: 30px;
  border: 1px solid #666;
}
.is-text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

SCSS

.Container{
	width: 300px;
	margin: 30px;
	padding: 30px;
	border:1px solid #666;
}
.is-text-overflow{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

transform:scale(1.3)

マウスオーバーのアクションは色を反転させたり、少し透明にしたりいろんなアクションがあります。今回はCSSだけを使いマウスオーバー(hover)時に画像が拡大するアクションを紹介します。

Javascriptを使わないのでやり方は簡単。マウスオーバーする要素に画像を入れ「transform:scale(1.3)」を追加する。アニメーションにしたいので値の変化をアニメーションさせる「transition-duration」を使う。

<div class="Contents">
  <div class="Contents__img">
    <a class="is-hover-scale" href="sample.html">
     <dl class="ImgTextBox">
       <dt class="ImgTextBox__wrap is-overflow-hidden">
        <img class="ImgTextBox__wrap-img" src="sample.jpg" alt="わんこ">
       </dt>
       <dd class="ImgTextBox__text">hoverすると画像が拡大するサンプル</dd>
     </dl>
   </a>
  </div>
</div>

SCSS

.ImgTextBox{
	width: 500px;
	margin: 20px;
	padding: 20px;
	border: 1px solid #666;
	&__wrap{
		width: 100%;
	}
	&__text{
		padding: 15px;
		font-size: 20px;
		text-align: center;
	}
}
//hover
.is-hover-scale{
	&:hover{
		img{
			transform:scale(1.3);
			transition-duration: 0.3s;
		}
	}
}
.is-overflow-hidden{
	overflow: hidden;
}

CSS

.ImgTextBox {
  width: 500px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #666;
}
.ImgTextBox__wrap {
  width: 100%;
}
.ImgTextBox__text {
  padding: 15px;
  font-size: 20px;
  text-align: center;
}
.is-hover-scale:hover img {
transform: scale(1.3);
transition-duration: 0.3s;
}
.is-overflow-hidden {
overflow: hidden;
}

使用方法

追加するとこんな感じ

上記のように黒くする方法

クラス「is-overflow-hidden」を追加した要素にクラス「-bg-black」を追加。クラス「is-hover-scale」を追加した要素にクラス「-opacity」を追加。

html

<div class="Contents">
  <div class="Contents__img">
    <a class="is-hover-scale -opacity" href="sample.html">
     <dl class="ImgTextBox">
       <dt class="ImgTextBox__wrap is-overflow-hidden -bg-black">
         <img class="ImgTextBox__wrap-img" src="sample.jpg" alt="わんこ">
       </dt>
       <dd class="ImgTextBox__text">hoverすると画像が拡大するサンプル</dd>
     </dl>
   </a>
  </div>
</div>

CSS

.ImgTextBox {
  width: 500px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #666;
}
.ImgTextBox__wrap {
  width: 100%;
}
.ImgTextBox__text {
  padding: 15px;
  font-size: 20px;
  text-align: center;
}
.is-hover-scale:hover img {
transform: scale(1.3);
transition-duration: 0.3s;
}
.is-hover-scale.-opacity:hover img {
opacity: 0.6;
}
.is-overflow-hidden {
overflow: hidden;
}
.is-overflow-hidden.-bg-black {
  background: #000;
}

SCSS

.ImgTextBox{
	width: 500px;
	margin: 20px;
	padding: 20px;
	border: 1px solid #666;
	&__wrap{
		width: 100%;
	}
	&__text{
		padding: 15px;
		font-size: 20px;
		text-align: center;
	}
}
.is-hover-scale{
	&:hover{
		img{
			transform:scale(1.3);
			transition-duration: 0.3s;
		}
	}
	&.-opacity{
		&:hover{
			img{
				opacity: 0.6;
			}
		}
	}
}
.is-overflow-hidden{
	overflow: hidden;
	&.-bg-black{
		background: #000;
	}
}

pointer-events: none;

「pointer-events: none;」はマウスイベントを無効するものですが、要素が重なっている場合は背後にある要素にマウスイベントが発生します。z-indexの値を無視して背面要素を操作可能することができます。

以下のように背面の要素にリンクがある場合、z-indexの値が大きい要素にカーソルを合わしても背面要素のリンクをクリックすることができない。

html

<div class="Contents">
  
<div class="Contents__text">
    ここをクリック
  </div>

  
<div class="Contents__img">
    <a href="sample.html"><img src="sample.jpg" alt=""></a>
  </div>

</div>

css

.Contents {
  position: relative;
}
.Contents__text {
  position: absolute;
  padding: 30px;
  background-color: #78b54a;
  z-index: 2;
}
.Contents__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

上に重なっている要素に「pointer-events: none;」を追加するとz-indexの値を無効にしクリックできるようになる。

html

<div class="Contents">
  
<div class="Contents__text">
    ここをクリック
  </div>

  
<div class="Contents__img">
    <a href="sample.html"><img src="sample.jpg" alt=""></a>
  </div>

</div>

css

.Contents {
  position: relative;
}
.Contents__text {
  position: absolute;
  padding: 30px;
  background-color: #78b54a;
  z-index: 2;
  pointer-events: none; //ここに追加
}
.Contents__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

object-fit: cover

画像の横幅と縦幅を固定し動的に画像を出力したとき、縦横比が崩れてしまいます。これに対応する場合、意外と面倒ですが、「object-fit」を使うと簡単に対応できます。

縦横比の崩れ

たとえば横幅を600pxと縦幅800pxに固定し比率の違う画像を表示すると以下のように画像の比率が崩れ違和感のある画像になります。

このような場合PhotoShopなどの画像ソフトを使って比率に合うようにトリミングするのですがCSSの「object-fit: cover」を使うことで以下のように自動で両サイドをカットしトリミングします。

.imageWrapper{
  width:600px;
  height: 800px;
}
.imageWrapper img{
  width:100%;
  height:100%;
  object-fit: cover; //追加
}

レスポンシブ時メイン画像など縦幅だけ固定しスマホ版表示

レスポンシブ対応の時、メイン画像がスマホ版で小さくなってしまう場合縦幅はそのままに表示したいときなど「object-fit: cover」が活躍します。

スマホでも画像が小さくならないように高さを指定。「object-fit: cover」を使えば横幅が変わっても画像の比率崩れがない。

.imgContent {
  
  width: 1000px;
}

@media only screen and (max-width: 768px) 
{
  .imgContent {
    width: 100%;
  }
}
.imgContent__img{
    height: 600px;
    margin: 0;
}
@media only screen and (max-width: 768px) {
  .imgContent__img {
        width: 100%;
        height: 600px;
  }
}
.imgContent__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

flex-flow: row-reverse

レスポンシブ対応などで順序を逆転したいときがあります。
そのときはたった一行で逆転します。

display:flex;を追加している下に以下のコードを入れるだけで対応できます。

display:flex;

/* 以下のコードを追加し位置を逆転 */
flex-flow: row-reverse;

またに使うCSS の :not() の使い方をまとめました。

基本的な使い方

基本的な使い方はこのタグ以外適用したい場合に使います。カッコの中に除外したいタグを指定するだけで使用できます。CSS3が使えるようになり使う機会が増えてきました。

指定タグを除外

/* Pタグ以外適用 */
:not(p) {
  color:#FFF;
}

/* divタグ以外適用 */
:not(div) {
  color:#FFF;
}

/* h1タグ以外適用 */
:not(h1) {
  color:#FFF;
}

指定IDのみ除外

/* #id以外適用 */
:not(#id) {
  color:#FFF;
}

指定クラスのみ除外

/* Pタグの.class以外適用 */
p:not(.class) {
  color:#FFF;
}

指定擬似クラスのみ除外

/* 擬似クラスhover以外適用 */
a:not(:hover) {
  color:#FFF;
}

/* 擬似クラスfirst-child以外適用 */
div:not(:first-child) {
  color:#FFF;
}

指定の属性セレクタのみ除外

/* href 属性以外適用 */
a:not([href]) {
  color:#FFF;
}
/* href 属性以外適用 */
a:not([href]) {
  color:#FFF;
}

/* href 属性example.comを含んでいるもの以外適用 */
a:not([href*="example.com"]{
  color:#FFF;
}

/* type 属性textを含んでいるもの以外適用 */
:not([type="text"]) {
  color:#FFF;
}

指定の子要素のみ除外

.contensクラスのh2のみ除外

<div class="contents">
   <h2>ここが除外</h2>
   <p>ここは適用</p>
   <p>ここは適用</p>
</div>

.contents :not(h2) {
  color:#FFF;
}

実際に使った例

チェックボックス以外

<form class="form">
   <dl>
      <dt>テキスト</dt>
      <dd>
         <div>
            <input id="b" name="b" value="" type="text">
         </div>
      </dd>
   </dl>
   <dl>
      <dt>チェック</dt>
      <dd>
         <div>
            <label>
               <input id="c" name="c" value="1" type="checkbox">こちらをチェック
               <span></span>
            </label>
         </div>
      </dd>
   </dl>
</form>

.form dd input:not([type="checkbox"]){
	background: #fff;
	padding: 0 0 0 10px;
	width: 100%;
}