![Tailwind CSS 入門
● CSSが随分軽いなと思ったらこのライブラリの効果だった
● 特定のルールでclass属性を指定するとCSSが自動で適用される
○ 多くの場合 (属性略称)-(値) の形式、例外もあり(“hidden” など)
12
class CSS
w-full width: 100%;
w-11/12 width: calc(11 / 12 * 100%)
mb-[100px] margin-bottom: 100px;
py-7 padding-block: calc(var(--spacing) * 7);
hidden display: hidden;
text-4xl font-size: var(--text-4xl); /* 2.25rem (36px) */
justify-center justify-content: center;](https://image.slidesharecdn.com/20250328rubykaigibaba-250401040412-2a118592/85/20250328_RubyKaigi-_baba_presentation_slide-12-320.jpg)
![Responsive design (1/2)
● デスクトップ版とモバイル版2通りのデザインそれぞれ実装が必要
● 画面幅によって適用するCSSを変更
● display: hidden と組み合わせて表示/非表示の切り替えも可能
13
<div class=“xl:py-[200px]
max-xl:py-[150px]”>
</div>
.xl:py-[200px] {
@media (width >= 80rem /* 1280px */) {
padding-block: 200px;
}
}
.max-xl:py-[150px] {
@media (width < 80rem /* 1280px */) {
padding-block: 150px;
}
}](https://image.slidesharecdn.com/20250328rubykaigibaba-250401040412-2a118592/85/20250328_RubyKaigi-_baba_presentation_slide-13-320.jpg)
20250328_RubyKaigi事前勉強会_baba_presentation_slide
- 1. えっ、未経験で LPを！？ 本業Rubyistによる React.js + 鯛lwind CSS + 鯛peScript で作るランディングページのススメ pixiv Inc. Ryota Suzuki (baba) 2025.3.28 Ty Tai
- 2. 軽く自己紹介 ● 名前: 鈴木 竜太 ○ 社内での呼び名: baba (ばば) ● 所属: ピクシブ株式会社(2024/12/1 〜) ● Ruby歴: 2016年〜 ● RubyKaigi 一般参加歴: ○ 2017 (広島) ○ 2019 (福岡) ○ 2022 (三重) ○ 2023 (松本) ○ 2024 (那覇) ○ 2025 (松山 (予定)) 2 自画像 アイコン (親戚宅の猫)
- 3. RubyKaigi 2025 in 松山 楽しみですね 3
- 5. 5 そして “Music Event Sponsor” です
- 6. 6 今年もやります！ RubyMusicMixin 2024 (沖縄) の様子 俺
- 7. 7 時を遡ること 2ヶ月 ● RubyKaigi 対策委員会にて、今年2月ごろ ○ 「LPどうする？」 ○ LP… ランディングページ ○ 昨年の実装担当者が今年は不参加 ○ 全員本来の業務で多忙 ● 一方babaは ○ 入社数ヶ月で重責なし ○ フロントエンド若干経験あり(Vue.js) ○ この機会に覚えるのもいいかも(気持ち) ● 「babaさん、できます？」 参考: 昨年 (2024) のLP
- 8. 8 牛次郎, ビッグ錠 (1982-1987) 「スーパーくいしん坊」講談社, 月刊少年マガジン
- 9. 実装 スケジュール 9 2025/1/10 2/18 3/6 3/18 3/19 3/21 デザイン依頼 デザイナー エンジニア (baba) 制作 環境構築 事前調査 レビュー / フィー ドバック 本番リリース 告知 牛次郎, ビッグ錠 (1982-1987) 「スーパーくいしん坊」講談社, 月刊少年マガジン
- 10. 技術選択 ● 結論: React.js + Tailwind CSS + TypeScript ● 理由: 去年を踏襲 ○ ビルド関係のリスク回避 ○ 技術的質問もしやすそう(社内に経験者がいる) ● 本音: 経験のある Vue.js も良かったかも ○ 社内であまり推奨されていない雰囲気を感じた ○ 「Vue.js から React への移行」的なタスクがいくらか見つかった 10
- 11. React.js 入門 ● React.FC でコンポーネントを定義→ 自前のHTMLタグ ● ページのパーツ化、機能の再利用 ● 引数や innerHTML を取ることも可能 11 import React from ‘react’; export const SampleComponent: React.FC = () => { const time = new Date().toLocaleTimeString(); return ( <div className={“w-full”}> <h1>React sample</h1> <p>現在時刻は {time} です。</p> </div> ); }; <div class=”w-full”> <h1>React sample</h1> <p>現在時刻は 13:15:20 です。</p> </div>
- 12. Tailwind CSS 入門 ● CSSが随分軽いなと思ったらこのライブラリの効果だった ● 特定のルールでclass属性を指定するとCSSが自動で適用される ○ 多くの場合 (属性略称)-(値) の形式、例外もあり(“hidden” など) 12 class CSS w-full width: 100%; w-11/12 width: calc(11 / 12 * 100%) mb-[100px] margin-bottom: 100px; py-7 padding-block: calc(var(--spacing) * 7); hidden display: hidden; text-4xl font-size: var(--text-4xl); /* 2.25rem (36px) */ justify-center justify-content: center;
- 13. Responsive design (1/2) ● デスクトップ版とモバイル版2通りのデザインそれぞれ実装が必要 ● 画面幅によって適用するCSSを変更 ● display: hidden と組み合わせて表示/非表示の切り替えも可能 13 <div class=“xl:py-[200px] max-xl:py-[150px]”> </div> .xl:py-[200px] { @media (width >= 80rem /* 1280px */) { padding-block: 200px; } } .max-xl:py-[150px] { @media (width < 80rem /* 1280px */) { padding-block: 150px; } }
- 14. Responsive design (2/2) ● Tailwindで定義済みの画面幅はsm, md, lg, xl, 2xl の5種類 ○ 参考: iPhone 14 Pro… 430, iPad Air… 820 ● prefix に max- を追加すると条件が反転(規定値以下の幅であればCSSを適用) ● きめ細かい実装もできるが、今回xl / max-xl を主に利用 (時間がない) 14 Breakpoint prefix Minimum width CSS sm 40rem (640px) @media (width >= 40rem) { ... } md 48rem (768px) @media (width >= 48rem) { ... } lg 64rem (1024px) @media (width >= 64rem) { ... } xl 80rem (1280px) @media (width >= 80rem) { ... } 2xl 96rem (1536px) @media (width >= 96rem) { ... }
- 15. 背景の実装 ● 背景のデザイン指定がやや特殊だった ○ 画像素材 (空のストックフォト) + グラデーション ○ 画像は固定表示したい ○ グラデーションはページスクロールに追従 ● 検討した結果、以下の実装 ○ ページ全体の background にグラデーションを指定 ■ repeating-linear-gradient ■ Tailwindが苦手な分野なので普通にCSSで実装 ○ <img> タグで画像素材を固定表示 ○ mix-blend-mode 属性で background と <img> をブレンド ■ 最初 opacity で指定したら見た目全然違って焦った ■ よく見たらデザイン(Figma) にブレンド方法 (hard-light) の指定あり 15 background <img src=”background.jpg”>
- 16. CSSにおける要素の “ブレンド” ● 要素同士が重なった場合にどう表示するかの設定 ● 重なった要素の各ピクセルごとに表示色を計算して決定 ○ normal: 上の色がそのまま使われる ○ multiply: 色同士 (0.0~1.0) を乗算 (暗くなる) ○ screen: 色を反転 (1から引く) させて乗算し、その結果を再度反転 ○ hard-light: 上の色が暗ければscreen, 明るければ multiply ■ 今回採用したのはこれ。鮮やかでパキッとした仕上がり ○ 他にも色々ある 16 https://developers.freee.co.jp/entry/css-mix-blend-mode-kanzen-rikai-shitai
- 17. その他、工夫した点 ● Componentの恩恵を最大限受ける ○ 繰り返し使う要素はComponent化して再利用 ■ 画像、外部リンクなど ○ まとまった機能単位はComponentに分割 ● 関係者になるべく進捗を報告 ○ ほぼ毎日 (営業日) ScreenshotをSlackで共有 ○ リリース予定日から逆算してデザイナーチェックに提出 ● 画像最適化ツール(Optimizilla) でサイズを削減 17
- 18. と、いうことで 18
- 19. 完成したものがこちらになります https://conference.pixiv.co.jp/2025/rubymusicmixin 19 Try from here!
- 20. 戦いを終えて ● 去年までの資産を可能な限り利用 ○ package.json の参考 ○ CI とデプロイ周り ● CSS周りとTailwindは勉強になった ● Tailwindのバージョンが変わった影響でビルドに手間取る ● フロントエンドエンジニアリングの経験値アップ💪 ● アニメーションやインタラクティブ UIは今後の課題 ● GitLab CIがすごくいい仕事だった(巨人の肩) ○ Firebaseを全面的に採用 ○ ブランチをpushすると自動でStaging環境を構築 ○ masterにpushするとそのまま本番環境へ 20
- 21. Call for DJs & VJs!! Enjoy the party!! 21