WEB制作 - gatch.site

Cloud RunでNuxt.js動かす時のハマりポイントと解決策[GCP+ Nuxt+Docker-compose]

2020/06/21

Vue.jsのフレームワークNuxt.jsを使ってみたい。無料で使えるGoogle Cloud Run 環境にデプロイして使いたい。そんな方に向けた内容です。実際に実装してみてハマった内容をまとめています。nux.config.jsonの設定など

web

CSSだけでレスポンシブ対応したサイトを作る考え方とルール[flexboxを理解しよう]

2020/06/20

レスポンシブ対応した WEB サイトを作りたい。CSS だけでレスポンシブ作りたいけれど、どう考えたら良いのか分からない。。。そんな方への内容です。cssをコーディングする際の考え方や具体的なサンプルなどを紹介しています。

web

スクロール画面内に入ったらアニメーションさせる[たった13行で実装]

2020/05/31

画面の中に入ったら画像を表示したい。スクロール量によって表示を切り替えたい。そんな方に向けた内容です。Intersection Observer APIを使った実際のサンプルを載せています。

web

ゼロから始めるWEBの基礎[これからITを目指す人へ]

2020/05/09

「未経験からIT業界へ転職したい」「WEBの知識を勉強したい」そんな方へ向けた内容です。専門知識なしでも分かるようなインターネットの仕組み、WEBサイトの仕組み、必要なファイルなどをまとめています。

web

【node.js】Cloud FunctionsをローカルのDocker環境で実行して開発する方法

2020/03/29

Cloud Functionsをローカル環境で実行する方法を紹介しています。またdokcer-composeとcloudbuildの設定ファイルも掲載しています。

web

CSSタブメニューのコピペサンプル５選【レスポンシブ対応】

2020/01/22

CSSでタブメニューをデザインしたい。できればレスポンシブ対応したタブメニューを作成したい。そんな方へ向けた内容です。 WEBサイトでよく使用するタブのサンプルを紹介します。cssだけでレスポンシブ対応したい人に向けたないようです。

web

ぬるっと動く！CSSホバーアニメーション７選[コピペあり]

2020/01/22

CSSでhover(ホバー)のアニメーションを作成したい。hover(ホバー)時にアニメーションするボタンを作成したい。サムネイルの画像をhover(ホバー)させた時にアニメーションさせたい。そんな方へ向けた内容です。コピペサンプルとデモを確認できますので、確認してぜひ使ってもらえたらと思います。

web

こんな簡単？SNSシェアボタンの設置とカスタマイズまとめ[LINE/Twitter/Facebook/etc]

2020/01/21

SNSシェアボタンを設置したい。せっかくならデザインにこだわりたい。そんな方へ向けた内容です。主要なSNSであるFacebook・Twitter・LINE・はてなブックマーク・PocketとURLをクリップボードにコピーするコードも載せています。ボタンに見せるちょっとしたcssアニメーションも紹介してますのでぜひ使ってみたください。