概要

QiitaのLGTMをまた懲りずにSUSHIにしました。

LGTMボタンの他、トレンドやマイページ、コメントなどに表示されるLGTM、文字列中のLGTMまで記事やコメント以外のありとあらゆるLGTMをSUSHIで置き換えます。

Stylusなどで利用できるユーザースタイルシートとして実装しており、以下のリンクからインストール可能です。

きっかけ

2020年3月にQiitaの「いいね」が「LGTM」に変わった際に、その話題でいくつかの記事が出ていたことを覚えておられる方はいるでしょうか。

私もそのうちの一つ、QiitaのLGTMをSushiにするユーザースクリプトという記事を書いたのですが、この記事で作ったユーザースクリプトの維持にあたって問題が起きるようになってきました。

Qiitaはそのアップデートに伴って、各ページの構成、要素に付与されるclass属性、遅延読み込みのタイミングなどを徐々に変えてきています。

「徐々に」というのが私にとって困ったところです。
元々人様のサイトの仕様変更に便乗して作ったネタユーザースクリプトですから、アップデートで全く動かなくなった、ということになればもういいかなと思えます。

しかし実際には少しずつ、今までSushiだったものがLGTMになっていくのです。
したがって画面ではSushiとLGTMが中途半端に混ざりあい、さながらチラシ寿司の様相を呈してしまいます。

酢飯の中に他の具材を混ぜることで独特の食感を生んでいるチラシ寿司。関東では五目寿司と言うらしいですね。
それもそれで美味しくて私は好きですが、統一感が重要なWebページにおいてはなんとなく雑然とした印象を帯びてしまいます。
そこで今までは気が向いたときにDocument.querySelector()で指定するセレクタを新しいものに変えたり、遅延読み込みを待ってLGTMアイコンをSushiに変えるなどしてアップデートへの追従を図っていました。

しかしながらQiitaが「遅延読み込みの終了後にLGTMアイコンを付与」みたいなより高度な実装に移行していくにつれ、こちらの実装は「遅延読み込みの後のアイコン付与の後の◯◯を待ってアイコンを置き換え…」という感じでさらに複雑になっていきます。
さらにQiitaはCSSフレームワーク的なもの(たぶんemotionみたいなやつ)の積極的な使用を進めているようで、今までのuserPopularItems_likeUnitのような意味的なクラス属性は徐々に排除されcss-61ricnのような自動付与らしきクラス名だけが存在するようになってきました。

こうなればアップデートへの追従は極めて困難です。
ユーザースクリプトはQiita側のフロントエンドフレームワーク(React)と同じJavaScriptという土俵で動かざるを得ませんが、どうもそのこと自体に無理が生じているように思えます。

ただ前の記事でも少し触れましたが、思えば偉大なる元ネタの人はユーザースクリプトではなくユーザースタイルシート、すなわちJavaScriptではなくCSSで実装していました。

Webページの各要素がどう表示されるかを司っているのはCSSですから、これを使えばQiitaの処理に関係なく最終的なLGTMの表示をSushiで置き換えることができるはずです。そのようにユーザースタイルシートで実装できないでしょうか？

実装

このユーザースタイルシートに必要な実装は大きく分けて2つです。

• 文字列として記されるLGTMをSUSHIという文字列で置換する
• アイコンとして示されるLGTMをSUSHIのアイコンで置換する

文字列の置換

SUSHI用フォントの作成

CSSに触れたことのある人なら知っての通り、CSSで文字列を置き換えることはできません。

もちろんcontentプロパティで要素全体を置き換えることならできますが、例えばユーザーページにある「LGTMした記事」という文字列の「LGTM」の部分だけを置き換えるようなことはできません。

「LGTMした記事」「LGTMした投稿」「◯◯さんがあなたの記事◯◯にLGTMしました」…要素全体を置き換えるしかないとすれば、LGTMという文字列が含まれる要素の全パターンを網羅しなければなりません。現実的に実装は不可能でしょう。

そこでこうします。

LGTMをSUSHIに置き換える専用のフォントを作りましょう。

OTFフォーマットのフォントには、このような用途で使えそうな機能が2つあります。

1. 文脈連鎖依存の置換 … あるパターンの文字列を別の文字列に置き換える機能
2. 合字 … 複数の文字列を1つの記号で置き換える機能

普通に考えれば1で良さそうですが、FontForgeのチュートリアルによればこの機能はラテン文字では使えないようです。
そこで2の機能を使いましょう。「SUSHI」を1文字の記号として定義し、｢L｣｢G｣｢T｣｢M｣という文字列を置き換える合字(Ligature)とするのです。

フォントはGlyphr Studioというオープンソースのフォントエディタで作成しました。

このフォントは｢L｣｢G｣｢T｣｢M｣を「SUSHI」で置き換えるためだけにあるものなので「SUSHI」以外の文字は使わないのですが、置換前の文字列がフォントに含まれなければそもそも置換処理も走りませんので、M+FONTSのMPLUS1p-Regularを元にアルファベットの｢A｣から｢Z｣だけ抜き出し、合字として「SUSHI」を加えたフォントを作ることにします。

「SUSHI」は置き換え元の｢L｣｢G｣｢T｣｢M｣と横幅を揃えたほうが良いと思い、かなりキツめに字詰めしました。

そうしてフォントは完成したので、Webフォントの形式であるwoff2に圧縮の上Githubで公開しました。

次にこのフォントを適用するCSSを書きましょう。

SUSHI用フォントの適用

@font-face規則で今回作ったフォント(Sushinize M PLUS 1p)を定義の上、記事のタイトル・内容や投稿フォーム・プレビュー、コメントなどSUSHIにするのが適切ではないと思われる部分以外全てに適用しましょう。

ページ全体への適用ですから、body要素にフォントを指定、それ以外の要素ではunsetにしておいてフォント指定の上書きを防ぐのが良さそうです。

実装は次のようになりました。

    @font-face {
        font-family: "Sushinize M PLUS 1p";
        font-style: normal;
        font-weight: 400;
        src: url("https://cdn.jsdelivr.net/gh/ia15076/sushinizemplus1p@latest/SushinizeMPLUS1p-Regular.woff2") format("woff2");
        unicode-range: U+004c, U+0047, U+0054, U+004D;
    }

    @font-face {
        font-family: "M PLUS 1p";
        font-style: normal;
        font-weight: 400;
        src: url("http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.woff") format("woff");
    }

    * {
        font-family: unset !important;
    }

    body {
        font-family: "Sushinize M PLUS 1p", "M PLUS 1p", "FontAwesome", -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif !important;
    }

    input,
    textarea,
    div.it-MdContent,
    a[href*="items"]:not([class*="notification"]),
    a[href*="private"]:not([class*="notification"]),
    *[class*="title"],
    *[class*="article"],
    *[class*="comment"],
    *[class*="draft"],
    *[id*="title"],
    *[id*="article"],
    *[id*="comment"],
    *[id*="draft"] {
        font-family: "FontAwesome", -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif !important;
    }

↓

実際に適用してみたところ、きちんと置き換えられているようです。

アイコンの置換

LGTMアイコンの削除

次にLGTMのアイコンをSUSHIのアイコンで置換します。まずは既存のアイコンを削除しましょう。

アイコン削除にあたって、本当はLGTMアイコンのpath要素にスタイルを適用する形で実装を行いたかったのですが、後にアイコンを置換するときにそれだと難しい(path要素に背景画像などは指定できない)ために諦めました。
path要素のoutline-widthをすっごく太くして要素全体が塗りつぶされたように見せかけてからmask-imageで抜けないかとかフォント作成より時間をかけて色々考えたんですが残念です。

とはいえ出来なかったものは仕方ないので、pathの親要素であるsvgにスタイルを適用しましょう。LGTMのsvg要素を特定する手段がviewBox属性の大きさしかないのが少し不安ですが、偶然他のアイコンが同じ大きさになることはないと信じます。

実装としてはfill-opacityを0にする、つまり塗る色を透明にすることでアイコンを削除したように見せかけています。

    svg[viewBox="0 0 392.81 429"],
    svg[viewBox="0 0 271.61 199.3"],
    svg[viewBox="0 0 564.81 145.68"],
    svg[viewBox="0 0 640.75 145.68"] {
        fill-opacity: 0;
    }

LGTMアイコンは様々な箇所にありますがパターンとしては上で指定した4つで全てのようです。記事のLGTMアイコンをはじめ、コメントやトップページやマイルストーンページなど見渡す限り全てのLGTMアイコンを削除することが出来ました。

SUSHIアイコンの追加

削除したLGTMのアイコンがあったところにbackground-imageとしてSUSHIのアイコンを配置します。
今回もOpenSushiを利用しました。

また前回記事へのコメントをきっかけに実装していた、クリックした際にSUSHIが回転する機能もここで再び実装してみます。

    @keyframes sushi-go-round {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    svg[viewBox="0 0 392.81 429"],
    svg[viewBox="0 0 271.61 199.3"],
    svg[viewBox="0 0 564.81 145.68"],
    svg[viewBox="0 0 640.75 145.68"] {
        fill-opacity: 0;
        background-image: url("https://cdn.jsdelivr.net/gh/rdrgn/opensushi@latest/assets/png-256/tuna.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    svg[viewBox="0 0 271.61 199.3"],
    svg[viewBox="0 0 640.75 145.68"] {
        animation: sushi-go-round 1s ease;
    }

これでLGTMをSUSHIで置き換えることができました！

最終的に出来上がったコード

ユーザースタイルシートとして必要なメタタグの追加などを行い、最終的なコードは次のようになりました。

Githubでも公開中です。

/* ==UserStyle==
@name           Qiita Sushi
@namespace      github.com/ia15076
@version        0.0.1
@license        MIT
@homepageURL    https://github.com/ia15076/qiita-sushi-css
@supportURL     https://github.com/ia15076/qiita-sushi-css/issues
@updateURL      https://github.com/ia15076/qiita-sushi-css/raw/master/qiita-sushi-css.user.css
==/UserStyle== */

@-moz-document domain("qiita.com") {
    @font-face {
        font-family: "Sushinize M PLUS 1p";
        font-style: normal;
        font-weight: 400;
        src: url("https://cdn.jsdelivr.net/gh/ia15076/sushinizemplus1p@latest/SushinizeMPLUS1p-Regular.woff2") format("woff2");
        unicode-range: U+004c, U+0047, U+0054, U+004D;
    }

    @font-face {
        font-family: "M PLUS 1p";
        font-style: normal;
        font-weight: 400;
        src: url("http://mplus-webfonts.sourceforge.jp/mplus-1p-regular.woff") format("woff");
    }

    @keyframes sushi-go-round {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    * {
        font-family: unset !important;
    }

    body {
        font-family: "Sushinize M PLUS 1p", "M PLUS 1p", "FontAwesome", -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif !important;
    }

    input,
    textarea,
    div.it-MdContent,
    a[href*="items"]:not([class*="notification"]),
    a[href*="private"]:not([class*="notification"]),
    *[class*="title"],
    *[class*="article"],
    *[class*="comment"],
    *[class*="draft"],
    *[id*="title"],
    *[id*="article"],
    *[id*="comment"],
    *[id*="draft"] {
        font-family: "FontAwesome", -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif !important;
    }

    svg[viewBox="0 0 392.81 429"],
    svg[viewBox="0 0 271.61 199.3"],
    svg[viewBox="0 0 564.81 145.68"],
    svg[viewBox="0 0 640.75 145.68"] {
        fill-opacity: 0;
        background-image: url("https://cdn.jsdelivr.net/gh/rdrgn/opensushi@latest/assets/png-256/tuna.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    svg[viewBox="0 0 271.61 199.3"],
    svg[viewBox="0 0 640.75 145.68"] {
        animation: sushi-go-round 1s ease;
    }
}

スクリーンショット

参考

• CSS値の「initial」「inherit」「unset」「revert」の違い - Qiita
• GitHubで公開中のjQueryプラグインをCDNで配信するためにjsDelivrへ登録した - すたらブログ

◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

わたしも同様に初学者です。内容の正確性を保証することはできません。
訂正やより良い情報があればご教授お願いします。

✔この記事で解決できること

• 講義内容と課題の中でわからないことが解決できるかもしれない。
• 調べる時間を短縮できるかもしれない。
• 学習の仕方を効率化できるかもしれない。

---

DAY6 ゼロから作る ②

✔ button タグはインラインブロック

違い	ブロック	インライン	インラインブロック
改行	要素の前後	入らない	入らない
幅、高さ	指定できる	指定できない	指定できる
margin	上下左右	左右のみ	上下左右
タグ	div,h1,p,ul	a,span,input	button

私は、インラインブロックが何かはわかりましたが、
どう使い分けるのか未だにわかっていません。
しかし、コードを読むために今のうちに特徴はを覚えた方が良いと思います。

参考サイト
https://www.itra.co.jp/webmedia/what-is-inline-block.html

✔ Flexbox

今後必ず使いますので、
可能な限り慣れたほうが良いです。

私は、いざ使う時にどの要素に
display: flex
を記述するのかわからなくなりました。

下記にとても良い練習サイトがあります。

練習サイト
https://flexboxfroggy.com/#ja

参考サイト
https://www.ameamelog.com/css-flex-header/

DAY7 ゼロから作る③

✔ レスポンシブ

max-width = 以下
min-width = 以上
iPadの表示幅は768px

モバイルファーストという記述方法が一般的だそうです。
教材では、PCの表示を作ってからモバイル向けに作っていますが、
まず、モバイル向けに作ってからPC向けに作ることを言うそうです。

メリットは、スマートフォンで見られる可能性がとても高いということ。
そして、スマートフォンで見る場合にPC用の不要なデータまで通信することで、
表示が重くなってしまう可能性があるということです。

個人的なメリットですが、
レスポンシブの記述をする時にどうしても尻込みしていたのが、
軽減されたと思います。

私は、復習する際にモバイル向けに作ってから、
教材のようにPC向けに作るようにしました。

どうも7noteです。ちょっとした小技を紹介。

ファイルを表示したり、ダウンロードする時にそのファイルがどんなファイルなのかがアイコンがついて一目で分かれば見やすいサイトですよね。
たくさんファイルがあるサイトを作るときに1つ1つclass名を付けたり、アイコン画像を用意してリンク先を1つ1つ変える必要がありますが、この手間をなくします。

ファイルのリンク先の拡張子を読み取って、自動でアイコンを変える方法があります。

CSSでファイルのリンク先の拡張子を絞り込み

CSSの属性セレクタを使います。属性セレクタで[href*=".hogehoge"]とすることで.pdfがファイル名に含まれるものにのみCSSを当てることができます。
アイコンにはフォントオーサムを使います。

pdfファイルの例

index.html

<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサムを読み込み。 -->
</head>

<a href="./abc.pdf">ABCファイル（PDF）</a>

a[href*=".pdf"]::after {
  content: "\f1c1";
  font-family: "Font Awesome 5 Free";
  color: #F30401;
}

結果

*（アスタリスク）を付けることで、「含まれるかどうか」という条件判定になります。

pdf以外の場合であれば、以下の通りで対応することができます。

wordやエクセルはバージョンによって拡張子が違うので注意が必要。

ワード

index.html

<a href="./abc.doc">ABCファイル（ワード）</a>

a[href*=".doc"]::after,
a[href*=".docx"]::after {
  content: "\f1c2";
  font-family: "Font Awesome 5 Free";
  color: #0061C2;
}

エクセル

index.html

<a href="./abc.xls">ABCファイル（エクセル）</a>

a[href*=".xls"]::after,
a[href*=".xlsx"]::after {
  content: "\f1c3";
  font-family: "Font Awesome 5 Free";
  color: #1F6F43;
}

まとめ

クラス名付ける方が誤作動は少ないかもしれないですが、99%この方法で大丈夫だと思います。
ファイル名やディレクトリ名に.pdfとか.docがはいってしまうと誤作動してしまいますが。

属性セレクタを指定するときに「.」（ピリオド）を入れていないと、ファイル名にたまたまpdfという文字がはいっていても反応してしまうので、必ず「.」（ピリオド）も入れることをおすすめします。

・他のアイコンをお探しの方はこちら

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します！

Flexboxで縦並びかつ左右中央にする

要素を縦並びかつ左右中央揃えにしたいな〜
「よし！Flexboxを使おう！」

ということで、
要素を縦並びにするのは　flex-direction: column
要素を左右中央揃えにするには　justify-content: center

HTMLはこんな感じ

index.html

<main>
    <div class="main-box">
      <h1>タイトル</h1>
      <p>pタグです</p>
    </div>
  </main>

早速やってみる！

style.css

.main-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

あれ？あれれ？
左右中央にならない...

なぜ左右が中央にならないのか

ググってみたら発見した！

参照:https://baqamore.hatenablog.com/entry/2018/02/14/220836

この記事を書いた人曰く、縦並びにするということは、

こういうことだそうだ！

解決方法

ということは左右を中央に寄せたいならば、
justify-content: centerをalign-items:centerに変えれば......

style.css

.main-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

できた！！

空のセルに対して、斜線を引く

例えば下記のような表があって、水曜日のセルに斜線を入れたい時。
（初心者のため表のイメージの貼り付けができなくてごめんなさいね）

一番下の水曜日のセルには何も書かない。空にしてある。

index.html

<table border="1">
            <tr>
              <th>診療時間</th>
              <td>月</td>
              <td>火</td>
              <td>水</td>
            </tr>
            <tr>
              <th>9:00~15:00</th>
              <td>●</td>
              <td>●</td>
              <td></td>
            </tr>
          </table>

CSSで空のセルに対して。

style.css

/* 空のセルに斜線を引く 透明ー黒黒ー透明 */
table td:empty {
  background-image: linear-gradient(to top left,
  transparent, transparent 49%,
     black 49%,
     black 51%,   /* 線の太さ */
    transparent 51%, transparent);
}

解説

・table td:empty：空のセルに対して。
・グラデーションlinear-gradientを利用します。
グラデーションの仕組みは、なんとなくの理解だけど、
「透明〜黒〜黒〜透明の順番でグラデーションしろ。」ってイメージでいいかと。
→→ちょうど中間で黒い線が引かれる。＝斜線　
線の太さは％を変更すれば良い。（ちなみにこれは最小）
47%〜53%とかいい感じじゃないかな。

★この時に、to top left,て指定しているのがポイント。
「（右下から）左上に向かってグラデーション」となるので、右上りの斜線になる。

逆に右下がりの斜線ならrightに変更すれば良い。

他のやり方だと４５度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。

参考リンク

CSSで斜線を引く方法

課題

まず１枚目と2枚目を比べてみる。

1枚目はデフォルトのinputタグで上の方にshadowみたいな彫りの深さが出ているバージョン
2枚目はそのiosのデフォルトの仕様に対してcssで彫りの深さを消したバージョン

解決法

inputタグのcssに appearance: none; -webkit-appearance:none; を追加する

css

input {
  appearance: none;
  -webkit-appearance:none;
}

キャメルケース

companyIdやblogCategoryのように2語３語と単語同士をつづけた書く書き方。

• 先頭の単語が小文字

  • 関数名は先頭小文字。例：createBlogCategory()
  • 変数名(引数名)は先頭小文字。例：companyId

• 先頭の単語が大文字をパスカルケースまたはアッパーキャメルケースと呼ぶ

  • class名は先頭大文字。例：BlogCategory

スネークケース

company_idやblog_catefgoryのように2語３語と単語同士をアンダーバーで挟んでつなげる書き方。

• 定数はすべて大文字。例:BLOG_CATEGORY
• データベースなどで使われます。

ケバブケース

company-idやblog-catefgoryのように2語３語と単語同士をハイフンで挟んでつなげる書き方。

• HTMLのclass名で使われます。

Bulmaをカスタマイズしてビルドする

私は、Bulmaのシステム自体は好きなのですが、角が丸すぎる点が気に入りません。

幸い、Bulmaは、ユーザーがかんたんにカスタマイズできるよう設計されていますので、
角丸を小さくした、カスタムBulmaのCSSファイルを作っていきます。

①Bulmaのダウンロード

Bulmaのダウンロード方法１・zipでダウンロード（おすすめ）

git clone はドキュメントなどついてくるので、コンパイルするだけなら公式のzipがおすすめです。

Tags · jgthms/bulma
https://github.com/jgthms/bulma/tags

から好きなバージョンを選んでダウンロード＆展開します。

Bulmaのダウンロード方法２・git clone

ドキュメントなどついてくるのでおすすめしません。

#全部クローン（重い）
git clone https://github.com/jgthms/bulma.git
cd bulma
git checkout -b my0.9.1 refs/tags/0.9.1
#or
#特定のバージョンのみクローン（軽い）
git clone https://github.com/jgthms/bulma.git -b 0.9.1 --depth 1
cd bulma

②npm install で開発に必要なモジュールをインストール

npm install

③Bulmaをカスタム

bulma.sassを開き、Bulmaをカスタムしていきます。
※bulma-rtl.sassは、右から左に表示する言語用(RTL:Right To Left)

↓ここにカスタムできるsass変数の一覧があります。これを参考に編集していきます。
With node-sass | Bulma: Free, open source, and modern CSS framework based on Flexbox
https://bulma.io/documentation/customize/variables/

今回は、Bulmaの角丸を修正したいため、radiusがらみの変数をカスタマイズしてみました。

myBulma.sass

@charset "utf-8"

// 追記 ///////////////////////////
$radius-small:      1px;
$radius:            2px;
$radius-large:      3px;
///////////////////////////////////

/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/form/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/helpers/_all"
@import "sass/layout/_all"

④Bulmaをビルド

#ビルドしたcssを出力する./cssフォルダに、もともとのBulmaが入っているので削除
npm run clean
#ビルド
npm run build
# RTLバージョンをコンパイルしたい人は以下も実行
# npm run rtl

成功していれば、bulma.css、bulma.css.map、bulma.min.cssの３つのファイルが生成されます。

このbulma.cssもしくはbulma.min.cssをサイトに読み込めば、カスタマイズしたBulmaをサイトに適応できます。

意図したとおりに変更されているか確認

ルートに以下の簡単なhtmlファイルを作り、動作を確認してみます。

test.html

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bulma.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"> -->
  </head>
  <body>
    <div>
      <div class="column">
        <a class="button is-primary">Button</a>
      </div>
  </body>
</html>

Before:

After:

Material Designのようなスッキリしたボタンになりました。
色なども変更できますので、いろいろ試してオリジナリティのあるサイトを作る助けになればと思います。

Next.jsでClassless CSS

Next.jsでClassless CSSを適用する機会があったので記しておきます。

Classless CSSとは

class属性（やid属性）をセレクタで使用してスタイルを適用するのがCSSの基本ですが、
Classless CSSはclass属性を使用せずhtmlのタグを使用するだけでスタイルを適用することができるCSSのフレームワークです。

種類もかなり豊富です。
https://github.com/dbohdan/classless-css

Classless CSSのいいところは手軽に使うことができる点です。
htmlのタグを書くだけなのでクラス名やコンポーネントの使い方を覚える必要がありません。

以下、new.cssの例ですがタグに直接スタイルが適用されています。

さっそく次から使ってみます。

①　グローバルに適用

まずはyarnで持ってきます。

yarn add @exampledev/new.css

Next.jsでページ全体に適用させたい時はpages/_app.tsxに以下を記載します。

_app.tsx

import { AppProps } from 'next/app';
import '@exampledev/new.css';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

これでどのページのhtmlタグにもスタイルが適用されます。

_app.tsxについては以下が詳しいです。

• https://tyotto-good.com/blog/next-document-app
• https://www.kohei.dev/posts/7-tips-of-next-js-9-with-typescript?hl=ja-JP

②　個別ページに適用

個別のページだけに適用したい場合、そのままimportしようとしても以下のエラーが発生します。

Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).

グローバルに適用するCSSは_app.tsxで読み込めということらしいです。
適用するcssファイルをcssを配置するフォルダに持ってきて使う、とかで回避できそうですがその方法はちょっと微妙。

なので結局next/headの<Head>コンポーネントを使って<head>の中身を変更することでスタイルを適用させることができました。

sample.tsx

import Head from 'next/head';

const Sample = () => {
  return (
    <html>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css"
        />
      </Head>
      <body>
        <header>
          <h1>About</h1>
        </header>
        <div>
          <details>
            <summary>Sample</summary>
            <p>This is sample.</p>
          </details>
        </div>
      </body>
    </html>
  );
};

export default Sample;

まとめ

結局細かい調整したくなるので普通に.css作るかstyled-componentのようなCSS in JS使うケースが多くNext.jsでClasslessCSS使うケースってあまり多くないのかなと思いました。

ただ今回はたまたまNext.jsかつClassless CSS（の②のケース）で実装する必要があったのでちょっと悩みながら進めたのですが、もっと綺麗なやり方があれば教えていただきたいです。

簡単にプルダウンを作る方法

使用するディレクトリ(私の場合)⚠️命名はご自身で

• ビューファイル(new.html.erb)
• コントローラー(mentors.controller.rb)
• モデル(sukill_id.rb)

目指す完成形

まずビューファイルから(どこからでもいい)

1.こういうパターンや

new.html.erb

<select>
          <option>チャットするユーザーを選択してください</option>
          <option>ユーザー1</option>
          <option>ユーザー2</option>
        </select>

2.こういうパターンもある

new.html.erb

  <div class="mentors-detail">
   <div class="form">
     <div class="weight-bold-text">
       スキル
       <span class="indispensable">必須</span>
     </div>
     <%= f.collection_select(:skill_id, Skill.all, :id, :name, {}, {class:"select-box", id:"mentor-skill"}) %>
　　　</div>

今回は2のf.collection_selectを使用してプルダウンを作成します！

6行目で「:skill_id, Skill.all」となっていますがこれは選択したいプルダウンの内容は「skill_idモデル」から選ぶわけなので次はモデルの中身を書いていきます！

モデル作成

skill_id.rb

class Skill < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: 'HTML•CSS' },
    { id: 3, name: 'Ruby' },
    { id: 4, name: 'Javascript' },
    { id: 5, name: 'PHP' },
    { id: 6, name: 'Python' },
    { id: 7, name: 'SQL' },
    { id: 8, name: 'GO' },
  ]
end

あとはコントローラーにnewアクションやらcreateアクションを記述してルーティングやパスをrails routesで確認しながら記述すれば出来上がり！

まとめ

CSSの部分は省きましたが多分こんな感じ(ここはご自身でやってみてください)

new.css

.mentors-detail {
  display: flex;
  justify-content: space-between;
  padding: 2vh 0;
}

.mentors-detail>.form {
  width: 300px;
  padding: 2vh 0;
}

.select-box {
  margin: 2vh 0;
}

現場からは以上です！

「きれいに（かつ、ラクに）レイアウトしたいときはflexを覚えるといいよ。」と教わってまずはじめに覚えたやつです。

sass

.center
  display: flex
  justify-content: center

haml

.center
  = f.button :submit, '送信'