Elementor #762
2020年4月18日 2020-04-27 14:52Elementor #762
フリーランスエンジニアの13ヶ月目を振り返る(2020/4月)
はじめに 1ヶ月前にエンジニア歴1年を振り返って以下のような記事を書きました。 https://terrblog.com/entry/2020/03/19/005431 振り返りをすると、自分にとって成果につながる行動がなんだったのか、客観的に見れてとても恩恵を受けられました。 コロナの影響などでフリーランスとしての立ち回りなども重要になってくると思うので、月単位で振り返りなどを行うべきだと思い。この4月の振り返りをしおうと思いました。 …
vue.jsで開閉式のメニューを作る
はじめに 久々のVue.jsですが、今回は開閉式のメニューをコンポーネントで作っていきたいと思います。下記の感じのクリックすると開いたり、閉じたりする感じのコンポーネントですね。 アコーディオンって呼ばれ方をする場合もあります。 実装パート HTML部分 …
ヘッダーナビでホバー時のアニメーションを実装する(center)
はじめに ちょうど最近やっているLPで、下記の様なヘッダーナブを作っていました。右側の部分をクリックすると、該当の部分までスクロールする系のナブですね。 動きは、右のメニューにホバー時(マウスが当たった時)に下線が真ん中からヌルッと出てくるパターンです。 実装パート 実装の手順を見ていきます。ソースコードはGitHubのリンクを貼るので、そちらで確認できます。 …
:focus擬似クラスとは
はじめに :focus擬似クラス。input:focus{ …..}みたいな使われ方をしていますね。 今日は:focus擬似クラスについて簡単に解説していきます。 :focus擬似クラスとは …
wordpressのデバッグモードを使いこなす
デバッグモードとは デバッグモードをオンにする事で、警告やエラー文を吐き出してくれます。 phpでいうvar_dumpやJavaScriptでいうconsole.log()の様な役割ですね！ 実際にwordpressに支障が出ている時の開発には必須になってきます。 デバッグモードの使い方 …
JavaScriptでライブラリを使わずにトーストを実装する
はじめに デザインコーディングの延長で、JavaScriptでトーストの実装を行う機会がありました。toast.jsなどのライブラリを使った方法もあったのですが、どれも柔軟性に欠け、思い通りに要素をいじれなかったので、ピュアなJavaScriptを使い実装しました。 完成物 ボタンを押すと緑色のトーストが出てきます。「登録完了」とかで使われるやつです。 ソースコード …
Inputタグのplaceholder、disabledの装飾
自分用の備忘録。 フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。 特に装飾していない状態だとInputタグは以下の様になります。 「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。 また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。 …
業務で使うなら知っていて欲しいHTMLの歴史
はじめに プログラミングを始めると1番最初に出会うだろう言語がHTMLです。 多くの人は半年もプログラミングに携われば、基本的なHTMLダグを覚えて使えるようになると思います しかし、業務でHTMLを使うコーダーやフロントエンドエンジニアは、タグの理解だけでは不十分だと思っています。 本記事では、HTMLを業務で使うなら知っておきたい基礎知識を自分なりにまとめました。主にコーダー、フロントエンドエンジニアとして歴が浅い人を対象に書きましたので、参考になれば幸いです。 …
vue-cliをインストールしようとしたら「gyp: No Xcode or CLT version detected!」というエラーが出て困った件
要約 ・vue-cliでローカルにvue環境を作ろうとした・npm install -g @vue/cliで「gyp: …
