まいのこマート：追従ハンバーガーメニューを実装 - Qrac BLOG
まいのこマート：追従ハンバーガーメニューを実装Closedfirst published: 2019/01/20last updated: 2019/01/31 かねてより実装して欲しいと言われていた追従ハンバーガーメニューを「まいのこマート」へ設置した。コンテンツも100を超えているので、追従メニューがないとカテゴリーの移動が不便だった。 例によってReactで既存コンポーネントを探したのだけど、良いものが見つからなかった。セッティングがコンポーネントをまたいで複雑になっていたり、中にはFontAwesomeの古いバージョンがインクルードされていたりw 個人的にはオンオフ切り替えられれば、残りはCSSで完結させるつもりだったため、大げさな仕組みは必要なかった。 最初は既存コンポーネントの書き方を参考にしたつもりが、propsやstateがundefinedになってうまくいかず。結局、Ga
Gatsby + NetlifyでWebページを作って、公開するところまでやってみた - むにえる牧場
概要 とある友人から頼まれてポートフォリオサイトを作るという案件を趣味でやることにしました。 せっかくだからReact製の静的サイトジェネレーターGatsby.jsを使って、ホスティングサービスにはNetlifyを使ってモダンな感じで作ろうと、技術選定を行いました。 (僕はReactの経験、はたまたフロントエンドの経験全然ないです) 今回は、 Gatsbyを利用してジェネレート Netlify上でサイトを公開する まで備忘録として書き残します。 Gatsbyとは GatsbyJS Node.js環境で動作するWebサイトジェネレーター 静的サイトを製作することに特化している React Webpackとモダンな技術てんこ盛り PWA(Progressive Web App)として生成することもできる どんなに適当に作っても爆速で動作する設計になっている(らしい) とメリットだけ見ると良い感
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
Gatsby.js で Sass .sass .scss を使う
Gatsby で CSS を扱う方法は様々ありますが、伝統的な Sass を使ったコーディングをすることもできます。 https://www.gatsbyjs.org/packages/gatsby-plugin-sass/ まず必要なプラグインを二つインストールします。
Gatsbyでreact-helmetを使用しmetaタグを設定する
SEOコンポーネントを作成 metaタグを管理する為のコンポーネントを作成する。僕の場合、Gatsbyのスターターテーマであるgatsby-starter-defaultをベースに作っている。このテーマ内にSEOコンポーネントというmetaタグを設定するコンポーネントが存在しreact-helmetを導入済みため、特に変更する必要はなかったのでそのまま使用する。 2019/6当記事執筆時点では下記のようなコードとなっている。 import React from "react" import PropTypes from "prop-types" import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" function SEO({ description, lang, meta, k
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
