𝕂𝕚𝕥𝕖 / KITERETZ inc. @ixkaito Twitter profile

Pinned Tweet

𝕂𝕚𝕥𝕖 / KITERETZ inc.

4 years

VS Code に移行した当初、気に入ったテーマがなくて自作してずっと使ってたんですが、ついに Marketplace に公開しました！ミニマル、フラット、Monokai カラースキーム！よかった使ってください！ KTRZ Monokai - Cool minimal flat VS Code dark theme

3

134

990

Last Seen Profiles

@T3TRu

@ALAMAT_RJiPH

@stw_pdg

@blt_different

@kubotaice

@PaulaAmorim

@noriStand_

@eyalraz6

@CFM_AM

@sai_otoku

@RG_Cruz12479

@E_MPIRE_1

@wick_ashleigh

@rtaal

@ddcoffman

@shiina_sora712

@bokeplokalmalam

@Kathryn67962307

@IMU_HQ

@eevvaaaa_

@OhioChristian

@Secrety39

@tritoan76

@stw_pdg

@nakadatei

@NIN0SUNDAY

@SlideWrldd

@Mzcrisler1

@190dx

@SheS0different

@luvinthot

@samfagan02

@babynellfr

@haIoinahaystack

@oksoonerfan79

@aleftini

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

8 months

踊ってないで早く開いて。

6

996

10K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

なぜか日本であまり話題になっていないが、マジでヤバいノーコード・ローコードツール。UI も使いやすいうえ (個人的に Webflow や STUDIO より断然使いやすい) 、HTML/React/Vue などのエクスポートも可能。逆に日本で流行らないでくれ。 TeleportHQ

Low-code Front-end Design & Development Platform | TeleportHQ

Front-end development platform, with a visual builder and headless content modelling capabilities. Static website creation, and UI development tools.

teleporthq.io

1

434

3K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

なにこれすごい。ピクセルアートを描いていくと 3D CSS を生成してくれるツール。 VoCSSels - Easily create 3D CSS & HTML Voxel Models

0

753

3K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

めちゃくちゃオススメの Helvetica / Roboto ライクのフォントです！オープンソース！バリアブル！18スタイル！数字と大文字のコンテキストでの記号の縦位置の自動調整などの豊富な機能！しかもつい先日 Google Fonts でも使えるようになりました！ Inter font family

Rasmus Andersson

@rsms

5 years

Inter is now available from @googlefonts ! Congrats to @ThunderNixon who worked tirelessly on getting Inter on-boarded to Google Fonts.

102

389

3K

0

333

2K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

久々に Futura の代替フォントを Google Fonts で探してたら、これまでにないぐらい Futura にそっくりなフォントがありました。ウェイトも多い、というかバリアブル。2020年リリースですがノーマークでした。 Jost - Google Fonts

3

234

2K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

rem か px か、html { font-size: 62.5%; } は OK か NG か、まとめて検証してみました。結論：みんなウェブをよくしようとしてるのでどれでもいいと思います。プロジェクトやチームでルールを設ければ。じゃ僕はどれかというと、シンプルに px を使います。デモを上げてますのでぜひご自身で→

1

306

2K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

自宅で珪藻土のバスマットを使っているんですが、何年も使っていると表面の目詰まりで吸水性が悪くなります。紙ヤスリをかけるいいらしいんですが、家になかったので代わりにメラミンスポンジを使ったら、めちゃくちゃ吸水性が復活しました！お手軽なので使ってる方はぜひ試してみてください。

2

460

2K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

しばらくログインしていないアプリにログインしようとするとき、以前どのログイン方法を使っていたのか忘れているだろうから、最後に使ったログイン方法をわかるようにしておくと UX 的にいいよね、というお話。

Leandro

@lifelivedfreelx

5 years

Such a simple example of UX heaven. Every login flow should include this.

15

319

1K

3

413

2K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 months

こういうデザイン、ついに CSS だけでテキストに応じて画像を切り抜くことができました！角丸のサイズも変更できます！

3

92

1K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

文字に座布団を敷くデザインを CSS で実装するとき、それぞれの行を span などで囲んで padding を設定すれば簡単に再現できますが、CMS やレスポンシブ対応などで改行を制御できない場合は困ることがあると思います。実は box-decoration-break: clone; を利用すればいい感じにできます。

4

149

1K

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

おそらく即出ですが、何度注意喚起してもいいと思います。イラストレーター上のベクターデータをコピーしてほかのツールにペーストするとき、パスが荒れることがあります。それはイラストレーターで SVG 保存時の「小数点以下の桁数」設定が低いことが関係している可能性が高いです。

0

174

965

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

ここ何年か僕が使ってる独自のグリッドシステム。960グリッドシステムの20pxのガターはちょっと狭すぎるし要素幅を10px、20px変えるとグリッドから大きく逸脱します。そこでカラムもガターも40px。というよりもガターかどうかもあまり関係ない。最近流行りのブロークングリッドにも対応しやすい！

2

97

955

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

CSS のみで画像 #グリッチ。500いいね行ったら解説記事書きます。 #glitch #rgbsplit #色収差 #RGB ずらし

1

98

890

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

8 months

AI がウェブサイトを作ってくれるサービスをいくつか試してみました。どちらもすぐに公開できましたし、Solo に関しては問い合わせフォームも機能します。スモールビジネスであればこれで十分かもしれません。左：Framer AI 右：Solo

1

79

864

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

いいのができました！たとえば幅320pxでは32px、960pxでは48pxにフォントサイズを流動的に変化させたいとき、この320、32、960、48を CSS カスタムプロパティに設定するだけで自動的に計算してくれるものを作りました。さらに、最小最大値のありなしも指定可能。Sass、JS 不要、CSS のみ。

1

103

851

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

遅延読み込みの loading="lazy" が HTML 標準になりました。Edge も Chromium ベースになったことですし、JS による画像の遅延読み込みは今すぐやめてこちらにしたほうがいいと思います。ちなみに WordPress コアも対応することを検討しております。

ウェブクリエイターズニュース

@webcreinfo

5 years

Google Chrome(Chromium系ブラウザー)で「独自実装」扱いだった「loading="lazy"」がHTMLの標準規格としてマージされました。これにより今後、SafariやFirefoxなどの他のブラウザーへの展開が期待できますね。

0

181

371

2

269

776

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

Google Fonts に日本語フォントが6書体正式的に追加されました。

0

355

767

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

Google Fonts で、たとえば数字のみ Roboto を使いたい場合、フォントリクエスト URL に text=0123456789 のように指定することで、無駄な文字データをダウンロードせずに済みます。使う文字が決まっているあるいは限定的な場合は最適化しましょう。詳細についてはこちら

0

128

750

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

今日の HTML マークアップでは、© のように実体参照で書く必要はほとんどないですよというお話。

1

133

753

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

8 months

僕もほぼ同じことをやってます。僕の場合は ATracker というアプリを使って、睡眠・食事・身支度など、24時間すべての時間を記録しています。ATracker のいいところは、タスクの切り替え UI がボタンになっていて、次のタスクを押すだけで簡単に切り替えられます。切り替えを忘れた場合は、

1

81

751

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

WordPress の通称 entry-content 内で僕がよくやる CSS の処理。同じマージンを設定していても、line-height のせいでテキストと画像の隙間は違って見えますので、(line-height - フォントサイズ) ÷ 2 の値を figure の上下パディングに設定します。

2

86

725

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

Google スプレッドシートの垂直方向の配置、なんでデフォルトが「下」なんだろ？「下」でよかったこと一回もないんだけど。

2

51

671

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

8 months

自分用にフォントを細かく横断的に探せるツールを作っていて、せっかくならある程度溜まったら公開しようと思いましたが、さっさと公開してこれから随時更新していくことにしました！ Fontbook

1

110

656

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

やっとキテレツのロゴマークからできた KTRZ フォントを公開しました！オープンソースで完全無料です！可読性は皆無なのでブランドサイトを参考に使っていただければと思います！ KTRZ Font - Free minimal geometric font

1

198

648

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

ここ何ヶ月がんばって作ってたサイトがついに完成しました🎉 「ヒンシツの可視化を価値に変える」をスローガンに掲げるコンテック企業の株式会社 NEXT STAGE (ネクストステージ) さんのウェブサイトを制作しました。

3

47

636

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

CSS で色収差アニメーション。Sass のランダム関数を使いましたが、もちろん普通に CSS で書いても大丈夫です。

1

70

617

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 months

JS でプログレスバーを実装するとき、何かと便利だろと思って、CSS カスタムプロパティを経由するやり方にしたら、iPhone で端末がめっちゃ熱くなるし、一定時間経つとページが勝手にリロードするようになった。直接 CSS のプロパティを更新するやり方にしたら解消されました。理由はおそらく、

2

49

566

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

諸事情により個人のポートフォリオサイトを作っております。このアニメーション、なんと Figma のプロトタイピングだけで作れます。コーディングはこれからですが、たぶん CSS だけで実装できます。

1

28

561

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

(たぶん) 全ウェブデザイナー待望のヒーローイメージテスターなるものを作っています。実際の画像、コピーなどを入れるだけで、いろんなレイアウトで一括確認できる。クリスマスに間に合うといいな。

2

46

540

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

オープンソースに貢献しててよかったこと、嫌なヤツがいても「どうせこいつオレのソースコードが入ってる WordPress とか React とか Rails 使ってるし」と思えること。

1

83

530

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

新しい iMac、CSS で描きやすいな。 Pure CSS iMac 2021

1

57

512

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

Next.js で静的サイトを作ることも多くなってきたので、毎回 Google Analytics、OGP、TypeScript、Tailwind CSS、アクティブリンクなどを設定するの面倒くさいのでテンプレートを作っておきました。 NextSSS: Next.js static site starter

0

49

506

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

14 days

近日中に記事書くって言ったのにやっと時間ができて結局1ヶ月以上経ってしまった。こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法

2

54

503

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

CSS 時計。

3

59

487

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

これはあまり教えたくないやつなんですが、デザインの参考にギャラリーサイト、Pinterest、Dribbble を観るのももちろんいいんですが、+81という雑誌のエディトリアルデザインは本当に全ページがいつも楽しませてくれて、インスピレーションを刺激します。 Plus81 inc.

1

32

462

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

ピル型ボタンを作るとき、border-radius: 9999px; みたいに、昔は適当な大きな数字を使っていましたが、マジックナンバーっぽさあるしなにか根拠がある数字でもないし絶対安全とも言えないので、最近は 100vmax を使うようになりました。少なくとも画面に収まるサイズであればスタイルは保証される。

4

37

447

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

これまでの自分の常識がひっくり返る記事を書きました。 decoding="async" について詳しく調べてみる｜Kite #zenn

decoding="async" について詳しく調べてみる

zenn.dev

0

73

409

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

どんな幅の親要素に対しても子要素を画面幅いっぱいにできる calc(50% - 50vw) はとても便利ですが、そのさらに上の要素に overflow-x: hidden; をつけないと横スクロール出るよ！というのを注意していただきたいと常々思っています。わりとそういうサイト見ます。

0

47

402

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

CSS のみ、画像加工なしで RGB ずらし効果。 #色収差 #RGB シフト #RGB_split

3

36

389

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

9 months

『〜先生にぜひ読んでほしい〜すごくわかる著作権と授業』(すごわか) の制作をキテレツでお手伝いしました。先生方が利用しやすいようウェブ版はオープンソースになっており GitHub で公開されています。著作権に関するクイズも用意していますのでぜひ挑戦してみてください！

1

105

370

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

OK とキャンセル、どっちが左でどっちが右について、絶対的な正解はないけど、個人的には左がキャンセル、右が OK にしておいたほうがなにかと無難だと思います。こういったフローのような UI のとき、どうしても左が戻る／キャンセル、右が進む／OK になるので。

1

49

356

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

超オススメのセリフフォントがあります。 #SaCSS のスライドの表紙でも使いました。懇親会で聞かれたときも答えました。この美しさと完成度とウェイト数とステンシルも入って、個人商用問わず使用できる CC-BY-SA ライセンス！ Fabian De Smet – Butler – Typeface

1

77

351

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

へー Helvetica の等幅フォントとして開発された Fragment Mono がオープンソースとして公開されています。

NormalFontGuy24/7

@w__h_

2 years

Fragment Mono is a monospaced coding version of Helvetica created by modifying and extending Nimbus Sans. Now available under OFL:

24

170

2K

0

81

335

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

2022年はニャーニャーニャーで大きい猫の年ということで、猫型の年賀状を作りました。 design: すぴかあやか @spicagraph

1

31

336

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

シンプリシティは複雑なものをわかりやすくする効果がある。ミニマリズムは無駄を省く考え方。どちらがいいのかということではなく、デザインにはどちらも必要だと思う。どちらも a11y を確保できるし UD を満たすこともできる。右はミニマルにはなりえるけど、シンプルなレイアウトではない。

0

38

331

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

#SaCSS Special15 のスライドの一部を公開！ Sass の mixin はこちらデモはこちら

0

75

322

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

10 months

予定日より1ヶ月も早く、娘が誕生しました！幸い母子ともに健康です。いろいろとイレギュラーが発生しましたが妻ががんばってくれました。ぴこ (まだ名前が決まってません) のほしいものリストです 🙏

39

0

323

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

単色ロゴのマークアップ、これがベストかもしれない。ロゴのテキストを完璧にマークアップでき、視覚的には完璧にロゴ。さらに、テキストカラーを変えるだけでロゴの色を変更できる。

1

21

320

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

紙のサイズの確認に便利なサイト。国際的な規格が掲載されています。サイトデザインや UI もいい！ Paper Sizes | The best resource for International Paper Sizes, Dimensions & Formats

0

81

315

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

あまり日本日本言いたくないんですが、お名前.comとかなんでこうも日本の大手サービスの UI は🤬が多いんだ。

2

93

310

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

Hello world のつもりでずっとテストしてたけど、よく見たら地獄だったｗ

3

77

307

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

11 months

Tailwind CSS 使うと、Sass の mixin やら function やらをすべて JS で書けるのでほぼなんでもできていいです。

3

25

310

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

8ピクセル基準のマージン・パディングの追加・変更って意外と面倒くさいので、社内用に Tailwind CSS の設定を基にした Figma のスペーサーコンポーネントを作成しました。公開しておりますのでご自由に複製してお使いください。Variants で簡単にサイズを切り替えられます。

1

31

311

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

モンドリアンの作品を CSS Gird だけを使って再現してみました。ラスボスの Broadway Boogie Woogie は想像以上に大変でした。ソースコードは GitHub と CodePen に上げております。 CSS Grid Mondrian

1

69

305

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

9 months

演出照明を手がける Y's COMPANY 様のウェブサイトをキテレツで制作させていただきました。光の演出、アニメーション、サイトパフォーマンス、ユーザビリティ、それぞれのバランスにはこだわりました。 1. 演出のためにユーザを待たせない (ローディングは絶対つけない)

2

23

304

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 months

リンクの入れ子 (<a> タグの中に <a> タグがあるようなデザイン) のマークアップ、subgrid を使った方法が最適解かもしれない。 HTML の構造は至って普通なので、読み上げもタブキーによるフォーカスも問題ない。もちろんコンテンツの増減にも対応。さらに他の方法よりベターなのが、

1

33

293

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

#意外と知られてないんですけど Figma でドラッグ＆ドロップすると通常は自動的に Frame や Auto Layout の中に入っちゃいますが、オブジェクトを選択したあとスペースキーを押しながらドラッグすると、中に入れずに重ねることができます。

1

38

284

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

もうすぐオンライン講座プラットフォーム「Coloso」と共に企画した「デザインから実装まで動きを取り入れたWebサイト制作」講座が公開されます！詳細ページは、3日後の5月8日に公開される予定ですので、もう少しお待ちください！

1

31

284

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

みんな画像の上にテキスト乗せるの好きじゃん？もし100点満点中1枚目が±0点だとしたら、2枚目は-200点なので安易に画像の上にテキスト乗せないほうがいいですよ。

2

25

280

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

東証一部上場企業の DKK 電気興業株式会社様のウェブサイトをキテレツでリニューアルさせていただきました。リニューアル前はレスポンシブにも対応していない静的サイトでしたが、1000ページ弱に及ぶコンテンツをクライアントと一緒に整理し CMS 化しました。

1

17

280

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 years

著作権、ライセンス、契約などについて共著で書いていた本が校了し9/30に発売されます！クリエイター必携の一冊！好評予約受付中です！著作権トラブル解決のバイブル! クリエイターのための権利の本

0

146

274

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

こういう主語がでかくて、かつ間違った情報を広めるの、切にやめていただきたい。

1

91

276

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

9 months

いいところに目をつけていただきましたね！CSS のほうがパフォーマンス悪かったです (動かしたときにカクカクする) 。画像をもっと小さくすると、見た目的に許せない範囲だったのでこのサイズになりました。ちなみに画像のサイズが大きくてもパフォーマンスには基本的に影響しません。

山本大介 @𝕏

@b4rskbe5

9 months

ん？まって、マウスストーカーのほわっとした部分、CSS じゃなくて画像なの！？しかも 2.4MB もあるんだけど……。何か理由があるのだろうか？フワッとした見た目に拘るにしてもサイズが 3840x3840 と大きすぎる気がする。

1

0

8

1

23

273

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

今来たとこなのに。

1

21

272

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

CSS で見出しにマーカーなどのデザインをつけるとき、普通にやると、横いっぱいになったり、複数行に対応しなかったりします。かといって CMS だといちいち中に span を入れるわけにはいかない。そんなときは見出し自体をインラインにして、マージンは before/after でつけるといい感じになります。

0

31

267

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

お待たせしました。CSS のみで画像 #グリッチ #RGB ずらし効果をかける方法の解説記事です。加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける｜Kite #zenn

加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける

zenn.dev

0

38

267

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

Google カレンダーって日付のところをドラッグすることで表示日数を変えられたのか😮ずっと右上のプルダウンから変更してた…

0

39

256

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

やっと Coloso の収録がすべて完了しました！めちゃくちゃ大変でした。想像の十倍以上大変でした。おそらく最初で最後のウェブ制作の動画コンテンツになると思います！デザインから実装まで動きを取り入れたWebサイト制作

2

12

257

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

ウェブ制作業界に従事している者として最近のスクール・サロン問題に対して、対岸の火事ではなく真剣に向き合ったほうがいいのかもしれない。このまま自然淘汰を期待して放置していいのか。業界の成長を鈍らせたりしないのだろうか。アンチとか妬みとかそういうことではない。想像できる範囲だけでも、

2

26

242

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

こちらは :has() を使わなくても :focus-within で実装できます。むしろこういうプルダウンメニューにはつけるべきです。デモ：

こびと

@kobitoCode

2 years

:has()でJS使わずにメガメニュー作ってみた。:has()便利なのではやく火狐も対応してほしい...

2

4

97

2

24

240

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

書きました。これを読めば WebGL を完全に理解できるはず。生 WebGL と TypeScript で Vercel のロゴを作る｜Kite #zenn

生 WebGL と TypeScript で Vercel のロゴを作る

zenn.dev

0

29

240

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

結構前に SNS でシェアされてるの見てほしいなと思いつつも売ってるかどうかわからなくて、つい先日またシェアされてるの見てついに販売先が判明して即行で買いました CMY Cube。

1

32

239

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 months

こういう角丸と透過背景を持つグラデーションボーダーのデザインがあったけど CSS で実装できた。background-clip: border-area という新しい値が提案されているので、採用されたらこんな面倒くさい実装はもうしなくて済む。

0

15

235

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

コンテン��が少ないときでもフッターを画面下部に表示させるいくつかの方法。個人的には Flexbox が一番わかりやすく汎用的。

2

29

231

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

Noto Sans JP のサブセットをアップデートしました。 - 常用漢字と記号を追加 - woff2 を追加、eot を削除 - カーニング情報などを保持したバージョンを追加 ixkaito/NotoSansJP-subset: Noto Sans CJK JP サブセット (OTF, WOFF, EOT)

GitHub - ixkaito/NotoSansJP-subset: Noto Sans JP サブセット (OTF, WOFF, WOFF 2.0)

Noto Sans JP サブセット (OTF, WOFF, WOFF 2.0). Contribute to ixkaito/NotoSansJP-subset development by creating an account on GitHub.

github.com

1

32

231

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

よく「アートは表現、デザインは問題解決」とか「デザインは機能しなければならない」とか言われますが、デザインの中でもより美的価値を求める分野とより機能性を求める分野があって、一括に「デザイン」ではなく、こうグラデーションみたいになってるんじゃないかなと。

1

36

227

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

何度もいいますが、rem と px は好きな方を使ってください。em と vw などは適材適所で。

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

rem か px か、html { font-size: 62.5%; } は OK か NG か、まとめて検証してみました。結論：みんなウェブをよくしようとしてるのでどれでもいいと思います。プロジェクトやチームでルールを設ければ。じゃ僕はどれかというと、シンプルに px を使います。デモを上げてますのでぜひご自身で→

1

306

2K

0

29

227

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

「やっぱり最近デザインは XD ですか？」って聞かれて、「いや、ほとんど Figma ですね」って言ったら「聞いたことないですね」と言われたのでやっぱり日本での Figma の知名度はまだまだですね。僕個人の感想ですが、XD よりも Sketch よりも、確実に Figma のほうが使いやすくて UX が高いです。

2

14

226

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

明けましておめでとうございます。お待たせしました。実際の画像やコピーなどを入れると様々なレイアウトで一括確認できる Hero Image Tester (ヒーローイメージテスター) を公開しました。本年もキテレツをよろしくお願いします。 URL はスレッドに👇

2

36

225

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

水を差すようで大変申し訳ないんですが、inset はただの top, right, bottom, left の一括指定なので、margin: auto; は必要です。また、この指定方法は対象要素に幅・高さが指定されていないと、親要素に対して上下左右いっぱいに広がるだけなので中央配置にならないです。

SISTER🍝Webクリエイター

@ane_creator

2 years

【これからの上下中央配置】【CSS】今まで6行、4行書かないといけなかったCSSが２行でできるようになりました。圧倒的効率化。もちろんIEモードが要件に入ってると使えないので注意です。

3

127

1K

3

23

223

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

6 months

「すごわか」に続き、動画で著作権を学べる「基礎から学ぶ著作権」のサイト制作をキテレツでお手伝いしました。こちらもソースコードは GitHub に公開されており、動画はサイト上からダウンロードできるようになっています。基礎から学ぶ著作権

1

43

216

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

僕のハンバーガーボタンのマークアップはこう： <button id="menu">Menu</button> CSS のみ (画像なし) 、アクセシブル、アニメーション対応、サイズ変更は #menu の width/height のみで可能、もちろん id じゃなくて class でも可。

Accessible Semantic CSS-Only Hamburger Button

CSS-only, accessible, with animation, and easy to resize by changing the value of width/height of #menu....

codepen.io

1

19

209

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

ほとんどの人は CSS をリセットしたりフレームワークを利用したりするのであまり知らないかもしれませんが、実はブラウザのデフォルトスタイルでは article や section などの中にある H1 は、H2 と同じスタイルです。article や section が増えればさらに H3、H4… となっていきます。

1

26

206

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

最近へーと思った #Figma の tips。テキストを Union すると、角丸を設定できて、Flatten しないかぎりテキストの編集もできます。

0

14

201

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

キテレツは2月に大阪市北区南森町にオフィス移転いたしました。とりあえず執務スペースがほぼ完成しました。相変わらず駅から徒歩1分で、駅チカ制作会社選手権で上位取れると思います。

3

15

202

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

3 years

最近コーディングしてて思いました、1つのプロジェクトで複数人が CSS を書く可能性が場合は、絶対 Tailwind CSS を導入すると、強く決心しました。Next.js に限らず、WordPress でも静的サイトでも。

0

15

199

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

「プレミアムがついた商品」って言ったら「プレミア」とは違うの？って聞かれて、調べてみたら意外とややこしかった。実は「プレミアつき」などは「プレミアム」の省略。でも「プレミア」には別の意味もある。大学のときフランス語取ってたのですべてがつながった。なんで Adobe Premiere なのかも。

0

52

197

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

5 years

本日の発表資料でした。速度を遅くするのも速くするのも、我々人間である。 WordPress でも大丈夫！実例で見るウェブパフォーマンス改善 - Speaker Deck #さくらクラブ

WordPress でも大丈夫！実例で見るウェブパフォーマンス改善

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insigh…

speakerdeck.com

0

51

197

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

Figma を使うとコーダーは楽できてデザイナーは手間が増えると思ってる方がいてびっくりです。かなり大手の弊社クライアントから Figma 推奨の要件があったときは少し意外でした。そうなんです。クライアント・デザイナー・コーダーの win-win-win なんです。

1

21

195

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

img に decoding="async" をつけないと、画像のデコードがレンダリングをブロックすると思うじゃん？僕にはそうは見えませんね 🤔 テストしたかぎりでは、画像が重くても軽くても、async でも sync でも auto でも、画像のデコードはレンダリングが終わったあとから始まります。

3

18

189

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

Figma が少し話題のようなので、基礎〜実践的な使い方まで、さらにコーディングの勉強もできる講座を Coloso. で公開していますのでぜひ！しかもいつの間に0円のお試しキャンペーン始まってる？デザインから実装まで動きを取り入れたWebサイト制作

1

28

183

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

1 year

今日から新年度ということで、新しくウェブ業界に入った方もいると思いますので、相互フォローさせていただいている、いつも最高のものを制作されているウェブクリエイター5名を紹介します。(アカウントのアルファベット順)

1

28

181

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 years

Tailwind CSS の自由度がどんどん増したことによって記述方法が複雑になってきましたのでちょっと難しい書き方をまとめてみました。v3.1から実装される予定の任意値 variant もいち早く紹介しています。 Tailwind CSS の一歩進んだ書き方｜Kite #zenn

Tailwind CSS の一歩進んだ書き方

zenn.dev

0

31

179

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

2 months

Mac のクイックアクションで簡単に背景を消せるのあまり知られていないかも。

0

14

178

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

バリアブルフォントを使ったテキストアニメーション。

0

18

180

𝕂𝕚𝕥𝕖 / KITERETZ inc.

@ixkaito

4 years

WordPress で Google Fonts の新しい API から複数フォントを wp_enqueue_style() などで読み込むと、最後のフォントしか読み込まれない問題が発生する場合がありますので注意喚起です！結論から言いますと4番目の引数を null にしてください。'' でも false でもなく null です。理由は後述。