CSSを生で書くことはなく、現在はSCSSを使用しております。
現在、私が使用している@mixinをつかったメディアクエリがこちらです。

// ブレイクポイント
$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);

// メディアクエリー
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

普通に使用する分にはこちらで全く問題ないのですが、正直何が書かれているのかイマイチわかっていなかったので一度整理したいと思い、記事を書いております。

この記事を読んでわかること

• SCSSを使用したメディアクエリの書き方
• メディアクエリに書かれている内部の情報について

$ とは

SCSSを書いていると$が頻繁に出てきます。
こちらは、変数を定義する際に使用します。

例えば文字の色や背景色を管理したいときにこのように指定することがあります。

$font-color : #333;
$bg-color : #fff; 

上記のように、設定をしておくことで、

h2{
color:$font-color;
}
.header{
background-color:$bg-color;
}

と書いていくことができるようになります。ここで抑えておきたいのが、
$font-color / $bg-color　の名前がキーとなって、#333や#fffの値を取得できるということです。

なので、今回は$breakpointsを変数名として、sp tab pcで定義した値("(max-width: 480px)"他を取得しています。
こちらは、変数のなかでもマップ型の変数と呼ばれております。特徴としては、変数の中に1つ以上のキーと値のペアを定義できます。今回はでいうと、3つ定義されています。
$breakpoints: (
"sp" : "(max-width: 480px)",
"tab": "(max-width: 768px)",
"pc": "(min-width: 769px)"
);

@mixinでメディアクエリを呼び出す

ブレイクポイントを定義した変数をmq()という変数で呼び出せるようにします。
@includeは定義されたスタイルを呼び出すためのものです。

なので、

@include mq("tab"){
font-size:12px
}

と呼び出してあげると、

@media (max-width: 768px) {
font-size:12px;
}

を呼び出すことができます。

はて、@contentってなんだとなりましたが、イマイチ納得できる記事がありませんでした。

まとめ

いまだ１００％の理解はできておりませんが、なんとなくわかってきました。
一つづつ分析することの大切さを学びました。

■参考記事
https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be

https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html

ツール

TachyPochy/tableStyle_withContextMenu

はじめに

　同様のコンセプトをもつツールは多いと思いますが、nth-child でセルを指定するのが特徴です。

　以下のような用途で使用します。reStructuredText/Sphinx だけでなく、Markdown でも使えるかもしれません。

Sphinx、表の一部を装飾する（一部だけスタイルを変えたい） - Qiita

　Mac、Windows 両対応です。

対応

　以下の装飾に対応しています。

• 文字色（文字色が黒以外の場合に CSS を出力）
• 背景色（背景色が白以外の場合に CSS を出力）
• 太字
• イタリック
• 下線

使い方

　スタイルを適用したセルの範囲を選択し、コンテキストメニューから CSS to Clipboad を選択してください。

サンプルの出力結果

　クリップボードには、以下のコードが出力されます。HTML カラーコードは、可能なら色名に変換します。

    <style type='text/css'>
        #theTableBlock table tr:nth-child(1) th:nth-child(1) {
            color: Red;
            background-color: Yellow;
        }
        #theTableBlock table tr:nth-child(1) td:nth-child(2) {
            background-color: Red;
            font-weight: bold;
        }
        #theTableBlock table tr:nth-child(2) td:nth-child(3) {
            background-color: Blue;
            font-style: italic;
        }
        #theTableBlock table tr:nth-child(3) td:nth-child(4) {
            background-color: #E6B8B7;
            text-decoration: underline;
        }
    </style>
    <div id='theTableBlock'>

        <!-- TODO : write your table tag code here -->

    </div>

注意

　一行目は th として扱います。HTML を書くなら <thead>〜</thead> と <tbody>〜</tbody> が必要です。

        <table>
            <thead>
                <tr>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>

ブラウザでのレンダリング例

今回は国産SNS「＠meet」で認証済みバッジを付けて自分のローカル環境にだけ見られるようにする方法を紹介したいと思います。

環境

・Google Chrome（バージョン: 86.0.4240.111）

方法

1. Google Chrome拡張機能「My Style」をダウンロードする。

Google Chrome拡張機能「My Style」をダウンロードします。
https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb

2. 以下のCSSをマウスで選択した後、「Ctrl+C」でコピーする。

以下のCSSをマウスで選択します。その後、ショートカット「Ctrl+C」でコピーします。

a.bx-tl-owner-name::after{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/bYtqan9.png);
  background-size: contain;
  vertical-align: middle;
}

3. 国産SNS「＠meet」のページを開く。

国産SNS「＠meet」のページを開きます。

4. ショートカットキー「Ctrl+M」を押す。

ショートカットキー「Ctrl+M」を押します。

5. 矢印カーソルを/* Enter your style here. */のところで左クリックする。

矢印カーソルを/* Enter your style here. */のところで左クリックをして、CSSを入力可能な状態にします。

6. ショートカットキー「Ctrl+V」で貼り付ける。

キーボードのショートカットキー「Ctrl+V」を押して貼り付けます。

7. 認証済みバッジが表示されたことを確認する。

アカウント名の右横に認証済みバッジがちゃんと表示されたことを確認します。

8. ショートカットキー「Ctrl+M」を押して終了する。

ショートカットキー「Ctrl+M」を押して終了します。

今回は国産SNS「＠ meet」で認証済みバッジを付けて自分のローカル環境にだけ見られるようにする方法を紹介したいと思います。

環境

・Google Chrome（バージョン: 86.0.4240.111）

方法

1. Google Chrome拡張機能「My Style」をダウンロードする。

Google Chrome拡張機能「My Style」をダウンロードします。
https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb

2. 以下のCSSをマウスで選択した後、「Ctrl+C」でコピーする。

以下のCSSをマウスで選択します。その後、ショートカット「Ctrl+C」でコピーします。

a.bx-tl-owner-name::after{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/bYtqan9.png);
  background-size: contain;
  vertical-align: middle;
}

3. 国産SNS「＠ meet」のページを開く。

国産SNS「＠ meet」のページを開きます。

4. ショートカットキー「Ctrl+M」を押す。

ショートカットキー「Ctrl+M」を押します。

5. 矢印カーソルを/* Enter your style here. */のところで左クリックする。

矢印カーソルを/* Enter your style here. */のところで左クリックをして、CSSを入力可能な状態にします。

6. ショートカットキー「Ctrl+V」で貼り付ける。

キーボードのショートカットキー「Ctrl+V」を押して貼り付けます。

7. 認証済みバッジが表示されたことを確認する。

アカウント名の右横に認証済みバッジがちゃんと表示されたことを確認します。

8. ショートカットキー「Ctrl+M」を押して終了する。

ショートカットキー「Ctrl+M」を押して終了します。

sample.js

.body {

  @include media-breakpoint-up(sm) {
      font-size: 16px;
  }
}

こんな感じで設定する。
breakpoint-down(lg)などとすると適応する画面のサイズを調整出来る。

概要

Quillを素の状態で実装すると四つ角が直角になっている。
レイアウトを柔らかい印象にするため、角張ったデザインではなく、丸い形（角丸）にしたくなったので検証開始！

環境

公式に丁度いい遊び場があるので利用する。[https://quilljs.com/playground/]

検証

今回はChromeのデベロッパーツールを利用して、角丸にしたい部分のクラスを確認する。

まずはじめにツールバーの上部だけ丸くしたいのでCSSに下記を追加する。

.ql-toolbar {
  border-radius: 10px 10px 0 0;
 }

いい感じの角丸に！

ツールバー下の記入部分（editor)もツールバーと同様にクラスを確認して、CSSを追加していく。
今回は下の部分だけ角丸にして、ツールバーと一体として認識させるようにする。![image.png](https://qiita

#quill-editor {
    border-radius: 0 0 10px 10px;
  }

いい感じの角丸に！（2度目）

まとめ

書き残すほどではない内容ですが、一応備忘録として。
最初ツールバーだけ丸くならなくて「なんで!?」ってなったのは内緒。しっかり見ないとダメですね

float

index.html

<div class="feature-item">
          <div class="feature-img-wrapper">
            <a href="https://www.yahoo.co.jp" target="_blank">
            <img src="img/feature/feature.jpg" alt="">
            </a>
          </div>
          <div class="feature-body">
            <p><span class="text-bold">サイト名：</span>
              <br>サイト名が入る<br>
              <a href="#" target="_blank">https://●●●.com</a>
            </p>
            <div class="clearfix"></div>
          </div><!-- ./feature-body -->
</div><!-- ./feature-item -->

style.css

.feature-item{
  margin-bottom: 80px;
}
.feature-img-wrapper{
  width: 45%;
  margin-right: 40px;
  float: left;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

参考

ポートフォリオHTMLテンプレート（ベーシック）

前提

アウトプットを目的として学んだことをそのまま記事に起こしています。
間違った内容がありましたらご指摘ください。

概要

ほとんどのサイトに記述されている

<meta name="viewport" content="width=device-width">

というmetaタグ。

オンライン学習教材などでもこのタグの説明がされている教材がたくさんあると思います。

しかし、上記のコードさえ書けば特に問題は起きないので詳細まで説明されているものは少ないです。

ということで、構造を理解すればカスタマイズもできるようになるので、以下に詳細の値について1つずつ解説していきます。

目次

1.viewportとは？
2.viewportに設定できる値
3.viewportの最適値
4.まとめ

viewportとは？

viewportは「表示領域」を意味します。
ブラウザの表示の仕方を制御する役割があります。

PCの場合、viewport = ブラウザのウィンドウ
スマホ/タブレットの場合、viewport = デバイスの画面全体

モバイルのviewportを指定しない場合

デスクトップのPCで表示される横幅 = モバイル端末の横幅
として合わせてしまいます。

iPhone11 Proでの画面⬇︎

こんな感じです。

つまり、PCで見てるサイトをスマホなどで閲覧した時にそのまま縮小された非常に小さいサイズで閲覧することになります。

よって、

<meta name=“viewport” content=“width=device-width>

を設定することで、端末やブラウザに合わせた値を返すことができます。

viewportに設定できる値

① width (横幅)

• 初期値：960px
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ width ≦ 10000px
• width=device-width：様々なサイズのデバイスに応じた表示領域に設定・できる。

② height (縦幅)

• 初期値：横幅とのアスペクト比(※)から計算される値
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ height ≦ 10000px
• 補足：widthと同様、device-widthを設定できますが、そもそもheightを記述することはほとんどありません。

③ initial-scale

• 意味：初期倍率
• 初期値：1
• 非対応：Internet Exproler
• 補足：未指定の場合、自動的に「initial-scale=1.0」となります。指定した場合でも、「initial-scale=1.0」とすれば、結果は変わりません。width=divice-widthが基準となるためです。

④ minimum-scale (最小倍率) (※)

• 意味：最小縮小倍率
• 初期値：0.25
• 指定可能範囲：0 < minimum-scale < 10
• 補足：「initial-scale」と同時に指定不可

⑤ maximum-scale (最大倍率) (※)

• 最大確率倍率
• 初期値：1.6
• 指定可能範囲：0 < maximum-scale < 10

⑥ user-scalable

• 意味：ユーザーがズームすることを許可するかどうかを指定できます
• 初期値：yes
• 指定可能な値：yes / no または 1 / 0 (1 = yes / 0 = no)
• 補足：デバイスによって全く効果がない場合がある

⑦ target-densitydpi

• 指定：旧版のAndroid端末向け
• 意味：ターゲットとなる画面密度を表します。「target-densitydpi=device-dpi」とすると、端末ごとに表示される文字サイズも大きく変わってしまいます。対策として「target-densitydpi=medium-dpi」に設定するか、記述しないかでいいと思います。

⑧ その他

• viewport-fit
• shrink-to-fit

etc…

他にも指定可能な値があるみたいです。スマホを横向きにした時の対応などですね。しかし指定の必要はあまりないかと…。

※アスペクト比とは…

短形における長辺と短編の比率。
アスペクト比にも色々あるので、気になる方はWikipediaの記事を参照してください。

他の記事には「アスペスト比」と書かれている記事がいくつかありますが、アスペストで検索しても「アスペクト比」としか出てこなかったのでこの記事では「アスペクト」と記述しています。

※ ④ ⑤ について

自分は正直なところ記述したことがありません。initial-scale=1.0も数値を変えたことがありません。ご自身で様々試してみてください。

viewportの最適値

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

特別な理由がなければ、基本この記述だけで問題ないです。
設定などを理解していればこのコードをコピペで使いまわしていいと思います。

まとめ

• viewportは、表示領域のこと
• <meta name=“viewport” content=“device-width”>さえ記述すれば基本的に問題ない

前提

アウトプットを目的として学んだことをそのまま記事に起こしています。
間違った内容がありましたらご指摘ください。

概要

ほとんどのサイトに記述されている

<meta name="viewport" content="width=device-width">

というmetaタグ。

オンライン学習教材などでもこのタグの説明がされている教材がたくさんあると思います。それくらい基本的なことではあります。

しかし、上記のコードさえ書けば特に問題は起きないので詳細まで説明されているものは少ないです。

ということで、構造を理解すればカスタマイズもできるようになるので、以下に詳細の値について1つずつ解説していきます。

目次

1. viewportとは？
2. viewportに設定できる値
3. viewportの最適値
4. まとめ

viewportとは？

viewportは「表示領域」を意味します。
ブラウザの表示の仕方を制御する役割があります。

PCの場合、viewport = ブラウザのウィンドウ
スマホ/タブレットの場合、viewport = デバイスの画面全体

モバイルのviewportを指定しない場合

デスクトップのPCで表示される横幅 = モバイル端末の横幅
として合わせてしまいます。

iPhone11 Proでの画面⬇︎

こんな感じです。

つまり、PCで見てるサイトをスマホなどで閲覧した時にそのまま縮小された非常に小さいサイズで閲覧することになります。

よって、

<meta name=“viewport” content=“width=device-width>

を設定することで、端末やブラウザに合わせた値を返すことができます。

viewportに設定できる値

① width (横幅)

• 初期値：960px
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ width ≦ 10000px
• width=device-width：様々なサイズのデバイスに応じた表示領域に設定・できる。

② height (縦幅)

• 初期値：横幅とのアスペクト比(※)から計算される値
• 単位(px)：記述不要です。
• 指定可能範囲：200px ≦ height ≦ 10000px
• 補足：widthと同様、device-widthを設定できますが、そもそもheightを記述することはほとんどありません。

③ initial-scale

• 意味：初期倍率
• 初期値：1
• 非対応：Internet Exproler
• 補足：未指定の場合、自動的に「initial-scale=1.0」となります。指定した場合でも、「initial-scale=1.0」とすれば、結果は変わりません。width=divice-widthが基準となるためです。

④ minimum-scale (最小倍率) (※)

• 意味：最小縮小倍率
• 初期値：0.25
• 指定可能範囲：0 < minimum-scale < 10
• 補足：「initial-scale」と同時に指定不可

⑤ maximum-scale (最大倍率) (※)

• 最大確率倍率
• 初期値：1.6
• 指定可能範囲：0 < maximum-scale < 10

⑥ user-scalable

• 意味：ユーザーがズームすることを許可するかどうかを指定できます
• 初期値：yes
• 指定可能な値：yes / no または 1 / 0 (1 = yes / 0 = no)
• 補足：デバイスによって全く効果がない場合がある

⑦ target-densitydpi

• 指定：旧版のAndroid端末向け
• 意味：ターゲットとなる画面密度を表します。「target-densitydpi=device-dpi」とすると、端末ごとに表示される文字サイズも大きく変わってしまいます。対策として「target-densitydpi=medium-dpi」に設定するか、記述しないかでいいと思います。

⑧ その他

• viewport-fit
• shrink-to-fit

etc…

他にも指定可能な値があるみたいです。スマホを横向きにした時の対応などですね。しかし指定の必要はあまりないかと…。

※アスペクト比とは…

短形における長辺と短編の比率。

アスペクト比にも色々あるので、気になる方はWikipediaの記事を参照してください。

他の記事には「アスペスト比」と書かれている記事がいくつかありますが、アスペストで検索しても「アスペクト比」としか出てこなかったのでこの記事では「アスペクト」と記述しています。

※④ ⑤ について

自分は正直なところ記述したことがありません。initial-scale=1.0も数値を変えたことがありません。ご自身で様々試してみてください。

viewportの最適値

<meta name="viewport" content="width=device-width, initial-scale=1.0">

特別な理由がなければ、基本この記述だけで問題ないです。
設定などを理解していればこのコードをコピペで使いまわしていいと思います。

まとめ

• viewportは、表示領域のこと
• <meta name="viewport" content="device-width">さえ記述すれば基本的に問題ない