ナコさんのブログ | nako-log WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。

注目キーワード

CATEGORY coding

coding CSS

compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに対処法
compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに…

  • 2021.05.25

さてさて、今日もコーディングがんばりますか！ とタスクランナーを動かすと見慣れぬエラーが…。どうやらcompasのベース部分の書き方で怒られているみたい。 ううむ、他案件でアップデートしたからかな、古い案件…

続きを読む
coding

【コピペOK】１分で完成！「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメーションを実装しよう！
【コピペOK】１分で完成！「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメ…

  • 2021.02.02

１分で実装できる「ScrollReveal.js」。「ScrollReveal.js」ライブラリを使ってコピペで簡単に今流行のスクロールアニメーションができるようにまとめました。サンプルもあります。

続きを読む
coding

【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう。
【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう…

  • 2021.02.01

数字をカウントアップするアニメーションはサイト制作で視覚的に数字を表現する時によく使われる手法です。 ■brotherのサイト 企業サイトでも数字で見る○○というページによく使われていますね！ アニメーションがあ…

続きを読む
coding
  • 2020.12.24
  • 2020.12.24

glupしたらcompassエラー「Error: spawn /usr/local/bin/compass ENOENT」で動かないときの解決法
glupしたらcompassエラー「Error: spawn /usr/local/bin/comp…

  • 2020.12.24

古いBOXから生成したプロジェクトのglupが動かなかったので解決法のメモです。 久しぶりに起動したプロジェクトのSCSSをビルドしようとすると以下のエラーが… events.js:183 throw er; // Unhandled ‘error&#…

続きを読む
coding

CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法
CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法

  • 2020.08.06

CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました！ 複数ページにも対応しています。 今回の困った問題点 SVGをアニメーションする時に各パーツにクラスを作成しアニメーションさせ…

続きを読む
coding

centos/7+Vagrant+VirtualBoxでrsyncが失敗する解決法(There was an error when attempting to rsync a synced folder.)
centos/7+Vagrant+VirtualBoxでrsyncが失敗する解決法(There wa…

  • 2020.07.31

centos/7+Vagrant+VirtualBoxでローカル環境中にrsyncでエラーが出て詰まったので解決法です。 なんとも毎回なんだかのエラーに捕まっている気がします。 エラー内容 ターミナル表示 There was an error when attem…

続きを読む
coding CSS HTML WEB制作のヒント

【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで使おう！
【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで…

  • 2020.07.22

かっこいいタイトルを画像じゃなくフォントで表現したい！ 注目させたい見出しの書体を変えたい！ サイト全体をどの環境でみても同じフォントで表現したい！ そんな時に便利なのがWEBフォントです。 大丈夫！！ 今…

続きを読む
coding

VirtualBoxをアップデートしたらvagrant upエラーが出たときの解決法
VirtualBoxをアップデートしたらvagrant upエラーが出たときの解決法

  • 2020.06.16

VirtualBoxを起動したら催促されるアップデートの誘い…しかしvagrantのバージョンと相性があるようです。 わたしは最新の 6.1.10へアップデートし、vagrant upしようとすると以下のエラーが…。 No usable default p…

続きを読む
coding

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル
【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

  • 2020.06.12

会話形式の吹き出しデザインのバリエーションを増やしたい！ 無機質なんは嫌や…カラフルにたのしくするんや。 考え中の吹き出しがほしい！ そんな訳で色も形も自分好みにして楽しい会話を演出する為のベースを作成…

続きを読む
coding

ターミナルからSSH接続しようと思ったら「 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!」が出たときの対処法
ターミナルからSSH接続しようと思ったら「 WARNING: REMOTE HOST IDENTIF…

  • 2019.09.20

こんにちわ！ナコです。 macのターミナルからSSH接続しようと思ったらSSH接続エラーがでたのでその対処法です。 入力したコマンド $ ssh -L ○○○@▲▲▲.co.jp -p 22 ポート　　22 サーバー　▲▲▲.co.jp ユーザー名　 ○○…

続きを読む
coding

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル
こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

  • 2019.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。 ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい！！！ そんな思…

続きを読む
coding

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  • 2019.06.27

話題になっているネタを厳選して並べたい 自分のツイートで特定のタイムラインだけ抜粋したい・・・ twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは１件しか引用できないので自由自在…

続きを読む
coding

HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタ…

  • 2019.06.21

会話方式で記事の導入を書きたい！！ 他のブログさんで会話方式やってらっしゃるのを見て、 「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。 自分視点が多くなるブログで、 他人のツッコミ風に使…

続きを読む
coding

webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエラー出るようになったのでpackage.jsonへ移動する
webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエ…

  • 2019.06.17

webpackを入れ直してコンパイルするとautoprefixerでエラーが出るようになったので解決方法です。 エラー内容 Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.jso…

続きを読む
1 2