発行
Headless UIのDropdown Menuを使って、メニューのUIを作ってみます。メニューを開いたら画面を半透明黒で覆うオーバーレイを出し、選択しているメニューをハイライトさせるところまでを実装してみましょう。
ほんのちょっぴりの知識しかないピクセルグリオ君が、エンジニアの先生にJavaScriptの手ほどきを受けます。いきなりプログラムを書くのかと思いきや、第1回にコードは出てきません。さて、先生は何を教えてくれたのでしょう。待望の超入門シリーズです。
親コンポーネントと子コンポーネント間のデータフローの要となるpropsとemitsの連携を解説します。
発行
faviconは以前よりある機能ですが、HTML仕様での標準化やブラウザの機能拡充により、指定方法が簡素になったり対応フォーマットが増えたりしています。ここでは画像フォーマットとマークアップを、改めて見直して見ましょう。
ボーナスをもらっている側でも、金額はどのように決まっているのか知らないという人も多いのではないでしょうか。もしボーナスを渡す側だとしても、どのように金額を決めるか悩ましいところがあるかもしれません。この記事では、ピクセルグリッドでの例をお伝えします。
おさらいを兼ねたWebサイト制作も最後の仕上げです。画像なども読み込んでスタイルを整えていきます。また、最後にこれからのNext.jsの機能についても触れます。
発行
POST APIを使って、寄稿フォームからデータを受け取り、microCMSへPOSTする仕組みを実装します。POSTのためのAPIキーやエンドポイントが晒されないようNetlify Functionsなどサーバー側での処理を挟むのがポイントです。
コンポーネントの分割方法について解説します。コンポーネント分割は使い所を誤るとかえって実装が煩雑にもなりえます。留意すべきポイントも挙げました。
自由に好きな方法でスタイルを当てることができ、なおかつアクセシブルなUIライブラリである、Headless UIを紹介します。まずはその特徴をつかんでみましょう。
発行
Jamstackの特徴の一つのとして静的HTMLとしてビルドするということがあります。今回は、この静的HTMLを作るツールのいろいろなタイプと、それぞれどこに気をつけるべきかを解説します。また、ビルド時間を長くしないためにはどうしたらよいかも考えましょう。
CSS GridやFlexboxで使えるgapプロパティについて、それ以前の方法と比べるとどのような違いがあるのか、どのように利用できるのかを解説します。
これまで解説したNext.jsの機能をおさらいしながら、サイトを制作しています。今回は個別のブログページです。同じフォーマットで内容が違うページをMarkdownのパースを行いながら生成します。