要素の高さや幅を決める際の%とvwとvhの使い分けについて。

%　は親要素に対しての比率
vwとvh　はブラウザ画面に対しての比率

.side-bar {
  width: 100vw;
  height: 100vh;
}

.side-bar {
  width: 100%;
  height: 100%;
}

widthは%を使うことが多く、
hightはvhを使うことが多い。

webページは縦に長く、下へスクロールして閲覧することが多く、
横幅はどの媒体でも全て映しているため、上記の様な傾向があるのだと思う。

どうも7noteです。よく見ると半角スペースみたいなのが入ってる現象を解説

私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。

結論：インライン要素とインライン要素の間に改行を入れてはいけない

HTMLを記述する際、このような書き方はNGです。

index.html

<div>
    <span>あいう</span>
    <span>えお</span>
</div>

--結果--
あいう えお

問題点として、エディタでインライン要素とインライン要素の間に改行を入れてしまうと実行結果側で半角分の余白ができてしまいます。
※inline-blockでも同じ。

対策方法

改行を入れない

index.html

<div>
    <span>あいう</span><span>えお</span>
</div>

改行している範囲をコメントアウトする

index.html

<div>
    <span>あいう</span><!--
    --><span>えお</span>
</div>

閉じタグの位置を変える（汚くなるのでオススメしません）

index.html

<div>
    <span>あいう</span
    ><span>えお</span>
</div>

まとめ

調べたところcssを使って開いた余白を詰める方法などもありましたが、私はあまりオススメしません。予期せぬ箇所へのcssの影響が出るかもしれないので。
今回紹介した書き方であれば、HTMLを綺麗に書くことを意識するだけでいいですし、他の人がソースを見たときにも見やすいのでオススメです。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

概要

はてなマークのバルーン（ホバーしたら説明が出てくるあれ）をCSSで実装したのですが、キャッシュを読み込んでから最初のホバーのときになぜかちらついてしまいました。

背景

会社のアプリケーションのフロントを新しく作り変えるという業務の最中、上記のようなことが起きました。JSを使っているわけでもないので、まったくわかりませんでした。

解決法

Chromeで検証をしたところ、事前に読み込まれているはずのフォントの設定ファイルが、ホバーした時にもう一度読み込まれているようです。
ヘッダーを確認したところ。同じ記述のあるファイルが2度読み込まれていました。
片方を読み込まないようにしたら無事正しい挙動をしてくれました。

今回はvue.js バージョン。

そのままコピペなので、参考程度にどうぞ。

<style>

    table.simple {
        border: 1px solid #ededed;
        width: 99%;
        margin: auto;
    }

    table.simple th  {
        padding: 5px;
        border-bottom: 1px solid #ededed;
        background-color: #2cb696;
        color: #fff;
    }

    table.simple td , table.simple th  {
        padding: 5px 15px;
        border-right: 1px solid #ededed;

    }

    table.simple td:last-child ,  table.simple th:last-child  {
        border-right: 0px;
    }

    table.simple tr  {
        border-bottom: 1px solid #ededed;
    }


</style>

<template>

            <div>

                <table class="simple">

                    <tr>
                        <th>入金日</th>
                        <th>売上</th>
                        <th>タイプ</th>
                    </tr>

                    <tr>
                        <td>5月14日</td>
                        <td>3,000円</td>
                        <td>果物</td>
                    </tr>

                    <tr>
                        <td>5月22日</td>
                        <td>5,300円</td>
                        <td>米</td>
                    </tr>

                </table>

            </div>


</template>

前回、よく見る『中央寄せ横並びレイアウト』を3パターンのCSS Flexboxで実装してみるで『中央寄せ横並びのレイアウト』をFlexboxで実装する方法について紹介しました。

しかし上記の記事で紹介した具体例はFlexboxが固定長であるため、レスポンシブなレイアウトではありませんでした。

そこで今回はアイテムの幅が画面の幅に応じて動的に変わるレスポンシブなレイアウトをFlexboxで実装する方法について紹介します。
Flexboxの設定値のうち、centerを利用した方法とspace-betweenを利用した方法の合計2パターン紹介します。

レスポンシブ対応させる具体例には前回実装した『200pxのアイテムを20px間隔で配置されたレイアウト』を利用します。

『justify-content: center』を利用する場合

Flexboxのwidthを相対比にすることでレスポンシブなレイアウトになります。

アイテムを事前に指定した固定長で配置できる場合は固定長での中央寄せになります。
今回の場合ですと固定長は200pxになります。

一方、固定長で配置できない場合はFlexboxの幅とアイテム同士の間隔をもとにアイテム幅が自動で調整されます。
今回の場合ですと200pxのアイテムを横並びに3つ配置できる幅がFlexboxになければアイテム幅が調整されます。

See the Pen variable-with-center by Toshiharu Nishina (@nishina555) on CodePen.

『justify-content: space-between』を利用する場合

justify-content: space-betweenでレスポンシブなレイアウトにする場合は以下の2つを設定します。

• Flexboxのwidthを相対比で表現
• アイテムのwidthをFlexboxに対する相対比で表現

今回の例におけるアイテムのwidthの相対比は、Flexboxのwidth640pxに対してアイテムのwidth200pxだったので 100% x 200/640 = 31.25% になります。

See the Pen variable-with-space-between by Toshiharu Nishina (@nishina555) on CodePen.

まとめ

以上でFlexboxによるレスポンシブな横並びレイアウトの実装方法の紹介を終わります。

• 今回のまとめ
  • Flexboxを相対比で表現するとレスポンシブなレイアウトになる
  • space-betweenでレスポンシブなレイアウトを実装する場合はアイテム幅も相対比にする

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！