google clone Part9 22 検索結果ヘッダーのアイコン、ボタン類を実装 - Qiita

概要 目次 今回は検索後画面のヘッダーの一部を実装します。 左端にgoogleの画像、右端にアイコン・ボタン類を実装します。 以下画像は実装後の画面です。 開発環境 OS:Windows10 IDE:VSCode "@next/font": "13.1.5", "autoprefixer": "10.4.14", "eslint": "8.39.0", "eslint-config-next": "13.3.1", "next": "13.3.1", "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", "react-icons": "^4.8.0", "tailwindcss": "3.3.2" 実装のポイント ディスプレイサイズ768pix以上 ディスプレイサイズ768以下 アイコン類にhiddenが効くので非表示