最近の気になった記事をまとめました。

チートシート・ガイドライン

質問は恥ではないし役に立つ
:2016年12月13日

質問の原本

助けてください！！！
○○をすると、××になってしまい、困っています。

＜求める結果＞
・○○をすると、○○になる

＜行った手順＞
1.
2.
3.

お手数おかけいたしますが、アドバイスよろしくお願いいたします。

Web制作者が備えておきたい最新版チートシートのまとめ
:2018年11月7日

Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる:2018年10月26日

テキスト・フォント

[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール

https://www.gridlover.net/try

gridlover用html

# 大見出し

リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。

## 中見出しが入ります。中見出しが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

### 小見出しが入ります。小見出しが入ります。小見出しが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

#### 見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。見出しが入ります。

- リストが入ります。
- リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。
- リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

レスポンシブルにフォントサイズを変更するための SASS Mixin を作った

計算式が複雑で使い回すのが大変だったので、SASS のミックスインとして作ってみた。
引数から単位を除去して数値のみにしたかったので、その部分を strip-unit() 関数として用意した。SASS って @if とか使えるのね…。

Fluid-responsive font-size calculator

フォントが画面幅の増減において可変します

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

SASS

プログラマーから見た、SCSSの正しい(かもしれない)使いかた:2018年02月09日

@extendと@mixinは、大根とニンジンくらい違う
つまり、形はちょっとだけ似ているけど、用途はまったく違う
んなわけで、使い分けとかそもそも意味不明

【Sass】Mapの値が連想配列となるデータを、eachループ内でmap-get()を使い取得:2018/11/22

rensou.scss

// CSSで使用する値を、２次元連想配列のデータとして指定
$sns_list: (
    twitter: (
        icon: "\f099",
        icon-color: #fff,
        bg-color: #00acee,
        txt-color: #fff
    ),
    fb: (
        icon: "\f09a",
        icon-color: #fff,
        bg-color: #3b5998,
        txt-color: #fff
    ),
    pocket: (
        icon: "\f265",
        icon-color: #fff,
        bg-color: #f03e51,
        txt-color: #fff
  )
);


// ２次元連想配列のデータを、eachループ内でmap-get()を使い取得
@each $site_name, $property in $sns_list{
    .sns-#{$site_name} {
        background-color: map-get($property, bg-color);
        a{
            color: map-get($property, txt-color);
            &:before{
                content: map-get($property, icon);
                color: map-get($property, icon-color);
            }
        }
    }
}