What's New Qiita

20200522のCSSに関する記事は11件です。

  • 投稿日：2020-05-22T21:06:51+09:00

ハンバーガーメニューなぜbuttonタグ？

buttonタグについて調べていたら知らなかったことが出てきたのでメモして置きます。

buttonタグはフォーカスされるのに対して、divタグはフォーカスされない。なので、キーボードアクセシビリティを失うことにもなるみたいです。
divタグでフォーカスされるように設定するには、tabindexやjavascriptの記述などプラスで作業することが必要。
というか、素直に正しい役割を持つものを使用するのが良さそうですね。

buttonのtype属性に[submit,reset,button]の三つがあったので、ハンバーガーメニューなどのbuttonには

<button type="button">開閉する</button>

が良さそうです。

アクセシビリティについて考えながらコードを書いたことがなかったので、これから少しずつ習得していきたい。

詳しい作り方などは、下記のサイトがとても参考になりました。

参考サイト
・https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
・https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
・https://shibajuku.net/category/accessibility/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T16:28:51+09:00

Vue.jsで作る！自動保存するToDoリスト~その１~

誰向けですか？

・Vue.js超初心者
・Vue.jsの基本構文は覚えたけど次は何すればいいの？
・リロードしたら消えちゃう！！

↑という方向けです。自分自身の学習のためにも記事を書かせていただきます！記述で間違いなどがありましたら教えてくださるとありがたいです?‍♂️

このパートの完成イメージ

スクリーンショット 2020-05-23 10.46.31.png

とりあえずinputに書いてbuttonを押すと配列(items)に追加できるようにしよう！
次回以降で順にCSSで見た目、watchやmountedを使用して保存できるようにします。

このパートですること

1.HTMLを書いてVueで操作できるようにする
2.Vueで配列の作成やinputをバインディングする
3.関数を作成して追加、削除できるようにする

1.HTMLの記述

index.html
<div id="app">
        <div>
           <!-- v-modelはこのinputをVueとバインディングさせる役割 -->
            <input v-model="message">
             <!-- @click=""の中はVueで記述するメソッド(＠はv-on:の省略です) -->
            <button @click="add_item()">追加</button>
            <button @click="all_del_item">全削除</button>

            <!-- v-for( 配列, index(配列内の要素に振られた添字)を(item,idx)と表している ) -->
            <ul><li v-for="(item,idx) in items">
                {{ item }} <button @click="del_item( idx )"> 削除 </button>
            </li></ul>
        </div>
    </div>

Vue.jsの記述

main.js

const myApp = new Vue({

        // id="app"をVueでマウントする
        el: '#app',
        //何の処理もない配列やオブジェクトなどをおく場所(もしdataに処理を加えたい場合はcomputedを使う)
        data: {
            //配列の初期状態,良い朝の流れである
            items: ['起きる', '洗顔', '歯磨き',],
            //inputの初期状態(既に何か書かれていたら変なので空にしておく)
            message: ''
        },

これではまだmessageの追加や削除ができないので、data{},の続きにmethodsを記述する。

// Vueアプリケーション内で使用する関数を定義する場所
        methods: {
            // itemsに追加するメソッド、{ itemsにmessageをpush(追加)する }
            add_item: function () { this.items.push( this.message ) },
            // 削除ボタンを押した時のメソッド、{ items(自身)を1つsplice(削除)する }
            del_item: function ( _idx ) { this.items.splice( _idx, 1 ) },
            // itemsを全て削除するメソッド、spliceの数を大きい数字にすれば全て消えるでしょう
            all_del_item: function ( _idx ) { this.items.splice( _idx, 10000 ) }
        },

#まとめ

実際に記述してinputに書いた文字が追加・削除できたでしょうか？
次のパートではこの寂しい見た目をCSSで装飾しましょう！(SCSSかBootstrapで予定しています)
この記事を読んでくださったあなたの成長を応援させていただきます！！！

次回のパート
Vue.jsで作る！自動保存するToDoリスト~その2~Bootstrap編

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T15:45:29+09:00

CSSってたのしい！（動的背景）

CSSのみで色をかえる

スライドショーみたいな切り替えではなく、だんだんと色が変わっていく背景を目指す。

コード

<head>
    <title>backgroundslide</title>
    <link rel="stylesheet" type="text/css" href="backslide.css">
</head>
<body>
</body>

body{
    height: 100vh;
    width: auto;
    background: linear-gradient(-45deg, 
    #873742, #648323, #238747, #108483);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    background-position: top center;
    background-attachment: fixed;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

斜めのスライドになっているが
background: linear-gradient(-45deg, #873742, #648323, #238747, #108483);
の部分の角度と色を変えれば流れる方向と色の組み合わせも変えることができる。
ただこれは意外と無駄なところもあるから改善の余地ありだね。

ちょっとしたコメント

最近WEBでのフロントデザイナーとか多くなったけど、その分、初心者が作るものも増えてきているなぁと。でも見てみると動的なものを作るのはjavascriptとかがやっぱり多いけど、単純なCSSでも作れるのも知っておくといいなと思った！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T13:46:03+09:00

Writebox で縦書きに (Firefox のみ)

CSS を編集することで、 Writebox を縦書きエディタにしてみました:

vertical_writebox.png

Writebox は Dropbox と同期してテキスト編集ができる web アプリです。頻繁にファイル移動をしないなら、快適に使用できると思います。

背景

最近のブラウザは、 writing-mode: vertical-rl で 縦書き編集 ができます。そこで、 CSS を追加して、 Writebox を縦書きエディタにしてみました。

ただし、縦書き対応にはブラウザごとに差があり、 textarea を使っている Writebox に関しては、 Firefox 限定となります。

Chrome でも contenteditable なら縦書き編集が可能です。

方法

どちらかの拡張を入れます:

Writebox を開き、次のテーマ (書きました) を入れます:

すると、冒頭のような画面になります。

段組みはできませんでした。

Greasemonkey などから spellcheck="false" を設定すれば、スペルチェックの赤線も消せると思います。

余談

他の縦書きエディタは

Mac 限定ですが、

  • CotEditor: 縦書き (横スクロール) ができます
  • Jedit Ω: 縦書き段組み (横スクロール) ができます (!)

縦書き用デスクトップアプリを作るには

少し検討してみました。
フォントはヒラギノ明朝が良いかもしれません。

Electron

contenteditable で一応縦書き表示ができます。

Chronium のバージョンが古いです。 nightly 版を使っても、カーソルが分裂したように見えることが頻繁にありますし、十字キーがリマップされません。しかし、内部的には正しく動作するので、 contenteditable を上手く制御出来れば、快適な縦書きエディタにできるかもしれません。

なお、 CSS の縦書き段組みは、上下にスクロールします。

SDL2

IME に対応しています (TextInput) 。入力中文字を取得できますが、ちょっと変換候補を取得できるのか分かりません。

Mac では、横方向に変換候補が表示されました。少なくとも Mac では、強引に縦書きエディタを作ることができると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T13:46:03+09:00

Writebox を縦書きエディタとして使う (Firefox のみ)

CSS を編集することで、 Writebox を縦書きエディタにしてみました:

vertical_writebox.png

Writebox は Dropbox と同期してテキスト編集ができる web アプリです。頻繁にファイル移動をしないなら、快適に使用できると思います。

背景

最近のブラウザは、 writing-mode: vertical-rl で 縦書き編集 ができます。そこで、 CSS を追加して、 Writebox を縦書きエディタにしてみました。

ただし、縦書き対応にはブラウザごとに差があり、 textarea を使っている Writebox に関しては、 Firefox 限定となります。

Chrome でも contenteditable なら縦書き編集が可能です。

方法

どちらかの拡張を入れます:

Writebox を開き、次のテーマ (書きました) を入れます:

すると、冒頭のような画面になります。

段組みはできませんでした。

Greasemonkey などから spellcheck="false" を設定すれば、スペルチェックの赤線も消せると思います。

余談

他の縦書きエディタは

Mac 限定ですが、

  • CotEditor: 縦書き (横スクロール) ができます
  • Jedit Ω: 縦書き段組み (横スクロール) ができます (!)

縦書き用デスクトップアプリを作るには

少し検討してみました。
フォントはヒラギノ明朝が良いかもしれません。

Electron

contenteditable で一応縦書き表示ができます。

Chronium のバージョンが古いです。 nightly 版を使っても、カーソルが分裂したように見えることが頻繁にありますし、十字キーがリマップされません。しかし、内部的には正しく動作するので、 contenteditable を上手く制御出来れば、快適な縦書きエディタにできるかもしれません。

なお、 CSS の縦書き段組みは、上下にスクロールします。

SDL2

IME に対応しています (TextInput) 。入力中文字を取得できますが、ちょっと変換候補を取得できるのか分かりません。

Mac では、横方向に変換候補が表示されました。少なくとも Mac では、強引に縦書きエディタを作ることができると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T13:25:06+09:00

css　ホバーで背景画像拡大とカラーフィルターをかける

css　ホバーで背景画像拡大とカラーフィルターをかける

完成イメージ

Image from Gyazo

今回作成するものは以下です。
使うものはCSSだけです。

・画像にテキストを重ねる
・ホバーすると画像が拡大する（テキストは拡大しない）
・ホバーに合わせて黒のカラーフィルターをかける
・画像全体がリンクとしてクリックできる
・画像にはbackgraoun-imageを使い画像サイズにレイアウトが影響されない
・各要素はflexboxなどで自由に配置ができる
.ホバーの動きはコンポーネント化してクラス名付与で使い回せる

個別に考えると要素の重なりで
リンクが上手く動作しなかったり
htmlがネストだらけになりそうですが
疑似要素のafterを使うことで全ての条件を満たします。

完成コード

<section class="banners">
  <a class="banner bg-zoom" href="#">
    <div class="banner-content bg-zoom-content">
      <p>text</p> 
    </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
</section>

aタグで囲まれた部分が１つの要素です。

.banners {
  display: flex;  //要素を横並び
}

.banners .banner {
  width: 100%;  //要素の横幅（レスポンシブ想定で％指定）
  height: 300px; //要素の高さ
}

.banners .banner .banner-content {
  color: white;　//テキスト色は白
}

.bg-zoom {
  position: relative;  //親要素を決める
  overflow: hidden;  //背景拡大時のはみ出しを非表示
  background: #000;  //カラーフィルターは黒
}

.bg-zoom:after {
  position: absolute;  //子要素を固定
  content: "";  //疑似要素の中身は空（必須）
  display: block;  //フィルターの高さと幅を指定のためブロック要素に変更
  width: 100%; //カラーフィルター幅は画像いっぱいに
  height: 100%;　//カラーフィルター高さは画像いっぱいに
  top: 0;　//カラーフィルターをトップに固定
  background: url(https://picsum.photos/id/237/200/300) no-repeat center center; //画像のパスを指定
  transition: all .8s ease;  //変化のスピードと動き
  background-size: cover;  //背景画像のプロパティはカバー
}

.bg-zoom:hover:after {
  opacity: .3;  //ホバー時に透過させてフィルターがかかる
  transform: scale(1.05); //画像の拡大比率（１０５％）
}

.bg-zoom .bg-zoom-content {
  z-index: 1;  //テキストを最上面に指定
  position: absolute; //親要素に固定
  top: 50%; //中央揃え
  left: 50%;　//中央揃え
  transform: translate(-50%, -50%);　//中央揃え
}

実行結果
Image from Gyazo

bg-zoomというクラスにホバーアニメーションを固定することで
他の箇所にもクラス指定するだけで同じアニメーションをかけることができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T13:25:06+09:00

CSS　ホバーで背景画像拡大とカラーフィルターをかける

css　ホバーで背景画像拡大とカラーフィルターをかける

完成イメージ

Image from Gyazo

今回作成するものは以下です。
使うものはCSSだけです。

・画像にテキストを重ねる
・ホバーすると画像が拡大する（テキストは拡大しない）
・ホバーに合わせて黒のカラーフィルターをかける
・画像全体がリンクとしてクリックできる
・画像にはbackgraoun-imageを使い画像サイズにレイアウトが影響されない
・各要素はflexboxなどで自由に配置ができる
・ホバーの動きはコンポーネント化してクラス名付与で使い回せる

個別に考えると要素の重なりで
リンクが上手く動作しなかったり
htmlがネストだらけになりそうですが
疑似要素のafterを使うことで全ての条件を満たします。

完成コード

<section class="banners">
  <a class="banner bg-zoom" href="#">
    <div class="banner-content bg-zoom-content">
      <p>text</p> 
    </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
</section>

aタグで囲まれた部分が１つの要素です。

.banners {
  display: flex;  //要素を横並び
}

.banners .banner {
  width: 100%;  //要素の横幅（レスポンシブ想定で％指定）
  height: 300px; //要素の高さ
}

.banners .banner .banner-content {
  color: white;　//テキスト色は白
}

.bg-zoom {
  position: relative;  //親要素を決める
  overflow: hidden;  //背景拡大時のはみ出しを非表示
  background: #000;  //カラーフィルターは黒
}

.bg-zoom:after {
  position: absolute;  //子要素を固定
  content: "";  //疑似要素の中身は空（必須）
  display: block;  //フィルターの高さと幅を指定のためブロック要素に変更
  width: 100%; //カラーフィルター幅は画像いっぱいに
  height: 100%;　//カラーフィルター高さは画像いっぱいに
  top: 0;　//カラーフィルターをトップに固定
  background: url(https://picsum.photos/id/237/200/300) no-repeat center center; //画像のパスを指定
  transition: all .8s ease;  //変化のスピードと動き
  background-size: cover;  //背景画像のプロパティはカバー
}

.bg-zoom:hover:after {
  opacity: .3;  //ホバー時に透過させてフィルターがかかる
  transform: scale(1.05); //画像の拡大比率（１０５％）
}

.bg-zoom .bg-zoom-content {
  z-index: 1;  //テキストを最上面に指定
  position: absolute; //親要素に固定
  top: 50%; //中央揃え
  left: 50%;　//中央揃え
  transform: translate(-50%, -50%);　//中央揃え
}

実行結果
Image from Gyazo

bg-zoomというクラスにホバーアニメーションを固定することで
他の箇所にもクラス指定するだけで同じアニメーションをかけることができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T13:25:06+09:00

CSS(SCSS)　ホバーで背景画像拡大とカラーフィルターをかける(mixin使用)

CSS(SCSS)　ホバーで背景画像拡大とカラーフィルターをかける

完成イメージ

Image from Gyazo

今回作成するものは以下です。
使うものはCSS(SCSS)だけです。

・画像にテキストを重ねる
・ホバーすると画像が拡大する（テキストは拡大しない）
・ホバーに合わせて黒のカラーフィルターをかける
・画像全体がリンクとしてクリックできる
・画像にはbackgraoun-imageを使い画像サイズにレイアウトが影響されない
・各要素はflexboxなどで自由に配置ができる
・ホバーの動きはコンポーネント化してクラス名付与で使い回せる

個別に考えると要素の重なりで
リンクが上手く動作しなかったり
htmlがネストだらけになりそうですが
疑似要素のafterを使うことで全ての条件を満たします。

完成コード

<section class="banners">
  <a class="banner bg-zoom" href="#">
    <div class="banner-content bg-zoom-content">
      <p>text</p> 
    </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
 <a class="banner bg-zoom" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
</section>

aタグで囲まれた部分が１つの要素です。

.banners {
  display: flex;  //要素を横並び
}

.banners .banner {
  width: 100%;  //要素の横幅（レスポンシブ想定で％指定）
  height: 300px; //要素の高さ
}

.banners .banner .banner-content {
  color: white;　//テキスト色は白
}

.bg-zoom {
  position: relative;  //親要素を決める
  overflow: hidden;  //背景拡大時のはみ出しを非表示
  background: #000;  //カラーフィルターは黒
}

.bg-zoom:after {
  position: absolute;  //子要素を固定
  content: "";  //疑似要素の中身は空（必須）
  display: block;  //フィルターの高さと幅を指定のためブロック要素に変更
  width: 100%; //カラーフィルター幅は画像いっぱいに
  height: 100%;　//カラーフィルター高さは画像いっぱいに
  top: 0;　//カラーフィルターをトップに固定
  background: url(https://picsum.photos/id/237/200/300) no-repeat center center; //画像のパスを指定
  transition: all .8s ease;  //変化のスピードと動き
  background-size: cover;  //背景画像のプロパティはカバー
}

.bg-zoom:hover:after {
  opacity: .3;  //ホバー時に透過させてフィルターがかかる
  transform: scale(1.05); //画像の拡大比率（１０５％）
}

.bg-zoom .bg-zoom-content {
  z-index: 1;  //テキストを最上面に指定
  position: absolute; //親要素に固定
  top: 50%; //中央揃え
  left: 50%;　//中央揃え
  transform: translate(-50%, -50%);　//中央揃え
}

実行結果

Image from Gyazo

bg-zoomというクラスにホバーアニメーションを固定することで
他の箇所にもクラス指定するだけで同じアニメーションをかけることができます。

mixinを使用して画像を切り替え

上記では全ての画像が同じになってしまうため
コンポーネント化したbg-zoomをmixinを使用して
引数で画像のパスがわたせるようにします。

<section class="banners">
  <a class="banner con1" href="#">
    <div class="banner-content bg-zoom-content">
      <p>text</p> 
    </div>
 </a>
 <a class="banner con2" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
 <a class="banner con3" href="#">
   <div class="banner-content bg-zoom-content">
     <p>text</p>
   </div>
 </a>
</section>


.banners {
  display: flex;  //要素を横並び
}

.banners .banner {
  width: 100%;  //要素の横幅（レスポンシブ想定で％指定）
  height: 300px; //要素の高さ
}

.banners .banner .banner-content {
  color: white;　//テキスト色は白
}

@mixin bgZoom($bgPath) {
  position: relative;
  overflow: hidden;
  background: #000;
  &:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: $bgPath no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
  }
  &:hover:after {
    opacity: .3;
    transform: scale(1.05);
  }
  .bg-zoom-content {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
} 
.con1 {
  @include bgZoom(url(https://picsum.photos/seed/picsum/1350/900))
}
.con2 {
  @include bgZoom(url(https://picsum.photos/id/237/1350/900))
}
.con3 {
  @include bgZoom(url(https://picsum.photos/1350/900?grayscale))
}

コンパイルした実行結果

Image from Gyazo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T12:47:52+09:00

CSS　ホバーでテキストに下線をつける（アニメーション）

CSS　ホバーでテキストに下線をつける（アニメーション）

疑似要素を使ってテキストに下線を入れて
アニメーションで表示してみましょう。

完成イメージ

Image from Gyazo

完成コード

<ul class="header">
  <li class="link hover-Uline"><a href="">WORKS</a></li>
  <li class="link hover-Uline"><a href="">PRODUCT</a></li>
  <li class="link hover-Uline"><a href="">NEWS</a></li>
  <li class="link hover-Uline"><a href="">ABOUT</a></li>
  <li class="link hover-Uline"><a href="">OTHERS</a></li>
  <li class="link hover-Uline"><a href="">ACCESS</a></li>
</ul>

* a,li{ /*リセット*/
  color: black;
  text-decoration: none;
  list-style: none;
}

.header { /*要素の横並び*/
  display: flex;
}

.link { /*要素の整列*/
 margin-left: 1rem;
 text-align: center;
}

.hover-Uline {
  position: relative;　/*疑似要素の親を固定*/
  cursor: pointer;　/*カーソルをポインターへ*/
  text-decoration: none;　 /*ホバーなしは非表示*/
}

.hover-Uline:before {
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  position: absolute; /*子要素として疑似要素を固定*/
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: -5px;  /*線の上下位置*/
  width: 100%; /*線の長さ*/
  height: 2px; /*線の太さ*/
  background-color: #9e9c9c; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: center; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
}

.hover-Uline:hover:before {
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

実行結果
Image from Gyazo

プロパティを変えれば左端から線をアニメーションなども可能です。
transform-origin: left;

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T08:47:35+09:00

CSSをMATERIAL-UIのmakeStylesで書き換える

Reactの学習をしていてCSS in JSなるものに出会ったので、
基本的な内容ながらまとめておきたいと思います。

普通のCSS(CSSファイル形式で書いたCSS)をMATERIAL-UIのmakeStylesで書き換える、ちょっとした手がかりのつもりです。

知れること・知れないこと

知れること

  • CSSファイルの形式で書かれたスタイルをMATERIAL-UIのmakeStylesで書き換える方法

知れないこと

  • MATERIAL-UI以外の実装方法
  • CSS in JSの是非

CSS in JS って？

字のごとくJSの中でCSSを書くスタイルの一つの書き方(おそらく総称)。
フロントエンドフレームワークで出てくるコンポーネントの概念とともに検討され始めた書き方らしいです。
ざっくり言うと、「コンポーネント単位で実装するんだったら、CSSもコンポーネント単位で書いた方がよくない？（CSSをわざわざファイル分けするのは管理上適切ではないのでは？）」と言ったことらしい。

参考
styled-componentsで変わるReactコンポーネントのスタイリング

元々のCSSの記述

以下のようなタグのスタイルを今回対象にしてみます。
css2.gif

※こちらのCSSファイルの内容自体は以下のサイトのものほぼほぼそのままです。
CSSで実装するタグクラウドのサンプル

tag.css
.taggroup ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.taggroup ul li {
    display: inline-block;
    margin: 0 .3em .3em 0;
    padding: 0;
}
.taggroup ul li a {
    display: inline-block;
    max-width: 100px;
    height: 28px;
    line-height: 28px;
    padding: 0 1em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: .2s;
}
.taggroup ul li a:hover {
    background-color: #555;
    color: #fff;
}

CSSファイルで書いた場合は、
以下のようにファイルを読み込んでclassNameにクラス名を付与して利用します。

TagCss.js
import React from 'react';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import "./Tag.css";

const TagCss = () => {
    return (
        <>
            <Container>
                <Grid container>
                    <Grid item xs={12} sm={12} md={12} lg={12}>
                        <Box textAlign="center" mt={5}>
                            <Box mb={1}>CSS</Box>
                            <div className="taggroupcss">
                                <ul>
                                    <li><a href="#">JavaScript</a></li>
                                    <li><a href="#">React</a></li>
                                </ul>
                            </div>
                        </Box>
                    </Grid>
                </Grid>
            </Container>
        </>
    )
}

export default TagCss;

TagCssの表示例をもう一度
css2.gif

MATERIAL-UIのmakeStylesで書き換えた例

これをMATERIAL-UIのmakeStylesで書き換えると、一つのjsファイルにまとめて記載できるという寸法です。

Tag.js
import React from 'react';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core';

const Tag = () => {
    const classes = tagStyle();
    return (
        <>
            <Container>
                <Grid container>
                    <Grid item xs={12} sm={12} md={12} lg={12}>
                        <Box textAlign="center" mt={5}>
                            <Box mb={1}>makeStyles(CSS in JS)</Box>
                            <div className={classes.taggroup}>
                                <ul>
                                    <li><a href="#">JavaScript</a></li>
                                    <li><a href="#">React</a></li>
                                </ul>
                            </div>
                        </Box>
                    </Grid>
                </Grid>
            </Container>
        </>
    )
}

const tagStyle = makeStyles(() => ({
    taggroup: {
        "& ul": {
            margin: "0",
            padding: "0",
            listStyle: "none",
            "& li": {
                display: "inline-block",
                margin: "0 .3em .3em 0",
                padding: "0",
                "& a": {
                    display: "inline-block",
                    maxWidth: "100px",
                    height: "28px",
                    lineHeight: "28px",
                    padding: "0 1em",
                    backgroundColor: "#fff",
                    border: "1px solid #aaa",
                    borderRadius: "3px",
                    whitespace: "nowrap",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                    color: "#333",
                    fontSize: "13px",
                    textDecoration: "none",
                    transition: ".2s",
                    "&:hover": {
                        backgroundColor: "#555",
                        color: "#fff"
                    }
                }
            }
        }
    }
}));


export default Tag;

Tagの表示例
（書き換えただけなんだからTagCssと同じ表示のされ方をしないとおかしいですね）
makestyle.gif

書き換えのポイント

makeStyleの基本的な使い方は以下が参考になります。
React: Material-UI 4.0のコンポーネントへのCSS設定はwithStyles()からmakeStyles()に
公式

一つ目のサイトから書式の説明を拝借すると以下のような感じです。

const フック関数 = makeStyles((theme) => ({
  クラス: {
    プロパティ: 文字列の設定値,
    // 他のプロパティの定め
  },
  // 他のクラス
}));

（今回前述した例は、引数のthemeなしバージョンです）

ポイント : プロパティをキャメルケースに変更して書く

例えば

tag.css
.taggroup ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

のlist-styleは、

tag.js
const tagStyle = makeStyles(() => ({
    taggroup: {
        "& ul": {
            margin: "0",
            padding: "0",
            listStyle: "none",
~~以下省略~~

といった風にlistStyleに変更します。
参考 : material-uiの見た目を調整する3つの方法などなど。

また、実は、以下のようにプロパティを文字列として扱っても表示は同じになります。

tag.js
const tagStyle = makeStyles(() => ({
    taggroup: {
        "& ul": {
            margin: "0",
            padding: "0",
            "list-style": "none",
~~以下省略~~

最悪、元のCSSの中身を"だか'で囲みまくったら、書き換え可能ってことですね。（是非はともかく……）

〜〜〜
少し余談ですが、ベンダプレフィックスが必要なプロパティの場合は、試した限りは文字列として扱った書き換えしかできなさそうでした。（ベンダプレフィックス→-webkit-など）

.exp {
    -webkit-transition: .2s;
}

なんてのがあったら

const expStyle = makeStyles(() => ({
    exp: {
        "-webkit-transition": ".2s";
    }
}));

とします。

まあ、文字列で書き換える前に、本当にベンダプレフィックス（-webkit-）が必要なのかどうかは見ておいた方がいいでしょうね。
参考 : そのベンダープレフィックス、いつまでつけてるの？

ポイント : 絞り込みは&を使う！

tag.css
.taggroup ul li {
    display: inline-block;
    margin: 0 .3em .3em 0;
    padding: 0;
}

上記のように、taggroupクラスを使った要素の中のulの中のliと、
スタイルを指定する範囲を絞り込んでいく場合。（割と分からなかった）

（答えはすでに書いてあるわけですが）入れ子構造にして文字列として&でつなげていけばOKです。
・上記書き換え分の抜粋

tag.js
const tagStyle = makeStyles(() => ({
    taggroup: {
        "& ul": {
           ~~省略~~
            "& li": {
                display: "inline-block",
                margin: "0 .3em .3em 0",
                padding: "0",
           ~~省略~~

a:hoverなんかも、このやり方で記述可能です。
・a:hoverの部分の抜粋

tag.js
const tagStyle = makeStyles(() => ({
    taggroup: {
                ~~省略~~
                "& a": {
                    ~~省略~~
                    "&:hover": {
                        backgroundColor: "#555",
                        color: "#fff"
                    }
                ~~省略~~

ちなみに、
SCSSやSASSでスタイルを書いている人にとっては、&でつなげるというのは割と自然な考え方のようです。

参考
[SCSS]便利な&（アンパサンド）の使い方メモ
【Sass】親セレクタを参照する&や+の使い方

その他

アニメーションの書き方にも、多少コツが必要そうです。

何度も出している参考記事
React: Material-UI 4.0のコンポーネントへのCSS設定はwithStyles()からmakeStyles()に
(こちらの記事ではひな形のアプリケーションのCSSをmakeStyleに書き換えたものが載っていて、アニメーションについても言及されています)

おわりに

「いや、別に無理して書き換えなくてもCSSのままでもいいんじゃない？」　と言う話は実際あるようですが、「CSSで書いていたものが、CSS in JSだと全く検討もつかない！」というのは、ちょっと癪だったので、いろいろ調べてみました。
（書き換えることに集中したため詳しいCSS in JSの是非までは追求していないです:sweat_smile:）

CSS in JSのメリットの話（動的にスタイルを変更できるなど）といった発展的な話まではでできていませんが、最初に書いたように、この記事がmakeStyles（その他）を使うときのちょっとした手がかりになってもらえたら嬉しいです!!

以上になります！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-22T05:15:32+09:00

初心者によるプログラミング学習ログ 323日目

100日チャレンジの323日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
323日目は、

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

日付別

タグ一覧