- 投稿日:2020-10-09T23:36:16+09:00
QiitaのLGTMをSUSHIにするユーザースタイルシート
概要
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つの記号で置き換える機能
普通に考えれば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; } }スクリーンショット
参考
- 投稿日:2020-10-09T23:10:21+09:00
【デイトラ】初級ノートDAY6~DAY7
◆悩んだとこ、後から気づいたとこをシェアしていきます。
デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。復習にあたって、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向けに作るようにしました。
- 投稿日:2020-10-09T22:10:45+09:00
リンク先がpdfやwordなら自動的にそのファイルのマークを付ける方法
どうも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のちょいテク詰め合わせ
- 投稿日:2020-10-09T20:23:33+09:00
Flexboxで縦並びかつ左右中央揃えがうまくいかない理由と対策
ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します!
Flexboxで縦並びかつ左右中央にする
要素を縦並びかつ左右中央揃えにしたいな〜
「よし!Flexboxを使おう!」ということで、
要素を縦並びにするのは flex-direction: column
要素を左右中央揃えにするには justify-content: centerHTMLはこんな感じ
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; }できた!!
- 投稿日:2020-10-09T17:11:23+09:00
表(テーブル)で斜線を引く方法
空のセルに対して、斜線を引く
例えば下記のような表があって、水曜日のセルに斜線を入れたい時。
(初心者のため表のイメージの貼り付けができなくてごめんなさいね)一番下の水曜日のセルには何も書かない。空にしてある。
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に変更すれば良い。
他のやり方だと45度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。
参考リンク
- 投稿日:2020-10-09T16:09:19+09:00
iosでinputタグがボコってみえるのを直す
- 投稿日:2020-10-09T12:10:59+09:00
キャメルケースとスネークケース
キャメルケース
companyId
やblogCategory
のように2語3語と単語同士をつづけた書く書き方。
先頭の単語が小文字
- 関数名は先頭小文字。例:createBlogCategory()
- 変数名(引数名)は先頭小文字。例:companyId
先頭の単語が大文字をパスカルケースまたはアッパーキャメルケースと呼ぶ
- class名は先頭大文字。例:BlogCategory
スネークケース
company_id
やblog_catefgory
のように2語3語と単語同士をアンダーバーで挟んでつなげる書き方。
- 定数はすべて大文字。例:BLOG_CATEGORY
- データベースなどで使われます。
ケバブケース
company-id
やblog-catefgory
のように2語3語と単語同士をハイフンで挟んでつなげる書き方。
- HTMLのclass名で使われます。
- 投稿日:2020-10-09T02:17:53+09:00
Bulmaをカスタマイズしてビルドする
Bulmaをカスタマイズしてビルドする
私は、Bulmaのシステム自体は好きなのですが、角が丸すぎる点が気に入りません。幸い、Bulmaは、ユーザーがかんたんにカスタマイズできるよう設計されていますので、
角丸を小さくした、カスタムBulmaのCSSファイルを作っていきます。①Bulmaのダウンロード
Bulmaのダウンロード方法1・zipでダウンロード(おすすめ)
git clone はドキュメントなどついてくるので、コンパイルするだけなら公式のzipがおすすめです。
Tags · jgthms/bulma
https://github.com/jgthms/bulma/tagsから好きなバージョンを選んでダウンロード&展開します。
Bulmaのダウンロード方法2・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の3つのファイルが生成されます。
この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>Material Designのようなスッキリしたボタンになりました。
色なども変更できますので、いろいろ試してオリジナリティのあるサイトを作る助けになればと思います。
- 投稿日:2020-10-09T02:10:55+09:00
Next.jsでClassless CSSを適用する
Next.jsでClassless CSS
Next.jsでClassless CSSを適用する機会があったので記しておきます。
Classless CSSとは
class属性(やid属性)をセレクタで使用してスタイルを適用するのがCSSの基本ですが、
Classless CSSはclass属性を使用せずhtmlのタグを使用するだけでスタイルを適用することができるCSSのフレームワークです。種類もかなり豊富です。
https://github.com/dbohdan/classless-cssClassless CSSのいいところは手軽に使うことができる点です。
htmlのタグを書くだけなのでクラス名やコンポーネントの使い方を覚える必要がありません。以下、new.cssの例ですがタグに直接スタイルが適用されています。
さっそく次から使ってみます。
① グローバルに適用
まずは
yarn
で持ってきます。yarn add @exampledev/new.cssNext.jsでページ全体に適用させたい時は
pages/_app.tsx
に以下を記載します。_app.tsximport { 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.tsximport 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(の②のケース)で実装する必要があったのでちょっと悩みながら進めたのですが、もっと綺麗なやり方があれば教えていただきたいです。
- 投稿日:2020-10-09T00:30:21+09:00
Railsで簡単にプルダウンを作る方法
簡単にプルダウンを作る方法
使用するディレクトリ(私の場合)⚠️命名はご自身で
- ビューファイル(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.rbclass 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; }現場からは以上です!
- 投稿日:2020-10-09T00:09:10+09:00
flexレイアウト `display: flex`で、サクっとボタンを中央寄せする
「きれいに(かつ、ラクに)レイアウトしたいときは
flex
を覚えるといいよ。」と教わってまずはじめに覚えたやつです。sass.center display: flex justify-content: centerhaml.center = f.button :submit, '送信'