m's blog

備忘録とかメモとか

「新型コロナウイルス 世界の感染状況」サイトを作ってみました

今回は、「新型コロナウイルス 世界の感染状況」サイトを作成したので、簡単に使い方や機能などを紹介したいと思います。 国内の感染状況については、以下のページをご覧ください

【CSS】オシャレな折りたたみメニューを作ってみる / ベース編【CSSアニメーション】

今回はCSSを使って、オシャレな折りたたみメニューを作ってみたいと思います! 最初に、ベースとなるサンプルとコードを紹介した後、カスタムパターンをいくつか紹介していきます。

【CSS】スイングする画像をCSSで作ってみる!【CSSアニメーション】

今回はCSSを使って、振り子のようにゆれる画像を作ってみたいと思います! 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て気になるものがあ…

【CSS】窓のようにひらくテキストをCSSで作ってみる!

今回はCSSを使って、窓のようにひらくテキストを作ってみたいと思います! 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て、気になるものが…

【CSS】アニメーションで動く見出しをCSSで作ってみる!

今回は、CSSを使って見出しにアニメーションをつけてみたいと思います! 最初に、ベースとなるCSSコードを紹介した後、アニメーションのパターンをいくつか紹介していきます。

【CSS】付箋風の見出しをCSSで作ってみる!

今回は、付箋風の見出しをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。

【CSS】はてなブログでCSSデザインを使う方法【比較編】

今回は、以下の2つの記事で紹介した 「はてなブログでCSSを使用する方法」を比較 したいと思います。 はてなブログの各記法で、使用可能なCSSの適用方法を比較 していきたいと思います。 今回、検討する記法は以下の4つです。 見たまま(HTML編集) HTML は…

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

今回は、「Googleタグマネージャー」を使って、はてなブログでCSSデザインを使用する方法 を紹介したいと思います! CSSデザインは、はてなブログでの設定からでも使用できますが、Googleタグマネージャーを使うと、適用先を詳細に切り分けたり、CSSを一か所…

【CSS】はてなブログでCSSデザインを使う8つの方法

今回は、はてなブログでCSSデザインを使う8つの方法 を紹介します! はてなブログにCSSデザインを追加する方法はいくつかありますが、今回はその中でも、比較的簡単な、はてなブログの設定項目からCSSを追加する方法 を紹介します。 Googleタグマネージャー…

【ブログ向け】CSSセレクタ入門【応用編】

前回は、CSSセレクタの中でも、使用頻度の高い「基本のセレクタ」について解説してみました。 今回は、より詳細なカスタマイズのための「応用セレクタ」 を紹介したいと思います。

【ブログ向け】CSSセレクタ入門【基本編】

今回は、「CSSセレクタ」 について解説していきたい思います。 主に、ブログでCSSデザインを導入する場合を想定 して、基本編・応用編の2回に分けて解説を進めて行きます。 今回は、基本編として、CSSセレクタについて簡単に解説した後、よく使う「基本のセ…

【CSS】ブラウザでブログ構成要素のクラスやIDを確認する方法【ブログ向け】

お使いのブログでCSSが使用可能な場合、ブログ構成要素のクラス名やID名を確認できれば、手軽にデザインをカスタムすることができます。 今回は 「ブラウザでブログ構成要素のクラス名やID名を確認する方法」 を紹介します。

【CSS】吹き出しデザインをCSSで作ってみる!

今回は、吹き出しデザインをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。

【MongoDB】Dockerを使ったMongoDBテンプレートを作ってみました【定期バックアップ付き】

Docker を使った、ローカル環境用の MongoDB テンプレート を作ってみたので、簡単に紹介したいと思います! 2020/07/16 時点でテンプレートに含まれる内容は以下の通りです。 MongoDB Mongo Express 定期バックアップ用コンテナ MongoDB コンテナの設定には…

【Neo4j】Dockerで試すNeo4j【第6回/JavaScript編 その3】

今回は、「Dockerで試すNeo4j」シリーズの最終編となります。 ここまで構成・実装した環境とコードを使って、登録されたPersonのFOLLOWリレーションをグラフ表示してみたいと思います。 ↓ 「Dockerで試すNeo4j」シリーズ記事一覧はこちら

【Neo4j】Dockerで試すNeo4j【第5回/JavaScript編 その2】

今回は、前回実装したターゲット選択用のセレクタを使って、特定のPersonとFOLLOW関係があるPersonを検索するコードを追加していきます。 また前回同様、アプリの作成を通して、JavaScriptとNeo4jの連携について解説していきたいと思います。 ↓ 「Dockerで試…

【Neo4j】Dockerで試すNeo4j【第4回/JavaScript編 その1】

JavaScript(React+TypeScript)とNeo4jの連携環境をセットアップし、ターゲット選択用のセレクタを実装します。

【Neo4j】Dockerで試すNeo4j【第3回/検索編】

Neo4jを使う上でデータ検索の要となる、「MATCH」クエリの使い方を解説しています。

【Neo4j】Dockerで試すNeo4j【第2回/データ追加編】

前回は、Dockerを使ったNeo4jのセットアップとユーザの作成について解説してみました。 今回は、「Dockerで試すNeo4j」シリーズで使用するデータを追加し、MATCHクエリを使って追加したデータを簡単に確認してみたいと思います。 ↓ 前回の記事はこちら

【Neo4j】Dockerで試すNeo4j【第1回/セットアップ編】

Neo4jは、最も人気のあるオープンソースのグラフデータベースです。 このシリーズでは、Dockerを使って、Neo4jを試していきたいと思います。 今回は、Dockerを使ったNeo4jのセットアップとユーザの作成について解説していきたいと思います。

「Dockerで試すNeo4j」シリーズ記事一覧

公開済みの「Dockerで試すNeo4j」シリーズの記事リストです。

【CSS】付箋風ボタンをCSSで作ってみる!

今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。

【CSS】布地風ボックスをCSSで作ってみる!

今回は、布地風ボックスをCSSで作る方法を紹介したいと思います。 まずはベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。

React向けのフローティングボタンコンポーネントを作ってみました!

フローティングボタン用のコンポーネント を作ってみたので、簡単に解説したいと思います。 タイトルは「フローティングボタン用の...」となっていますが、ボタン以外でも使えます。 一応、パッケージとして公開してみましたが、簡単なものなので、記事中の…

簡単セットアップ!Netlifyにステージング環境を追加する方法

Netlify にステージング環境を追加する方法を解説します。

Netlify に独自ドメインを設定する方法

Netlify に独自ドメインを設定する方法を解説します。

Netlify + GitHub 環境で簡単にサイトを公開する方法

Netlify + GitHub 環境で簡単にサイトを公開する方法を解説します。

【React】styled-components を試してみる!

今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.

npm パッケージの公開用テンプレート を作ってみました。 本記事ではテンプレートの内容について、簡単に解説したいと思います。 以下は、2020/07/09 時点でテンプレートに含まれる内容です。 TypeScript CI/CD (publish by GitHub Actions) Jest ESLint Pre…

【GitLab】GitHubリポジトリをGitLabプロジェクトにインポートする方法

GitLab プロジェクトに GitHub リポジトリをインポートする方法を解説します。