VScodeで拡張機能「SFTP」を使ってサーバーにアップする手順
今回はVScodeの拡張機能である「SFTP」を使ってサーバーにアップする手順を説明します。FTP接続だけではなく、SSHを使ったSFTP接続の設定方法も紹介します。 「SFTP」を使うメリットは以下...
ー 【ウェブ制作】に関する記事
MacにHomebrewを使ってgitをインストールする手順
今回はMacにHomebrewを使ってgitをインストールする方法を説明します。 説明する環境は以下の通りです。 macOS Mojar v10.14.6Visual Studio Code v1.3...
Macにgemをインストールする流れ - Homebrew→rbenv→bundlerで管理する
今回はMacでgemをインストールして、バージョンなど管理する流れを説明します。 説明する環境は以下の通りです。 macOS Mojar v10.14.6Visual Studio Code v1.3...
gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する
gulpとはnode.jsベースで動くパッケージで、いままで面倒だった作業を自動化してくれる優れもの。今回gulp4で設定する内容は以下になります。 DartSassautoprefixer(grid...
VScodeを使う前に - おすすめ初期設定と最低限の拡張機能をセットする
VScode（Visual Studio Code）とは軽量かつ高速で動作する高機能エディタ。WindowsでもMacでも動作し、無料とは思えない機能の豊富さ、動作の軽さから多くのプログラマーから選ば...
Rellax.jsの使い方 - テキストも画像もパララックスできるプラグイン
今回はテキストも画像もパララックスできるRellax.jsの使い方を紹介します。jQueryに依存せずに使えるプラグインです。 デモページRellax.js公式サイト ※2020.03.19追記jQu...
【JavaScript】ローディング画面を実装する - 読み込み完了後にページを表示させる方法
今回はJavaScriptでローディング画面を実装する方法を紹介します。アニメーションや画像を多く使っているサイトにおすすめです。 デモサイト 前提条件は以下 jQueryは使わない画像と背景画像を読...
WEBサイト制作に使えるフォントの選び方と美しく見える設定方法
WEBサイトを制作する上で重要になってくるのがフォント選び。どの機種、どのブラウザでも同じフォントで見えることが望ましいですが、それがなかなか難しい。有料WEBフォントを使わない限り、同一のフォントで...
スクロールに応じてアニメーション！Waypoints.jsを使って動きをつける方法
スクロールさせるとアニメーションさせるjQueryプラグインはたくさんありますが、今回はWaypoints.jsを使った方法を説明します。アニメーションさせたい要素が複数ある場合や、それぞれ違う動きを...
【サイト制作】共通部分をパーツ化！効率的にサイトを作るテクニック
HTMLを使った静的サイトを作成するとき、headerやfooterなど共有部分をパーツ化することで効率的にサイトを作ることができます。ページごとにheaderやfooterを何度も書く必要がなく、共...
