gatsby+tailwind

nakaji

[Gatsby/React/TailwindCSS]マージンを使いこなしてみた

1. はじめにカンパニーサイトをGatsby/React/TailwindCSSを使って開発しておりますが、その際の気付きがあったため、ブログ化しました。尚、当方はWeb開発初心者であるため、至らない点がある場合はご容赦くださいませ。 2. 初期...

kiharay

Gatsby＋Tailwind CSSでコーポレートサイトのヘッダーを作る

Gatsby+TailwindCSSでシンプルなコーポレートサイトを作ろうとチャレンジしています。コーポレートサイトを作ろうとしたきっかけは「コーポレートサイトをGatsby+TailwindCSSで自作チャレンジ」を参照してください。 Gatsby+Tailwind...

yasuyukikihara

コーポレートサイトを公開する基盤（FirebaseやNetlify）を選んでみた

これまでの背景これまで、当ブログでコーポレートサイトをReact＋Gatsby＋TailwindCSSで構築する技術情報を紹介してきましたが、ついに開発が完了し、公開するところまで来ました。ローカルでの表示や、テストサイトでの表示は行ってきたのですが、インターネットに公開...

nakaji

【技術情報】Microsoft Azure で SPA をデプロイしてみた

簡単ではありますが、コーポレートサイトを開発する際にMicrosoft Azureを利用したので、SPAデプロイ方法を以下にメモします。よければ参考くださいませ。インフラ静的ファイル(html, js, css)のホスティングは BLOB Storage を用います...

kiharay

[TailwindCSS] マイナスマージンで固定ヘッダーが崩れた

ネガティブマージン使ったら問題が発生した！コーポレートサイトを構築する過程で、TailwindCSSを使ったかっこいいデザインを実現するために、以下の記事で紹介したネガティブマージンを使いました。そうしたら以下の記事で作ったヘッダーの右側に寄せていたメニューアイコンが表...

nakaji

[React/gatsby/tailwind] Google Map を埋め込んだコンポーネントを作ってみる&環境変数の設定方法

はじめに：やりたいこと今回はgatsbyのサイトで、Google Mapを埋め込むにはどういうコンポーネントを作ればよいか紹介をしたいと思います。利用するにあたり、GCPのAPIキーも必要になるため、環境変数をGatsbyでどうやって利用するかもあわせて紹介いたします。...

nakaji

[React/gatsby/tailwind] テーブル要素のComponent化をして1行でテーブル追加できるようにリファクタリング

やりたいこと現在、gatsby.jsで会社のホームページを作っており、以下のような表を色んなページで作成するという要件があります。いわゆるヘッダなしテーブルです。テーブルの各行が（属性, 値）のペアーになっているような構造です。まずこれを愚直に記述すると以下のようなコー...

kiharay

Gatsby+TailwindCSS:最低限のファイル構造を解説

Gatsby+TailwindCSSでシンプルなコーポレートサイトを作ろうとチャレンジする中で、学んだことを書き留めていきます。コーポレートサイトを作ろうとしたきっかけはこの記事を参照してください。今回はReactの基礎おさらいから、Gatsby、Tailwind...

kiharay

コーポレートサイトをGatsby+TailwindCSSで自作チャレンジ

中小企業とコーポレートサイト中小企業にとってコーポレートサイトを作る、という仕事は本業がIT関連でなければ中々手出しができないですよね。ホームページを作ったのが10年前、20年前なんてこともあったり、更新履歴が2015年で止まっていたり。。。...