[まとめ]コリスとかqiitaとかのhtmlとかフロントエンドに関する技術を勝手にまとめました

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

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

[質問は恥ではないし役に立つ
:2016年12月13日](https://qiita.com/seki_uk/items/4001423b3cd3db0dada7)

```md:質問の原本
助けてください！！！
○○をすると、××になってしまい、困っています。

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

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

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

[Web制作者が備えておきたい最新版チートシートのまとめ
:2018年11月7日](https://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-front-end-developer-2018.html)

[Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる:2018年10月26日](https://coliss.com/articles/build-websites/operation/work/how-to-use-zeplin.html)






# テキスト・フォント

[[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール](https://coliss.com/articles/build-websites/operation/css/web-typography-tool-gridlover.html)

>https://www.gridlover.net/try
![スクリーンショット 2018-12-04 0.41.30.png](https://qiita-image-store.s3.amazonaws.com/0/254652/844d5e8f-744c-e8ea-c444-b1c402c8ebb9.png)


```md:gridlover用html
# 大見出し

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

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

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

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

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

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

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

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

[レスポンシブルにフォントサイズを変更するための SASS Mixin を作った](http://neos21.hatenablog.com/entry/2018/02/22/080000)

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

[Fluid-responsive font-size calculator
](https://websemantics.uk/tools/responsive-font-calculator/)
>フォントが画面幅の増減において可変します

[[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック](https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html)





# SASS

[プログラマーから見た、SCSSの正しい(かもしれない)使いかた:2018年02月09日](https://qiita.com/sasuraisan/items/9a9dfb281cfdf5a12bd3)
>@extendと@mixinは、大根とニンジンくらい違う
つまり、形はちょっとだけ似ているけど、用途はまったく違う
んなわけで、使い分けとかそもそも意味不明


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

```scss: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);
			}
		}
	}
}

```





# [CSS]GlidとFlexbox

[【今日から携わる】CSS Gridの使い方。テンプレートを使って、さっくり実装しよう。](https://qiita.com/abeno/items/bc633d6cd23f633709e8)
![0.06.gif](https://qiita-image-store.s3.amazonaws.com/0/254652/353aeb2a-e021-9d4e-aef7-fc91ce269c9b.gif)


[CSS GridとFlexboxでの実装で役立つ！各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート:2018年9月10日](https://coliss.com/articles/build-websites/operation/css/grid-and-flexbox-cheatsheets.html)
<img width="828" alt="スクリーンショット 2018-12-04 0.05.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/254652/ea1fb2c3-62f1-5f7b-8f46-ade723929f7d.png">



[CSS Gridでレイアウトする時はこのプロパティが重要！「grid-template-*」と「grid-auto-*」の使い方を解説](https://coliss.com/articles/build-websites/operation/css/difference-between-grid-template-and-grid-auto.html)
![2018100911-05.png](https://qiita-image-store.s3.amazonaws.com/0/254652/47f5c6a1-447f-0bb8-f199-159a1c12a8cc.png)


[CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
:2018年9月28日](https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html)
![2018092704.png](https://qiita-image-store.s3.amazonaws.com/0/254652/3e8073a1-5210-8058-e31e-4d1dabbe9b6c.png)


[最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ:2018年1月26日](https://coliss.com/articles/build-websites/operation/css/css-alignment-cheatsheet.html)
![2018012501.png](https://qiita-image-store.s3.amazonaws.com/0/254652/936e97ca-7218-25f2-1440-0b7a84eb4ef8.png)


[CSS Gridを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか：2017年3月29日](https://coliss.com/articles/build-websites/operation/css/css-grid-layout-fallbacks.html)
![2017032901.png](https://qiita-image-store.s3.amazonaws.com/0/254652/ebc967e2-29f3-3a21-b23b-ed13824332ce.png)

[[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説：2016年11月17日](https://coliss.com/articles/build-websites/operation/css/how-to-responsive-grid.html)
![2016111201.png](https://qiita-image-store.s3.amazonaws.com/0/254652/e6c39044-44da-d01f-dce9-de2bf2bc3648.png)





# CSS

[CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック:2018年11月14日](https://coliss.com/articles/build-websites/operation/css/use-calc-to-change-the-height-of-a-hero-component.html)
![2018111001.png](https://qiita-image-store.s3.amazonaws.com/0/254652/c1d2e332-486d-6741-e869-08effd42f780.png)

[[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法:2018年8月8日](https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html)
![2018080401-02.png](https://qiita-image-store.s3.amazonaws.com/0/254652/b470008c-9fb8-f633-5683-efa89a0de824.png)

[レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ:2016年7月20日](https://coliss.com/articles/build-websites/operation/css/design-and-idea-for-search-forms.html)
![2016072010.png](https://qiita-image-store.s3.amazonaws.com/0/254652/f175c20b-ae99-a8d8-f8fa-3f840d3f986e.png)

[[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック
:2018年11月2日](https://coliss.com/articles/build-websites/operation/css/using-feature-detection-with-selectors.html)
![2018110201.png](https://qiita-image-store.s3.amazonaws.com/0/254652/203465d4-36fc-70a2-c5cb-277d82769180.png)

[CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
:2018年9月14日](https://coliss.com/articles/build-websites/operation/css/how-to-use-css-scroll-snap.html)


# jsライブラリ
[プログレスバーの実装もこれなら簡単！複数ファイルにも対応した超軽量JavaScriptライブラリ -preload-it:2018年11月8日](https://coliss.com/articles/build-websites/operation/javascript/composite-progress-events-preload-it.html)

[あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック:2018年11月6日](https://coliss.com/articles/build-websites/operation/javascript/5-things-you-can-do-in-css-in-js.html)
![2018110301.png](https://qiita-image-store.s3.amazonaws.com/0/254652/874b8c3a-b0de-b27e-abb6-f827dc726d5f.png)

[便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n:2018年10月24日](https://coliss.com/articles/build-websites/operation/javascript/js-validation-library-v8n.html)

[LaravelとjScrollで、Infinite Scrollをやってみた:2018年02月28日
](https://qiita.com/daiki_44/items/16ece4c9be9f41bf78cb)





# 色
[カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
](https://coliss.com/articles/build-websites/operation/css/color-system-in-css.html![2018092104.png](https://qiita-image-store.s3.amazonaws.com/0/254652/d664c024-83f6-abb8-b377-5ab6c6e67b9c.png)
)





# デザイン
[日本のWebデザインで見かける10個の特徴
](https://coliss.com/articles/build-websites/operation/design/distinctive-features-of-japanese-style-web-design.html)
> 01. ハイテクな演出
> 02. 他とは異なるソリューション
> 03. 日本独自の配色
> 04. 縦書き
> 05. 自然の風景
> 06. 巧妙なヒーローエリア
> 07. アニメに影響を受けたイラスト
> 08. キャラクター
> 09. 日本の漢字
> 10. 日本の伝統的な音

[デザインの勉強にもなる！ロゴのデザインをさまざまな面から検証し、改善点が分かるオンラインツール -Logo Lab:2018年10月19日](https://coliss.com/articles/build-websites/operation/design/test-your-logo-logolab.html)



# git
[GitでMerge CommitをRevertする方法
](https://qiita.com/awakia/items/5fad0c454ddc7b478ff1)





# その他
[これで今日からあなたも踊れるデザイナーに！人工知能であらゆるダンスの動きを自分にコピーできる:2018年9月7日](https://coliss.com/articles/build-websites/operation/work/everybody-dance-now.html)