What's New Qiita

20191215のCSSに関する記事は8件です。

  • 投稿日：2019-12-15T23:36:17+09:00

ブログ始めました

プログラミングスクールに通う

TECH::EXPERTを受講し、時の流れに身を任せていたら１週間がいとも簡単に過ぎ去りました。
ブログを書くのも１０年以上ぶりでお目汚し感が物凄いですがご容赦ください。

Qiitaに投稿

ガイドラインに目を通すと価値のある役に立つ記事を書けとのことですがとりあえず最初は無視することに決めました。
「質」よりも「継続」をスローガンにして、できたら誰かの役に立てる記事を投稿していきたいとおもいます。

アウトプット

ツイッターとブログをとりあえず感は否めないものの開設しました。
身の回りの「友人」や「知人」または「過去の自分」の助けになれるような内容を意識してアウトプットに努めていきたいです
そして何よりもコミュニケーション力の最大化が求められている……！！

最後に

もっと凝った編集もできるはずなのでしょうけどこれが精一杯です
１週間に二回は更新したい！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T22:17:57+09:00

半々人前のフロントエンドエンジニアが成長するために必要だと感じたこと

はじめに

　私は今年の4月から初めてMacを使い始めてプログラミングというものに触れ、今日まで約８ヶ月間勉強をしてきました。
今は、フロントエンドの分野で月に約3本のWeb案件に取り組んでいます。（まだ独り立ちはできていませんが...）
今まで勉強してきて、効率的に勉強を進め最も近道に成長をしていくためにはどうしたらいいのか、自分なりの考えをまとめ、初心を忘れないようにするためにも記事にしたいと思います。

今までやってきたこと

  • 　4~6月前半...pythonチュートリアルを基本1人で学び、わからないところは教えてもらう
  • 　6月前半~9月中旬...初めての案件に参加(バックエンド)
  • 　9月中旬~１０月中旬...フロントエンドの勉強
  • 　~現在...フロントエンドの案件でアウトプット＆お勉強

できるようになったこと（まだまだ未熟ですが...）

  1. Git、Github
  2. html、css
  3. Wordpress
  4. Figma
  5. インフラ、セキュリティ周り（ほんーの少し）

実践してみてよかったこと

  • pythonチュートリアル→なんとなーくプログラミングの様子がわかり、操作に慣れた
  • スキルが全くないにも関わらず案件に参加→急成長できた
  • 自分で調べてもわからなかったらためらわずに質問する

習うより慣れろ！

案件に初めて参加させていただいた時にはpythonしか知らず(それもほんの少し)、いきなりDjangoやDocker、Git、Gihubなどを使い、最初はわからないことが多すぎてパンクしそうでした。任せていただいた仕事も私1人の力で終わらせることはできず、いつも先輩に教えてもらってばっかりでした。でも、思ったのは...習うより慣れろ！
自分で勉強を進めるだけでは世界が狭く、モチベーションを保つのも大変です。案件に参加することで先輩方のコードを見ながら勉強することができました。
仕事を振ってもらう→調べる→少しは自己解決→わからないところを教えてもらう→理解する→成長→新たな仕事を振ってもらう、という好循環が生まれ、短期間(?)でいろいろなことができるようになりました。

教えてもらう立場

教えてもらうには受け身ではなく、積極的に動き、教えてもらえるような人になるということが大切だなと思いました。
自己解決できない時には、
1. 現状報告
2. コードを見せる
3. 何をどう改善したいのか
4. 試してみたこと
これらを報告することは絶対必要です。見た目だけ見せられてもどういうコード書いているのか、考えてもらう手間が発生してしまいます。教えてもらうために開発や休憩する時間を奪って教えてもらうので、少しでも手間を減らさなければいけないと感じました。

これから

将来的には、フロントエンドの分野だけではなく、バックエンドの分野も理解できるようになりたいです。
まだまだ勉強しなければならないことはたくさんありますが、少しずつ自分の理解していることをアウトプットする機会が増えていきます。
今まで親切に教えてくださったように自分も教えられるようになりたいです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T20:34:36+09:00

HTMLとCSSでカレーライスを作った

カレーライスを作りました

※スマホではバグりますすみません

See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen.

どうやって作ったの

この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。
実業務ではきっと役には立ちませんので、
「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。

パーツを細かく作る

カレーのカレーによるカレーのためのAtomic Designの記事で言及した、
Atomic Designの考えを元にして作りました。

Atomsの用意

  • にんじん
  • じゃがいも
  • 牛肉
  • 切った具材
  • 米
  • 皿

スクリーンショット 2019-12-15 0.18.11.png

スクリーンショット 2019-12-15 0.18.16.png

スクリーンショット 2019-12-15 0.18.25.png

スクリーンショット 2019-12-15 0.18.38.png

スクリーンショット 2019-12-12 18.40.16.png

スクリーンショット 2019-12-15 0.18.31.png

これらをどう作ったか後ほど解説します。
（厳密には米はMoleculesですが、まぁよしとしましょう。）

これらを全て組み合わせることで、カレーライスを完成させました。

では、次に実際によく使ったCSSプロパティを紹介します。

秘伝のカレー3つのスパイス（プロパティ）

今回カレーライスを作るにあたって以下を意識しました。

  • 影
  • 丸みや、曲線の表現

逆に言うとこの2点しか抑えてなかった

box-shadow：立体感を持たせるスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

box-shadowは、要素に対して影をつけることができます。
これによってより立体的なになるように表現します。

じゃがいもの影のグラデーション、人参の棒線、切った具材の影、皿の凹凸等を再現しました。
じゃがいもを例にとってみます。

スクリーンショット 2019-12-15 10.58.57.png

じゃがいものdivを用意します。

  <div class="jaga"></div>

作成したdivに対して、box-shadowで土感を、
border-radiusでじゃがいも特有の丸み・曲線を表現します。

.jaga {
    width: 300px;
    height: 250px;
    background: #E8CD7F;
    border-radius: 40% 40% 44% 40% / 35% 65% 40% 70%;
    box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7), 
                inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3),
                10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
                inset 31px 0px 96px -21px #B07331;
}

※border-radiusについてはこの後に解説します。

box-shadowは以下の値を設定できます。

box-shadow: {横にズラす値} {縦にズラす値} {ボカす値} {色};

また、insetを指定することで要素の内側に影をつけることができ、
さらにカンマ区切りにすることで上下左右それぞれに異なった影をつけることが可能です。
今回はじゃがいもの内側に影をつけてボカしたかったので、以下を指定しました。


box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7),
            inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3), 
            10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
            inset 31px 0px 96px -21px #B07331;

これで、じゃがいものベースが出来上がりました。
スクリーンショット 2019-12-15 11.10.49.png

中にじゃがいもの芽を記述して完了です。
（ここでは省略するので、詳細はcodepenをみてください）
https://codepen.io/thugumi-ishimaru/pen/abzvGaq

border-radius：より自然な形にするスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

border-radiusは要素の角を丸めるのに使います。
円形や、真四角のボタンを角丸にするために使用することが多いです。
今回はじゃがいもの曲線や、牛の体、切った具材の形等の変形・ご飯のモコモコ感を再現するのに使用しました。
ここでは、切った具材とご飯を例にあげます。

左上・右上・右下・左下の丸みの数値を個別で指定します。

  <div class="ninjin"></div>
  <div class="jaga"></div>
  <div class="niku"></div>

$ninjin: #FF5F00;
$ninjinShadow: #F44A1C;
$jaga: #F2BD38;
$jagaShadow: #CE8117;
$niku: #BE6B21;
$nikuShadow: #882B11;

.ninjin {
  width: 75px;
  height: 100px;
  background: $ninjin;
  border-radius:80% 26px 60px 23px; // 左上80%,左上26px,右下60px,左下23px
  box-shadow: inset -10px 10px 0 $ninjinShadow;
  transform: rotate(95deg);
}

.jaga {
  width: 115px;
  height: 100px;
  background: $jaga;
  border-radius: 80% 76px 70px 33px;// 左上80%,左上76px,右下70px,左下33px
  box-shadow: inset -11px -5px 0 $jagaShadow;
}

.niku {
  width: 97px;
  height: 57px;
  background: $niku;
  border-radius: 70px 26px 80px 23px;// 左上70px,左上26px,右下80px,左下23px
  box-shadow: inset -6px -5px 0 $nikuShadow;
}

この結果がこちらです。
にんじん、じゃがいも、肉それぞれいろんな丸みを持ったものができました。
上記で紹介したbox-shadowを使って影をつけて完了です！

スクリーンショット 2019-12-15 0.18.38.png

また、丸みのあるdiv同士を重ねることでご飯のもこもこ感を表現します。

まず、ご飯の中央部分とその周りを取り巻くもこもこ用のdivを作ります。

<div class="rice">
  <div class="rice_around">
    <div class="rice_aroundItem rice_aroundItem-1"></div>
    <div class="rice_aroundItem rice_aroundItem-2"></div>
    <div class="rice_aroundItem rice_aroundItem-3"></div>
    <div class="rice_aroundItem rice_aroundItem-4"></div>
    <div class="rice_aroundItem rice_aroundItem-5"></div>
  </div>
</div>

スクリーンショット 2019-12-15 19.28.07.png

このままではカッピカピの白米です。
インド人もびっくりです。

歯が割れちゃいけないので.rice_aroundItemに対して、border-radius:50%をつけ、丸みを出しご飯を柔らかくします。

スクリーンショット 2019-12-15 19.28.35.png

あとは、高さ・位置をpositionを駆使して調節・中の盛られている米粒たちを
表現すれば完成です。

スクリーンショット 2019-12-15 19.35.31.png

mask-image：角がある味（鋭角）をまろやかにするスパイス

mask-imageは要素のマスクレイヤーとして使用する画像の設定を行います。
上記の、「丸みのあるdiv同士を繋げたけど、鋭角が気になる。。。」といったところの解決方法として使用しました。

今回はカレールーの下記枠部分の曲線を表現するのに使いました。
スクリーンショット 2019-12-15 19.41.47.png

参考にした記事は以下です。
HTML + CSSでリアルな目玉焼きを作る

mask-imageとradial-gradientを使用して、曲線部分を作成しました。

では具体的な作り方です。

まず上記のご飯と同様に丸みのあるdivを用意します。

<div class="roux">  
  <div class="roux_item roux_item-1"></div>
  <div class="roux_item roux_item-2"></div>
  <div class="roux_item roux_item-3"></div>
  <div class="roux_item roux_item-4"></div>
</div>

スクリーンショット 2019-12-15 19.45.41.png

原始人の肉みたいなのができました。
このままでは、角があり、カクカクしててカレールーには見えません。
トロッと感を出すために、ここでmask-imageとradial-gradientの登場です。

まず、鋭角を隠すために.roux_hideを作成します。
作成した.roux_hideに対して、mask-imageとradial-gradientを設定します。

/*色々省略*/


.roux {
    &_hide {
        background: $roux;
        position: absolute;
        z-index: 2;
        &-1 {
        width: 70px;
        height: 60px;
        -webkit-mask-image: radial-gradient(circle at 50% -170%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        top: -43px;
        left: 108px;
        transform: rotate(-1deg);
        }
        &-2 {
        width: 70px;
        height: 50px;
        right: -32px;
        top: 92px;
        transform: rotate(85deg);
        -webkit-mask-image: radial-gradient(circle at 50% -180%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        }
        &-3 {
        width: 60px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -130%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-173deg);
        top: 95%;
        right: 32%;
        }
        &-4 {
        width: 40px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -160%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-93deg);
        top: 150px;
        left: -39px;
        }
    }
}

その結果がこちらです。

スクリーンショット 2019-12-15 19.51.36.png

mask-imageで作成した要素（.roux_hide）のくり抜きを設定し、radial-gradientで円の中心位置、サイズ、色を指定し透明にくり抜くようにしています。

盛り付け：お母さん「ご飯よーーーーーーー！！！！！」

色々と端折りましたが、ついに盛り付けです。

実家のカレーはルーを真上からかけます。

1つ1つのパーツをAtomsから作成したので、codepenで作成したもの1つ１つをコピペでペッと貼るだけです。
その後、位置・サイズ調整等を行い、カレーライスの！！！完成です！！！！！！

スクリーンショット 2019-12-14 20.06.55.png

さいごに

HTMLとCSSだけでカレーライスを作りました。
CSSでお絵かきする時に以下3つを覚えてってください！

  • box-shadow：影をつけるよ
  • border-radius：丸みを出してふんわりさせるよ
  • mask-image（IEは対応してません?）：滑らかな曲線にするよ

Twitterやってます！よかったらフォローしてみてください！

ありがとうございましたー！
カレーアドベントカレンダー引き続きよろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T17:27:04+09:00

classの小話　（cssが適用されないエラーについて）

はじめに

Haml Sassでありがちなミスについて書いてみました。

実行

次のようなビューファイルがあるとします

.top
  .top__contents
    = image_tag src = "https://image.png", class: ".top__contents__image"

画像表示させるコードです。
画像はリンクで表示させ、imageというクラスを設定してみます。
この画像の大きさを、height: 100px, width: 120pxにするために、次のようなCSSを適用してみます。

.top{
  &__contents{
    &__image{
      height: 100px;
      width:  120px;
    }
  }
}

この状態では、画像は思った通りの大きさになりません。
一見すると問題なさそうですが、実は画像のクラスと、CSSが適用させようとしているクラスが間違っているからです。
最初のコードで、画像のクラスをclass: ".top__contents__image"としていますが、実は最初の.が必要なく、全く別のコードとして認識されています。
正しいコードは次のようになります。

.top
  .top__contents
    = image_tag src = "https://image.png", class: "top__contents__image"

これで狙った画像の大きさになります。
この問題の厄介なところが、他の箇所は問題なくCSSが適用されるので、問題がどこにあるのかがわかりにくいことです。
延々と間違いのないCSSを編集し続けることもありえます。
なので、もしCSSが上手く適用されない時は、クラスが正確にかけているかどうかを確認すると良いかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T10:40:40+09:00

cssだけでうんち書いてみた

?世界はうんちで満ちている?

大人が1日に排せつするうんちの量は平均して400～500g、これは1年で換算すると142kgに相当します。142kgという重さはパンダ1頭分だそうです。
大人の?

地球上の人間が1年で排せつするうんちの量は、約2900億kgに相当するとのこと。
地球の?

これだけ世界を満たしている?！
こりゃcssだけで書く需要ありそうです！???

?cssだけで書く?

といってもhtmlも使わないといけない。
でも、それでも、極力使わない方法で書いてみたぞ！???

See the Pen unchi by petapetapeta (@petapetapeta) on CodePen.

ちょっと僕の形（アイコン画像）からは遠のいてしまった。
だがしかし、ある程度似ているはずだから許してもらいたい。
ポイントは、backgorund-imageのradial-gradient()でゴリ押ししていくことだ！
backgorund-sizeとbackgorund-positionも併用してゴリ押しする！
before afterの疑似要素を使って目と口を添えてやれば、立派なうんちの出来上がりだ！???

?参考?

人は一生でどのくらいのうんちをするのか？をイラストで解説するとこうなる

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T01:36:01+09:00

Sassのmixinを用いたレスポンシブ化

Sassを導入した

CSSにも慣れてきたが
ベタベタのベタ書きがあまりにもひどくて目も当てられず

  • どこに何を書いたか分からなくなる
  • 同じようなスタイルを繰り返し書いている
  • テーマ全体の色味をコントロールしにくい
  • とにかく長すぎる

ある程度セクションごとにわけて書いていたが上記のような問題を早めに解決しておきたいと考えてました。

そこでよく聞くSassはどうやらこれらの問題を解決してくれる今をときめくCSSだとか。

Sassには「Sass」と「SCSS」の2種類の記法がありますがSCSSの書き方が一般的との事だったので早速取り入れました。

今回は1番理解が難しかったレスポンシブ化についてフォーカスして書いてみました。

mixinで画面状態を保存して使い回す

SCSSの細かい記法は置いておいて

@mixinでスタイルをあらかじめ作っておいて
@includeで呼び出して使いまわせる

という強力な能力があり
SCSSの入れ子で記述ができるという特徴と組み合わせるとメディアクエリが簡単かつ可読性の高い作り方ができる。

↓イメージ↓

style.scss
@mixin lg {
  //画面サイズがlg以下を意味する記述をする//
}
@mixin md {
  //画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
  //画面サイズがsm以下を意味する記述をする//
}

p{
  color: black;
  @include lg{
    color: red;
    @include md{
      color: blue;
      @include sm{
        color: green;
      }
    }
  }
}

これだけの記述で
lgサイズ以上では黒色
lgサイズ以下では赤色
mdサイズ以下では青色
smサイズ以下では緑色
というレスポンシブ化が可能なのです。

mixinの記述方法

じゃあ肝心のmixin中身はどーすんよって話ですが
まずキーとブレイクポイントの値からなる変数を定義します

style.scss
$breakpoints : (
  "lg":"screen and (max-width:1024px)",
  "md":"screen and (max-width:768px)",
  "sm":"screen and (max-width:480px)"
);

これで
lgのキーは１０２４px以下
mdのキーは７６８px以下
smのキーは４８０px以下
と定義付けができました。

一方mixinはどう書くかというと

style.scss
@mixin mq($breakpoint:md){
  @media #{map-get($breakpoints, $breakpoint)}{
    @content;
  }
}

mqというmixinの引数に上記設定した変数のキーをいれることでメディアクエリの処理をさせる。

まあ＠contentとかmap-getとか、しっかりと理解はしてません。
コピペは強い！
ちなみに引数内の$breakpoint:mdは引数の初期値をmdに設定するよってもの。

実際に使ってみる

実際に使うとどうなるか。

index.html
<body>
  <div class="box red">
    <p>1028px以下で丸に変形</p>
    <p>７６８px以下で非表示</p>
  </div>
  <div class="box blue">
    <p>768px以下で拡大</p>
    <p>４８０px以下で非表示</p>
  </div>
  <div class="box green">
    <p>480px以下で縮小</p>
  </div>
</body>

上記htmlに対し記述するscssは

style.scss
.red{
  background-color: red;
  @include mq(lg){
    border-radius: 50%;
    @include mq(){
      display: none;
    }
  }
}
.blue{
  background-color: blue;
  @include mq(){
    height: 400px;
    width: 400px;
    @include mq(sm){
      display: none;
    }
  }
}
.green{
  background-color: green;
  @include mq(sm){
    height: 100px;
    width: 100px;
  }
}

結果こんな動きをします。

ezgif.com-video-to-gif.gif

結論

便利！！

おわりに

個人的にやりやすいからmax-widthで指定して
〇〇以下の時どうのこうの
のような書き方をしてましたが、
様々なサイトを参考にするとmin-widthを用いてるのが多かったです。
モバイルファーストを意識するなら〇〇以上の時〜の書き方に慣れるべきですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T01:19:58+09:00

僕のP2HACKS譚

はじまり

　12月7日～15日に開催される「P2HACKS」に参加してきました！当初に予定していたRailsではなく全く触ったことのない「React」で製作しました。というより、していますのほうが正しいんですが。しかし、全く触ったことのないものでアプリ製作を行って生じる苦労が１つや２つで収まるわけがないんです。

　とういうわけで、アプリ製作中に僕が学んだことや苦労したことのいくつかを書いていこうと思います。注意：書いてることの正確さは保証しません。

１index.htmlをいじらない

　まずそこからかよって思う人もいると思いますが、そこからなんです。HTMLとCSSは少しわかるがJavaScriptはあんまりわからない、という状況で僕はまず初めに脳死でindex.htmlをいじり始めました。
　Reactは基本的にindex.htmlをいじりません。App.js以下をいじっていれば何か変なことをしない限り勝手にindex.htmlを書き換えてくれます。少しだけ具体的に説明します。

index.htmlでは「root」という名前のidを読み込むことになっています。下記の画像は実際のindex.htmlのコードの一部です。
accc1131ed4d6eb22e7f23ed40b62025.png

次にindex.jsですが、「ReactDOM.render(, document.getElementById('root'));」の部分でAppの部分を編集すれば'root'という名前のidの場所でhtmlを書き換えてくれます。さらに、上の方にある「import App from './App'」でApp（fromの後）という名前でexport defaultされたモジュールをApp（fromの前）という名前で受け取ってます。
下記の画像はindex.jsのコードです
97efcb8bad6974329bdc827ca4d3ea67.png

最後にApp.jsです。ここで直接HTMLを操作したりするコードを書きます。下記の画像を見てください。これはApp.jsのコードです。一番下の「export default App」でこのファイルのデフォルトとしてAppというものをexportするよって意味です。だからfunction App(){ ~ }の中を書き書きすれば動きます。

挿入ミス

２jQueryとReactを併用するな

　jQueryとReactを併用してはいけない。理由はjQueryは本物のDOMをいじるがReactは仮想のDOMを使ってコンポーネントを描画するから処理がコンフリクトするらしい。...正直、説明聞いてもよくわからなかったので「併用してはいけない」という知見しか僕は得ることが出来なかった。それとjQueryを使うと問答無用で猫先輩に怒られる。下記は併用してはいけないことを知らずに僕がどや顔で書いたコードです。やりたかったことは画像をクリックしたとき、それが何の画像でも、src属性の値を持ってくるということです。それ自体は成功しましたが、当然没になりました。
ea0ee1d5737ae6f91a1721b130819e71.png

３flexboxについて（css）

　実装した機能の中に、HTMLでulとliを使って画像をたくさん表示するものがありました。しかし、何もしないままだと画像が縦一列に並んでしまうのでとても見にくいUIになってしまいます。
　そこで利用したものが「flexbox」というレイアウトモジュールです。flexboxでは要素を縦や横に柔軟に配置するためのものらしいです。今回やったことは画像をたくさん表示するときに横に３つずつ並べて居れていくことです。4つ目は次の行の一番左に…って感じです。要素を左から右に、入りきらなくなったら下に行を追加していく、ということを実装するには親要素に「flex-wrap:wrap;」を加えてあげればできます。その後、配置する要素の大きさを(100% /n)の大きさにしてあげれば、横一列にn個の要素が入ります。下記は今回実際に実装したulに対して加えたクラスのコードです。
18aa8c2cf806150658ef79fb75ca145e.png

今回のオチ

　今回、自分が先輩に教わったり自分で調べたりしたりして解決した苦労の一部を書きました。画面遷移とかも書きたかったんですが、自分のコード見ても何で動いてるのか思い出せなかったので止めました（笑）。しかも、かなりあやふやな知識で書いてるのであんまりあてにしないでください。あぁ、こいつはこんなことしてたんだな、くらいの気持ちで読んでいてくれたら嬉しいです。（本当はP2HACKSと関係ないことを紹介したかったけど出来なかったなんて口が裂けても言えない。）
　これ書いてる時間がP2HACKS最終日の1時なんですが、まだ開発が終わっていない...。ということで僕は開発を再開しなければならないので今回はこの辺りで。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-15T00:23:03+09:00

次世代Webスタイリングを追う ーScroll Snap, :focus-within, @media (prefers-*), :is()

こちらは「DeNA Advent Calendar 2019」 の16日目です。
今年は「20新卒のAdvent Calendar」もありますので、よかったら合わせてご覧ください。

概要

Chrome Dev Summit 2019 にて、「 Next-generation web styling 」というセッションがありました。このセッションでは、CSSのセレクタやプロパティをはじめとするWebスタイリングにまつわる多くの新しいTipsが紹介されています。

セッション内の全てのTipsを手を動かしながら確認したかったんですが、色々と間に合いませんでした。なので、現時点で僕が理解できた（であろう）内容を記載したいと思います。

本記事で紹介するTips

本記事では、セッションの前半で紹介されているこちらのTipsを紹介します。

記載しているサンプルとソースコードは、こちらで公開しています。よかったらご覧ください(随時更新予定)。

それでは見ていきましょう/

CSSプロパティ: Scroll Snap

トップバッターは Scroll Snap 。新しいCSSのプロパティです。

このプロパティを指定することで、スマホのホーム画面のスクロールのように、スクロールした後に特定の要素にsnapするようになります。CSSだけでこれを表現できるのは嬉しいですね。

サンプル

水平軸のスクロールで、snap対象の要素を中央に表示させるようにしています(サンプルのURL)。

scroll-snap

HTML
<div class="container">
  <img src="1.png" width="300" height="300">
  <img src="2.png" width="300" height="300">
  <img src="3.png" width="300" height="300">
  <img src="4.png" width="300" height="300">
  <img src="5.png" width="300" height="300">
</div>
CSS
.container {
  display: flex;
  height: 300px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.container img {
  scroll-snap-align: center;
}

scroll-snap-type: スクロール方向を指定。今回は水平軸(x)でしたが、垂直軸(Y)や両軸(both)などもあります。実際の挙動はこちらで確認ください。

scroll-snap-align: snap対象の要素をどの位置に表示するかを指定。今回は中央(center)でしたが、先頭(start)や後尾(end)にもすることができます。

overscroll-behavior: Scroll Snapと合わせたい代物です。これは、スクロールの連鎖を抑制します。何が嬉しいのかというと、Scroll Snapのエリアをスマホで左にスクロールし続けた場合、ユーザーの意図とは反してブラウザバッグする可能性があります。そんな事故防止に効果的です。

ブラウザの対応状況

CSS property: scroll-snap-type CSS property: scroll-snap-align
scroll-snap-type
caniuse.com 		scroll-snap-align
caniuse.com

参考資料

CSSセレクタ: :focus-within

次にCSSセレクタに新しく追加された :focus-within です。これは、その要素自体がフォーカスされているか、または、その要素の子孫がフォーカスされているかを表現することができます。

サンプル

入力欄がフォーカスされた時に親要素の背景色と、その子要素の画像をアニメーションさせています(サンプルのURL)。Chrome DevToolsでも:focus-withinに切り替えることができます。

:focus-within

HTML
<div class="container">
  <img src="1.png" width="50" height="50">
  <input type="text" value="" placeholder="Please focus...">
</div>
CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  transition: all .5s;
  opacity: .25;
}
.container:focus-within {
  background-color: #2c8898;
}
.container:focus-within img {
  opacity: 1;
  transform: rotate(360deg);
}

ブラウザの対応状況

CSS selector: :focus-within
:focus-within
caniuse.com

参考資料

メディアクエリ: @media (prefers-reduced-motion)

激しいアニメーションが苦手な方に向けて、「視差効果を減らす」という設定メニューがあります(初耳だった)。iPhoneはこちらのサポートページの通り、設定メニューがありました。

そしてWebコンテンツも、prefers-reduced-motion を使うことで、視差効果を減らしたいユーザー向けにCSSを記述できるようになりました。

サンプル

意味もなく激しく動くアニメーションを、視差効果を減らしたいユーザーには静止して表示します(サンプルのURL)。

なお、Chrome DevToolsのシミュレーターは、Chrome 79で対応ということです。それまではCanaryで開発すると良いと思います。

prefers-reduced-motion

HTML
<div class="container">
  <div class="motion">
    <img src="1.png" width="50" height="50">
    <img src="2.png" width="50" height="50">
    <img src="3.png" width="50" height="50">
    <img src="2.png" width="50" height="50">
    <img src="1.png" width="50" height="50">
  </div>
</div>
CSS
.container {
  position: relative;
  height: 300px;
}
.motion {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  animation: MoveUpDown 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .motion {
    top: 50%;
    transform: translateY(-50%);
    animation: none;
  }
}
@keyframes MoveUpDown {
  0%, 100% { top: 0; }
  50% { top: 250px; }
}

.motionで上下にアニメーションを行なっており、@media (prefers-reduced-motion: reduce)を使って、アニメーションを打ち消しています。

ブラウザの対応状況

一生懸命がんばって作ったアニメーションが...という心の悲鳴が聞こえてきそうですが、ブラウザは大方対応できているようです。

prefers-reduced-motion media query
prefers-reduced-motion
caniuse.com

参考資料

メディアクエリ: @media (prefers-color-scheme)

macOS Mojaveにて、OSレベルで外観をdarkモードに変更できるようになりました(僕はまだdarkモードに慣れずにいます)。

そしてWebコンテンツも、prefers-color-scheme というメディアクエリを用いて、light/darkごとにCSSで表現できるようになりました。

サンプル

背景色と文字色をモードごとに切り替えるサンプルです(サンプルのURL)。prefers-reduced-motionと同じく、Chrome DevToolsのシミュレーターはChrome 79で対応ということです。

prefers-color-scheme

HTML
<div class="container">
  <p>Hello</p>
  <p>你好</p>
  <p>こんにちは</p>
  <p>안녕하세요</p>
  <p>السلام عليكم</p>
</div>
CSS
:root {
  --theme-font: #0f0f0f;
  --theme-background: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --theme-font: #ffffff;
    --theme-background: #0f0f0f;
  }
}
.container {
  background-color: var(--theme-background);
  color: var(--theme-font);
}

CSSのカスタムプロパティを使い、初期値のlightモード用のカラーコードをdarkモード時にはdarkモード用のカラーコードに上書きするようにしています。そのため、背景色と文字色はカスタムプロパティを参照すればlight/darkそれぞれのモード用に色を切り替えることができます。

ブラウザの対応状況

ブラウザもだいぶ対応されてきている状況です。iOSアプリでは、darkモード対応を推奨しているので、WebViewの開発担当者をはじめ、darkモードの対応が今後増えてくると思います。

prefers-color-scheme media query
prefers-color-scheme
caniuse.com

参考資料

CSSセレクタ: :is()

最後に、新しくCSSに追加されそうな :is() セレクタについてです。このセレクタを使うと、CSSを少しだけシンプルにすることができます。

サンプル

:is()のサンプルです(サンプルのURL)。例えば、記事の見出し(h1 ~ h6)のスタイルを統一したいときに、これまで下記のようにCSSを書いてきたかと思います。

CSS
article > h1, article > h2, article > h3,
article > h4, article > h5, article > h6 {
  color: #0f4c81;
}

これに :is() を使うと、以下のようにシンプルに記載することができます。

CSS
article > :is(h1, h2, h3, h4, h5, h6) {
  color: #0f4c81;
}

ブラウザの対応状況

使う場面けっこうありそうですが、ブラウザの対応状況は待ちの状況。期待して待っていましょう/

CSS selector: :is()
:is()
caniuse.com

参考資料

おわりに

Next-generation web stylingのセッションでは、他にも多くの新しいWebスタイリングのTipsが紹介されています。Gap / Logical Properties / Subgrid / Paint API / Houdini ...。

お腹いっぱいになりそうですが、サービスの使い心地を少しでも高めるためにもぜひキャッチアップしていきたいと考えています。また、試作品ができてきたら公開していきます。

以上、ご覧くださりありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧