1. ish0428

    Posted

    ish0428
Changes in title
+linear-gradientを使ったいつもと違う実装例
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,144 @@
+# はじめに
+
+`linear-gradient()`はグラデーションを作るCSSだが
+
+
+ - 「(色経由点を使用して)色が変わらない」設定を作れる
+ - imageと同様にsizeやpositionの指定が書ける
+ - backgroundプロパティなので複数指定ができる
+
+という特徴も持っている
+
+参考:[MSDNの仕様](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient)
+
+これを利用することで、よくある実装とは違うアプローチを取れることがある。
+
+
+
+## 例1)色付きのシークバーを実装する場合
+<img width="427" alt="スクリーンショット 2018-12-02 23.40.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/321862/f248f27a-e79b-0844-6685-713252a01250.png">
+
+linear-gradientを利用するとちょっとシンプルに書ける
+### よくある実装[^1]
+
+```html:before.html
+ <div class="bar-wrapper">
+ <input type="range" class="bar"/>
+ <span class="bar-fill"></span>
+ </div>
+```
+```scss:before.scss
+// px値は適当
+.bar {
+ -webkit-appearance: none;
+ margin: 0;
+ background: gray;
+ height: 5px;
+ width: 400px;
+ position: absolute;
+ &-fill{
+ -webkit-appearance: none;
+ background: #54C4FF;
+ height: 5px;
+ width: 200px;
+ display: block;
+ position: absolute;
+ }
+ &-wrapper{
+ position: relative;
+ width: 400px;
+ }
+ // -webkit-slider-thumbは割愛
+}
+
+```
+参考:http://jsdo.it/kingpanda/8UZS
+### linear-gradient版
+「色経由点まで同じ色(緑)で、同じ位置にある色経由点(グレー)から最後まで色が同じのグラデーション」と解釈できる
+グラデーションの`red 0% ,red 50% ,gray 50% ,gray 100%`の50%の部分をよしなにjsでいじればよい
+
+```html:after.html
+ <input type="range" class="bar"/>
+```
+```scss:after.scss
+.bar {
+ -webkit-appearance: none;
+ margin: 0;
+ appearance: none;
+ height: 5px;
+ width: 400px;
+ //↑ここまでは同じ。
+ background: linear-gradient( 90deg ,#54C4FF 0% ,#54C4FF 50% ,gray 50% ,gray 100% );
+ //↑これだけで良い
+}
+```
+
+
+## 例2)吹き出しを作成する場合
+<img width="227" alt="スクリーンショット 2018-12-03 1.12.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/321862/574c0f4a-0765-8b4d-8a06-3e3e990e64b7.png">
+linear-gradientは`<image>` データ型(の亜種)を作成するので、これを組み合わせると疑似要素を使わなくて良い。
+
+### よくある実装
+```html:before.html
+<div class="balloon1">
+吹き出し
+</div>
+```
+```scss:before.scss
+.balloon1 {
+ position: relative;
+ display: inline-block;
+ margin: 1.5em 0;
+ padding: 7px 10px;
+ min-width: 120px;
+ max-width: 100%;
+ color: #555;
+ font-size: 16px;
+ background: #e0edff;
+ &:before{
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -15px;
+ border: 15px solid transparent;
+ border-top: 15px solid #e0edff;
+ }
+}
+
+```
+
+参考:[CSSで作る!吹き出しデザインのサンプル19選](https://saruwakakun.com/html-css/reference/speech-bubble)
+
+### linear-gradient版
+
+※HTMLは変わらないので割愛
+
+```scss:after.scss
+//SASS,SCSS環境であれば三角形のサイズを変数に入れると良い
+.balloon1 {
+ position: relative;
+ display: inline-block;
+ margin: 1.5em 0;
+ padding: 7px 10px 22px;
+ min-width: 120px;
+ max-width: 100%;
+ color: white;
+ font-size: 16px;
+ background-image: linear-gradient( #55c500, #55c500 calc( 100% - 15px ), transparent calc( 100% - 15px ), transparent 100%),
+ linear-gradient( -45deg, transparent 50%, #55c500 50%),
+ linear-gradient( 45deg, transparent 50%, #55c500 50%);
+ background-size: auto auto, 15px 50%, 15px 50%;
+ background-repeat: no-repeat;
+ background-position: left top, bottom left calc(50% + 7.5px), bottom right calc(50% + 7.5px)
+}
+```
+※執筆時点でかなり眠いので座標計算形はもっといい方法があるかもしれない。あとサイズもやや怪しい
+
+
+
+## 最後に
+明らかに本来の用途ではないが、ごく稀に助けられる場面がある。
+個人的には使わなくて良い疑似要素や空タグはできるだけ使いたくない主義なのだが、使いすると可読性を悪くしてしまうのでそのへんはケースバイケース。
+
+[^1]: `<input type="range">`自体があまり使われていないタグなので情報は少ないですが、別の個人ブログやstackoverflow等でも似たような記を見たことを考えるとこれがスタンダードなのでしょうか。