tailwindcss入門編============= この記事は古いため、正常に動作しない可能性があります。 参考程度とさせて頂きます。 ============= tailwindcssの入門編、初級、初心者向けの記事を集めました。 導入、製作ノウハウ、事例等の内容を追加予定です。
【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。
最初に Reactのチュートリアル、Next.jsのチュートリアル、TypeScriptの入門?を終えたので、そのアウトプットとして無料で運用出来るtechBlogを作成しようと思う。記事は新しくブログ用に書くとZennと分散してしまうのでZennに投稿している記事を使ってサイトをビルドしていく。その前、準備としてZennとGitHubを連携する必要があるのでまだ行っていない方はこちらの記事を参考にすると出来ます。 実際に作成したtechBlog モバイル版 デスクトップ版 techBlog：大学生だった 実際のコード 参考にしたデザイン MNW- mobile 構成 Next.js index.tsx 記事をzennの投稿を管理しているリポジトリから取得する。 TypeScriptでAPIの型を定義する。 [id].tsx コードのシンタックスハイライト、数式、テーブルを表示する。 co
Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法 | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Tailwind CSS を導入する方法を紹介します。また、VS Code で Tailwind CSS での開発がしやすくなる Tips もまとめていますので、参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.2 next: 11.0.1 autoprefixer: 10.2.6 postcss: 8.3.5 tailwindcss: 2.2.4 Tailwind CSS とは？ Tailwind CSS とは、ユーティリティファーストの CSS フレームワークになります。CSS フレームワークで有名な Bootstrap のように、デザインが整ったコンポーネントがあるのではなく、デザインを整えるときに便利かつシンプルな機
Commitizenを使ってgitのコミットメッセージをしっかり書こう | DevelopersIO
はじめに gitのコミットメッセージを記述するとき、内容について悩むことが度々あります。 簡潔に要点をまとめて書きたいけどいちいち記述が面倒だったり、チームで書き方がバラバラだったり・・・ そして結局「fix bug」のひとことだけメッセージを記述するだけになったりします。 この記事ではそんなコミットメッセージを少しでも簡単に有用にするためのツールを紹介します。 Commitizen? コミットメッセージを簡単・簡潔に記述したいときに使えるのがCommitizenです。 Commitizenはインタラクティブにコミットメッセージを作成できるツールで、 このコミットのタイプ スコープ コミットのサマリー コミットの詳細 などについて対話的に記述していくことで、適切なコミットメッセージを作成できます。 ? Select the type of change that you're commit
Dockerfileのベストプラクティス Top 20
本文の内容は、2021年3月9日にÁlvaro Iradierが投稿したブログ(https://sysdig.com/blog/dockerfile-best-practices/)を元に日本語に翻訳・再構成した内容となっております。 Dockerfileのベストプラクティスのクイックセットをイメージビルドに適用することで、セキュリティ問題を防ぎ、コンテナ化されたアプリケーションを最適化する方法を学びます。 コンテナ化されたアプリケーションやマイクロサービスに精通している人なら、自分のサービスがマイクロサービスであることに気づいているかもしれません。しかし、脆弱性の検出、セキュリティ問題の調査、デプロイ後の報告や修正など、管理のオーバーヘッドがマクロな問題になっています。 このオーバーヘッドの多くは、セキュリティをシフトレフトし、開発ワークフローの中で可能な限り早く潜在的な問題に取り組むこ
Include diagrams in your Markdown files with Mermaid
EngineeringOpen SourceInclude diagrams in your Markdown files with MermaidA picture tells a thousand words. Now you can quickly create and edit diagrams in markdown using words with Mermaid support in your Markdown files. A picture tells a thousand words, but up until now the only way to include pictures and diagrams in your Markdown files on GitHub has been to embed an image. We added support for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの記述に革命をもたらす？ 「@layer」をサポートした「Chrome 99」がベータ版に／コードで入力ピッカーを呼び出す機能も追加
第11代Webフロントエンド黒帯が語る──私たちはこうして鍛えられ、エキスパートになった - linotice