What's New Qiita

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

  • 投稿日：2020-05-29T23:11:29+09:00

[JavaScript]JavaScriptでFizzBuzz！(復習編)

目次

  • はじめに
  • サンプルコード
  • サンプル画像と使用例
  • おわりに
  • 参考にしたサイト

はじめに

拙著の記事にも書いたが、FizzBuzzをできないようでは情報技術者失格らしい。この頃、それを実感する出来事があった。そのため、自分が経験してきた言語でFizzBuzzを復習していく。
今回は、JavaScriptでFizzBuzzを解き、HTMLとCSSを用いて画面上にその結果を表示する。

サンプルコード

〇HTML + JavaScript

<html>

<head>
    <title>Let's FizzBuzz</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
    <link rel="stylesheet" type="text/css" href="FizzBuzz_var1.01.css">
    <script>
        function btnFizzBuzz()
        {
            var num1 = document.forms.FizzBuzz.numFizzBuzz1.value
            var num2 = document.forms.FizzBuzz.numFizzBuzz2.value
            var arrFizzBuzz = [];
            // 空白チェック
            if (num1 === "" || num2 === "")
            {
                alert('数値①と数値②には数値を入力してください。');
            } else
            {
                for (var i = num1;i <= num2;i++)
                {
                    if ((i % 3 === 0) && (i % 5 === 0))
                    { //３かつ５の倍数
                        arrFizzBuzz.push('FizzBuzz');

                    } else if (i % 3 === 0)
                    { //それ以外で３の倍数
                        arrFizzBuzz.push('Fizz');

                    } else if (i % 5 === 0)
                    { //それ以外で５の倍数
                        arrFizzBuzz.push('Buzz');

                    } else
                    {
                        arrFizzBuzz.push(i);
                    }
                }
                alert(arrFizzBuzz);
            }
        }
    </script>
</head>

<body>
    <h1>Let's FizzBuzz</h1>
    <table>
        <tr>
            <th>
                <div class="boxTrivia1">
                    <label for="btnTrivia1">そもそもFizzBuzzとは？</label>
                    <input type="checkbox" id="btnTrivia1">
                    <ul class="text">
                        <li>英語圏で長距離ドライブ中や飲み会の時に行われる言葉遊び…らしい</li>
                        <li>そして、このゲームを画面に表示させるプログラムとして作成させることで、<br>
                            コードが書けないプログラマ志願者を見分ける手法を、<br>
                            Jeff AtwoodがFizzBuzz問題 (FizzBuzzQuestion)として提唱した。<br>
                            <s>余計なことをしやがって</s>
                        </li>
                    </ul>
                </div>
            </th>
            <th>
                <div class="boxTrivia2">
                    <label for="btnTrivia2">FizzBuzzが出来ないと…？</label>
                    <input type="checkbox" id="btnTrivia2">
                    <ul class="text">
                        <li>FizzBuzzが出来ない = 情報技術者(要はプログラマ)失格レベルらしい</li>
                        <li>企業に入社した際の新人研修でこのFizzBuzz問題を課題として出すことも多い</li>
                        <li>また、転職する際の技術試験で出されることもある</li>
                        <li>なので、せめて自分が得意とする言語ではFizzBuzzを空で<br>
                            コーディングできるように、なろう！
                        </li>
                    </ul>
                </div>
            </th>
        </tr>
    </table>
    <h2>数値を入力してね！</h2>
    <form id="FizzBuzz">
        <p>
            数値①(最低値)<input type="number" id="numFizzBuzz1" size="10" maxlength="20">
        </p>
        <p>
            数値②(最高値)<input type="number" id="numFizzBuzz2" size="10" maxlength="20">
        </p>
        <input type="button" class="btnFB" value="FizzBuzz出力" onClick="btnFizzBuzz()">
    </form>
</body>

</html>

〇CSS

body {   
    height:100%;
}
body:after {
    position: fixed; /* fixed:ページがスクロールされても、いつでも同じ場所に配置される */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background: linear-gradient(-45deg, rgba(246, 255, 0, 0.678), rgba(212, 26, 144, 0.8)),
    url("お好みの画像を入れてください");
    background-size: contain; /* 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する */
}
h1{
    width: 400pt;
    margin: auto;
    border: 1pt solid rgb(0, 0, 0);
    border-radius: 8pt;
    background: linear-gradient(45deg, #f5962a 25%, transparent 25%, transparent 75%, #f5962a 75%),
                linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%);
    background-color: #f3c220;
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    box-shadow: 0 4pt 8pt 0 rgba(0, 0, 0, 0.2), 0 3pt 10pt 0 rgba(0, 0, 0, 0.19);
    color:rgb(0, 0, 0);
    text-align: center;
    font-family: "Monotype Corsiva"; 
    font-size: 8ex;
}
h2{
    color:rgb(0, 0, 0);
    text-align: center;
    font-family: "Monotype Corsiva"; 
    font-weight: bold;
}
p{
    color:rgb(0, 0, 0);
    text-align: center;
    font-family: "Meiryo UI"; 
    font-weight: bold;
}
/** トリビアボタン **/
.boxTrivia1  label {
    display: inline-block;
    margin: 10px;
    color: #332c10; /* ボタンの文字色 */
    background-color: #ffdb4f; /* ボタンの背景色 */
    font-weight: bold; /* 文字の太さ */
    padding: 0.5em 1em; /* ボタン内側の余白 */
    border-bottom: solid 4px #ccb03f; /* ボタンの影部分 */
    border-radius: 3px; /* 角丸 */
    cursor: pointer; /* ボタンにカーソルを合わせた時に指アイコンを表示 */
}
/** ボタンクリック時のボタンを押し込む動作 **/
.boxTrivia1 label:active {
    -webkit-transform: translateY(4px); /* Chrome、Safari用 */
    -moz-transform: translateY(4px); /* Firefox用 */
    -ms-transform: translateY(4px); /* IE用 */
    transform: translateY(4px);
    border-bottom: none;
}
/** チェックボックス **/
.boxTrivia1 input {
    display: none; /* 非表示 */
}
/** 表示・非表示を切り替えるテキスト **/
.boxTrivia1 .text {
    color: rgb(0, 0, 0); /* 文字色 */
    font-weight: bold; /* 文字の太さ */
    overflow: hidden;
    opacity: 0; /* 文字を非表示 */
    text-align: left;
}
/** チェックボックスにチェックが入った時の、テキストの処理 **/
.boxTrivia1 input:checked ~ .text {
    height: auto;
    opacity: 1; /* 文字を表示 */
}
.boxTrivia2 label {
    display: inline-block;
    margin: 10px;
    color: #332c10;                   
    background-color: #ffdb4f;      
    font-weight: bold;             
    padding: 0.5em 1em;             
    border-bottom: solid 4px #ccb03f; 
    border-radius: 3px;           
    cursor: pointer;               
}
.boxTrivia2 label:active {
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);    
    -ms-transform: translateY(4px); 
    transform: translateY(4px);
    border-bottom: none;
}
.boxTrivia2 input {
    display: none;
}
.boxTrivia2 .text {
    color: rgb(0, 0, 0);  
    font-weight: bold;
    overflow: hidden;
    opacity: 0; 
    text-align: left;
}
.boxTrivia2 input:checked ~ .text {
    height: auto;
    opacity: 1; 
}
.btnFB {
    display: block;
    text-align: center;
    margin: 10px auto;
    cursor: pointer; 
    background: linear-gradient(45deg, #f5962a 25%, transparent 25%, transparent 75%, #f5962a 75%),
                linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%);
    background-color: #f3c220;
}

サンプル画像と使用例

実際の画面は以下の通りになる。ちょっとオシャンティ(死語)にレイアウトしてみた。
コメント 2020-05-29 221913.png
各ラベルをクリックしたら、以下の文章が表示される。若干見辛い…？
コメント 2020-05-29 222107.png
また、テキストボックスに数値を入力後、ボタンをクリックすると、FizzBuzzの結果がaleartで表示される。
コメント 2020-05-29 222928.png

おわりに

今回を振り返って、JavaScriptでシンプルにFizzBuzzを解いてみた。また、FizzBuzzの結果を画面上で見られるように、alertで表示するようにもこだわってみた。
意外と簡単にできるな、と思ったが、どうやらできるだけ短くコーディングするやり方があるらしい。(Code Golf という、可能な限りもっとも短いソースコードで記述する競技があるとか)調べてみると、以下のソースコードが最短っぽい。

for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

わけわかんないですね…。
FizzBuzz問題は奥が深い。だからこそ、プログラマの物差しになっているのだと思う。
次からは、できる限りシンプルにコーディングしてみようと思う。

参考にしたサイト

  • FizzBuzz、JavaScript系

FizzBuzz問題のJavaScript最短コードを解説します
HTMLクイックリファレンス
【JavaScript】 空文字のチェック方法【勉強中】

  • HTML、CSS系

HTMLとCSSだけ！要素の表示・非表示を切り替える方法
CSSのグラデーション（linear-gradient）の使い方を総まとめ！

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

BootstrapVueのダサいイメージコンポーネントをクールなデザインにカスタマイズしてみた

スクリーンショット 2020-05-29 16.25.36.png

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください

main.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

BootstrapVueのダサいイメージをクールなデザインにカスタマイズ

すでに上の方で確認してもらったかと思いますが、

BootstrapVueの非常にダサいImageコンポーネントをスタイル修正を行うことでクールなデザインに編集していきましょう
スクリーンショット 2020-05-29 16.13.19.png

デフォルトの上の画像をhoverしたら下の画像のように色がつくようにカスタマイズしていきます
スクリーンショット 2020-05-29 16.13.11.png

この感じなかなかクールですよね

では早速コードをコピペしていきましょう

<template>
  <div>
    <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>
  </div>
</template>

<style>
img {
  margin-right: 10px;
  margin-bottom: 30px;
  display: inline-block;
  width: 500px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 200ms ease-in;
  filter: grayscale(1) opacity(.8);
}

img:hover {
  filter: grayscale(0) opacity(1);
}
</style>

これだけです

いかがでしたでしょうか？ちゃんと同じようなデザインになりましたか？

今回も超簡単にカスタマイズできましたね

以上です

参考記事(より応用的な実装が希望の方)

【Vueデザイン/コピペだけ】白黒画像一覧でhoverすると色がつくCSSアニメーション実装を徹底解説
スクリーンショット 2020-05-29 16.25.36.png

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

HTML&CSS~Flexbox編~

プログラミングの勉強日記

2020年5月29日　Progate Lv.64

Flexbox

　CSSを使ったレイアウト方法の1つである

display:flex;

　指定した要素の子要素を横並びにする
flexbox1.png

HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
}

flex:auto;

　指定した要素の幅を親要素に合わせて伸縮できる
flexbox2.png

HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
}
.list li{
  flex:auto;
}

flex-wrap:wrap;

　子要素のサイズに応じて繰り返す。繰り返したい要素の親要素に指定する。折り返したい要素自身には列数に応じたwidthを指定する。
flexbox3.png

HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  display:flex;
  flex-wrap:wrap;
}
.list li{
  flex:auto;
  width:50%; /*2列に折り返したい場合は50%と指定する*/
}

flex-direction:column

　子要素を上から下へ並べる。縦に並べたい要素の親要素に指定する。（下記の例では中央寄せに配置している）
flexbox4.png

HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->

.list{
  flex-direction:column;
}
.list li{
  margin:0 auto;
  width:50%; 
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-29T17:31:21+09:00

静的HTMLページに問い合わせフォームを導入する

いろんなサービスがありますが、Responsive Mailformを使用します
FIRSTSTEPさんありがとう

こちらのページからダウンロードしましょう

選んだ理由

  • HTMLに組み込める
  • ページ移動なしチェック
  • 入力必須項目設定可能
  • ふりがな自動入力
  • 郵便番号自動入力
  • CSSでデザイン変更
  • 著作権表示不要
  • カスタマイズ自由
  • レスポンシブ

要するにHTMLとCSSの知識で導入できるというとてもありがたいもの(笑)

必要な条件

PHPが作動するサーバー

手順

  1. 展開したダウンロードファイルをサーバーにすべてアップする
  2. php\config.php内の$rm_send_address[]の値に受け取るメールアドレスを入力
  3. htmlファイルを開いていらない項目削除
  4. 必須項目にはクラス名に【required】追加
  5. 問い合わせフォームへ飛ばしたい元ページにaタグを設定

まとめ

デザインもいま風なのでそのままでも十分使いやすいです
カスタマイズもOKとのことなのでCSSわかるなら変更できます

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

初心者に捧げる〜PHPを使って九九の表を作ろう〜

目次

・対象読者
・完成イメージ
・コードの記述・解説
・補足
・まとめ

対象読者

・progateやドットインストールでPHPを学習したばかりの方
・PHPの基礎の基礎を覚えた方
・PHPで何を作るか決まってない方

完成イメージ

スクリーンショット 2020-05-29 15.58.34.png
〜チェックポイント〜

・周りの1~9は目立つようにする
・偶数にだけ色をつける(今回はifを使います)
・tableタグなどを使い、表のようにする

コードの記述・解説(HTMLとPHP)

index.php
<h1>九九の表(今回はforを使います)</h1>
    <table>
        <tr>
            <!-- &nbsp;は半角スペースの文字実体参照(ただのスペースではhtmlは無として扱うから) -->
            <th>&nbsp;</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>

            <?php
                for($i = 1;$i <= 9;$i++){
                    echo '<tr>';
                    // $iに格納した数字を表の見出しとして出力する
                    echo '<th>' . $i . '</th>';

                    // $iが1の時に$jは1~9全て掛けて<td>として出力(以下$iが9になるまで行う)
                    for($j = 1;$j <= 9;$j++) {
                        $result = $i * $j;
                        // 偶数の時だけbackgroundをつけて見やすくします
                        if($result % 2 === 0) {
                           echo '<td class="even">' . $result . '</td>';
                        }
                        // 奇数はそのまま表示(elseはだと見辛くなるのであえて使わない)
                        if($result % 2 === 1) {
                            echo '<td>' . $result . '</td>';
                        }


                    }

                    // "\n"は改行のエスケープ文字(9まで計算したら改行する)
                    echo '</tr>'  . "\n";
                }
            ?>
        </tr>
    </table>

コードの記述・解説(CSS)

table {
    /* 隣接するセルのボーダーを重ねて表示する */
    border-collapse: collapse;
}
th, td {
  width: 100px;
  border: 1px solid limegreen;

}
th {
  background: aquamarine;
}
td {
  text-align: center;
}
.even {
    background-color: aqua;
}

補足(コード内に書くと長くなるコメント)

<!--
    printでも表示できるよ？
    A.  echo と print の最も大きなちがいは式（ expression ）かどうか 
    PHP の仕様として「 echo は式ではなくて、 print は式である 」
    ※echo にできて print にはできないことがあります。 それは「複数の引数を受け取ること」です。 
    ・echo は文（ statement ）。他の式や文の一部として使うことができない。戻り値を持たない。
    ・print は式（ expression ）。他の式や文の一部として使うことができる。戻り値を持っていて、それはいつも 1 。
    今回はどちらでもOKなのでprogateで使っているechoにしました。

    "\n"は必ずダブルクオーテーションで囲む
    なぜならシングルクオーテーションで囲むとただの文字列として出力されるから

    <tr></tr>:表でつくられる横一列のデータ（行）をまとめる。
    <th></th>:セルの要素であり、表の見出しを意味します。
    <td></td>:セルの要素であり、表の値(データ)を意味します。

-->

まとめ

自分はPHPを学習してまだ2日なので早速アウトプットしようと思い、記事を作成させていただきました！
コードなどに間違いがあれば是非お教えください?‍♂️
この記事を見たあなたの成長を応援します！！

~この記事も一緒にどうですか？~
・初心者に捧げるハンバーガーメニューの作り方
・初心者に捧げるヘッダーの作り方
・Vue.jsで作る！自動保存するToDoリスト~その１~

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

最高のカラースキーム 【Open Color】

この内容について

この内容は、Open Colorの紹介と日本語訳です。

Open Colorとは

OpenColor.png
Open Colorはオープンソースの最適化されたカラースキームで、
ここにある色を選ぶことで見やすい配色をすることができます。
Open Color

使い方・導入

サイトにアクセスして色を使いたい色を選び使うだけでも良いですが、npmが提供されています。

ターミナル
npm install open-color

Sass(SCSS)で使う場合

Sass(SCSS)
@import 'path/open-color';
p{
  color: $oc-gray-7;
}
a{
  color: $oc-indigo-8;
}

CSSで使う場合

CSS
@import 'path/open-color.css';
p{
  color: var(--oc-gray-7);
}
a{
  color: var(--oc-indigo-8);
}

色一覧

下記に記載のものは、Open Colorのサイトと同じです。

グレー系 (Gray)

gray-0：#f8f9fa gray-1：#f1f3f5 gray-2：#e9ecef gray-3：#dee2e6
gray-4：#ced4da gray-5：#adb5bd gray-6：#868e96
gray-7：#495057 gray-8：#343a40 gray-9：#212529

赤系 (Red)

red-0：#fff5f5 red-1：#ffe3e3 red-2：#ffc9c9 red-3：#ffa8a8
red-4：#ff8787 red-5：#ff6b6b red-6：#fa5252
red-7：#f03e3e red-8：#e03131 red-9：#c92a2a

ピンク系 (Pink)

pink-0：#fff0f6 pink-1：#ffdeeb pink-2：#fcc2d7 pink-3：#faa2c1
pink-4：#f783ac pink-5：#f06595 pink-6：#e64980
pink-7：#d6336c pink-8：#c2255c pink-9：#a61e4d

ブドウ系 (Grape)

grape-0：#f8f0fc grape-1：#f3d9fa grape-2：#eebefa grape-3：#e599f7
grape-4：#da77f2 grape-5：#cc5de8 grape-6：#be4bdb
grape-7：#ae3ec9 grape-8：#9c36b5 grape-9：#862e9c

紫系 (Violet)

violet-0：#f3f0ff violet-1：#e5dbff violet-2：#d0bfff violet-3：#b197fc
violet-4：#9775fa violet-5：#845ef7 violet-6：#7950f2
violet-7：#7048e8 violet-8：#6741d9 violet-9：#5f3dc4

藍色系 (Indigo)

indigo-0：#edf2ff indigo-1：#dbe4ff indigo-2：#bac8ff indigo-3：#91a7ff
indigo-4：#748ffc indigo-5：#5c7cfa indigo-6：#4c6ef5
indigo-7：#4263eb indigo-8：#3b5bdb indigo-9：#364fc7

青系 (Blue)

blue-0：#e7f5ff blue-1：#d0ebff blue-2：#a5d8ff blue-3：#74c0fc
blue-4：#4dabf7 blue-5：#339af0 blue-6：#228be6
blue-7：#1c7ed6 blue-8：#1971c2 blue-9：#1864ab

シアン系 (Cyan)

cyan-0：#e3fafc cyan-1：#c5f6fa cyan-2：#99e9f2 cyan-3：#66d9e8
cyan-4：#3bc9db cyan-5：#22b8cf cyan-6：#15aabf
cyan-7：#1098ad cyan-8：#0c8599 cyan-9：#0b7285

青緑系 (Teal)

teal-0：#e6fcf5 teal-1：#c3fae8 teal-2：#96f2d7 teal-3：#63e6be
teal-4：#38d9a9 teal-5：#20c997 teal-6：#12b886
teal-7：#0ca678 teal-8：#099268 teal-9：#087f5b

緑系 (Green)

green-0：#ebfbee green-1：#d3f9d8 green-2：#b2f2bb green-3：#8ce99a
green-4：#69db7c green-5：#51cf66 green-6：#40c057
green-7：#37b24d green-8：#2f9e44 green-9：#2b8a3e

黄緑系 (Lime)

lime-0：#f4fce3 lime-1：#e9fac8 lime-2：#d8f5a2 lime-3：#c0eb75
lime-4：#a9e34b lime-5：#94d82d lime-6：#82c91e
lime-7：#74b816 lime-8：#66a80f lime-9：#5c940d

黄色系 (Yellow)

yellow-0：#fff9db yellow-1：#fff3bf yellow-2：#ffec99 yellow-3：#ffe066
yellow-4：#ffd43b yellow-5：#fcc419 yellow-6：#fab005
yellow-7：#f59f00 yellow-8：#f08c00 yellow-9：#e67700

オレンジ系 (Orange)

orange-0：#fff4e6 orange-1：#ffe8cc orange-2：#ffd8a8 orange-3：#ffc078
orange-4：#ffa94d orange-5：#ff922b orange-6：#fd7e14
orange-7：#f76707 orange-8：#e8590c orange-9：#d9480f

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

【Material-UI】TextFieldコンポーネントのdisabledスタイルをカスタマイズする方法

はじめに

フレームワークやライブラリを利用して開発を行うと、やはり少なからず、カスタマイズする必要が出てくることがあります。
今回は、「React」 × 「UIフレームワークのMaterial-UI」を使って開発する際にちょっと手こずったポイントがありましたので紹介です。

対象のコンポーネント 【TextField】

インプットフィールドや、セレクトボックスなど、HTMLタグの<input>として活用できます。

Material-UIについて

Material-UIはもともとあらゆるAPIが用意されており、カスタマイズ性も結構担保されており使いやすい印象です。
しかし、今回紹介するTextFieldコンポーネントで入力させたくないdisabledのUIを変更したい際に問題が出てきました。

基本的なカスタマイズ

基本的に用意されているカスタマイズ方法として、公式ドキュメントをベースにButtonコンポーネントのカスタマイズを行った際のソースコードが以下です。

import React from "react";
import Button from "@material-ui/core/Button";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

const styles = makeStyles(theme => ({
  rootBtn: { // Buttonクラスのrootクラス
    marginRight: "1em",
    backgroundColor: "#ff8800",
    "&:disabled": {
      color: "#bababa",
      backgroundColor: "#dadada"
    }
  }
}));

export default function App() {
  const classes = styles();

  return (
    <div className="App">
      <h1>ボタンの例</h1>
      <div>
        <Button className={classes.rootBtn}>Button</Button>
        <FormLabel>通常デザイン</FormLabel>
      </div>
      <div>
        <Button className={classes.rootBtn} disabled>
          Button
        </Button>
        <FormLabel>disabledデザイン</FormLabel>
      </div>
    </div>
  );
}

Image from Gyazo

上が機能するデザインで、下がdisabledにした場合になります。
公式ドキュメントにあるように、disabledAPIがtrueの場合、rootに対して擬似クラスを宣言するように指示されています。

Pseudo-class applied to the root element if disabled={true}.
参照：公式ドキュメントより

今回、rootクラスにrootBtnを指定して、その擬似クラスにdisabledのスタイルを定義しています。
有効になるトリガーは、disabledのAPIがtrueの場合になるため、下のボタンの時のみこのスタイルが有効になっています。

このように、APIにCSSクラスに用意されたものがあり、簡単にスタイルを環境に合わせてカスタマイズすることができるのは大きな魅力です。

TextFieldでのカスタマイズ

上記のButtonコンポーネントの感じで作っていたら失敗しました。
全然スタイルが効かない。仕方なく、ドキュメントを眺めていても一向に解決方法は見当たりませんでした。

そこで、構造を見にいくと、TextFieldコンポーネントは、いくつかのコンポーネントが合わさって構成されているようでした。

<!-- inputタグラップされて形成されている -->
<div class="TextField">
  <input class="input-base">
  ...
  </>
</>

disabledのスタイルは<input>で定義されているようだったので、どうにかここを上書きする方法が必要でした。

ローカルルールを参照させる $ruleName

こんな書き方があったなんて知らなかった。

const styles = {
  root: {
    '&$disabled': {
      color: 'white',
    },
  },
  disabled: {},
};

これを参考にスタイルするとうまくスタイルが効きました。
ソースは以下です。

import React from "react";
import TextField from "@material-ui/core/TextField";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

const styles = makeStyles(theme => ({
  rootTxt: {
    marginRight: "1em",
    "&$disabled": {
      color: "#bababa",
      backgroundColor: "#dadada"
    }
  },
  disabled: {}
}));

export default function App() {
  const classes = styles();

  return (
    <div className="App">
      <h1>テキストフィールドの例</h1>
      <div>
        <TextField
          InputProps={{
            classes: {
              root: classes.rootTxt,
              disabled: classes.disabled
            }
          }}
          defaultValue="TextField"
        />
        <FormLabel>通常デザイン</FormLabel>
      </div>
      <br />
      <div>
        <TextField
          InputProps={{
            classes: {
              root: classes.rootTxt,
              disabled: classes.disabled
            }
          }}
          defaultValue="TextField"
          disabled
        />
        <FormLabel>disabledデザイン</FormLabel>
      </div>
    </div>
  );
}

Image from Gyazo

さいごに

今回取り上げたのは、TextFieldコンポーネントですが、他にもコンポーネントを掛け合わせた形で表現されているコンポーネントはたくさんあります。
そういったコンポーネントもおそらくこの書き方が必要になってきそうですね。

前提として知っているのと知っていないので、使い方や設計が大きく変わってきそうだなと感じながら今回はなんとか解決することができました！

紹介した内容のSnadbox

Edit Material-UI_TextField

P.S

気がついた頃にはこんなこと書いてた！

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

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

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

100日チャレンジの329日目

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

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

日付別

タグ一覧