全てのコンテンツ

JavaScript

【JavaScript】記号や文字列をエンコード・デコードする方法

URI(URL…

続きを読む
2021年06月05日10 分
Gatsby

【Gatsby】Netlifyのbuildが約11分から約1分30秒に短縮

Gatsbyjs でブログを作成する度に、Netlify で build するようにしています。 コンテンツの量が増えると、build 時間がかかるようになり、先日 1 回の build 時間が 10 分を超えてしまいました。 Netlify の無料 build 時間は 30…

続きを読む
2021年06月04日5 分
Shopify

【Shopify】無料テーマのスライダーが、おかしな挙動をするので修正する

Shopify の無料テーマである Debut や Brooklyn などは、スライダーをセクションに追加することができます。 ウェブサイトを閲覧していても、スライドが自動に切り替わる度にスライダーの画面に戻されてしまうこと、ありませんか? 今回は、Shopify…

続きを読む
2021年06月03日10 分
HTML&CSS

CSSで、特定のセクションのみ左右のスペースをなしにする方法

通常は、サイトの左右にスペースがある状態にしたいけれど、特定のセクションのみ横いっぱいに広げたいこと、ありませんか? 今回は、特定のセクションのみ左右のスペースをなしにする方法を紹介します。 例えば、次の画像のレイアウトがあるとします。 このレイアウトは、左右に margin…

続きを読む
2021年06月02日10 分
Gatsby

【Gatsby】Google Analyticsを設定する方法

制作したウェブサイトの情報を調べる時、 Google アナリティクス を利用すると、流入経路やコンバーションなど様々なことがわかるようになります。 今回は、Gatsbyjs で Google アナリティクスを設定する方法を紹介します。 Google…

続きを読む
2021年06月01日15 分
HTML&CSS

CSS Gridレイアウトでコンテンツに合わせてサイズ指定をする方法

前回は、Grid レイアウトで Grid エリアを使ってコンテンツを配置する方法を紹介しました。 今回は、Grid レイアウトでコンテンツに合わせてサイズ指定をする方法を紹介します。 基本のコードは、以下になります。 サイズを固定する方法は、 grid-template-rows…

続きを読む
2021年05月31日10 分
HTML&CSS

CSS Gridエリアを使ってコンテンツを配置する

前回は、Grid レイアウトでコンテンツの位置を調整する方法を紹介しました。 今回は、Grid レイアウトで Grid…

続きを読む
2021年05月30日10 分
HTML&CSS

CSS Gridレイアウトでコンテンツの位置を調整する

前回は、Grid レイアウトで作成したコンテンツの中に、さらに Grid レイアウトでコンテンツを作成する方法を紹介しました。 今回は、Grid レイアウトでコンテンツの位置を調整する方法を紹介します。 こちらを使用することで、グリッドの中一杯に広がっているコンテンツを、Grid…

続きを読む
2021年05月29日15 分
HTML&CSS

CSS Gridレイアウトの中に、さらにGridレイアウトでコンテンツを作成する方法

前回は、Grid レイアウトでコンテンツを自由に配置する方法を紹介しました。 今回は、Grid レイアウトで作成したコンテンツの中に、さらに Grid レイアウトでコンテンツを作成してみます。 基本のコードは、以下になります。 左上のコンテンツに、a から d…

続きを読む
2021年05月28日10 分
HTML&CSS

CSS Gridレイアウトでコンテンツを自由に配置する方法

前回は、Grid レイアウトの縦並びと横並びを紹介しました。 今回は、グリッドの線を使いグリッドの位置を指定して、コンテンツを配置する方法を紹介します。 こちらを使用することで、コードの記述順に囚われずにコンテンツを配置することができます。 グリッドの線の考え方 例えば、行が…

続きを読む
2021年05月27日15 分