TerryBlog

2020年4月24日

vue.jsで開閉式のメニューを作る

はじめに久々のVue.jsですが、今回は開閉式のメニューをコンポーネントで作っていきたいと思います。下記の感じのクリックすると開いたり、閉じたりする感じのコンポーネントですね。アコーディオンって呼ばれ方をする場合もあります。実装パート HTML部分 …

HTML・CSS

2020年4月22日

ヘッダーナビでホバー時のアニメーションを実装する(center)

はじめにちょうど最近やっているLPで、下記の様なヘッダーナブを作っていました。右側の部分をクリックすると、該当の部分までスクロールする系のナブですね。動きは、右のメニューにホバー時(マウスが当たった時)に下線が真ん中からヌルッと出てくるパターンです。実装パート実装の手順を見ていきます。ソースコードはGitHubのリンクを貼るので、そちらで確認できます。 …

HTML・CSS

2020年4月21日

:focus擬似クラスとは

はじめに :focus擬似クラス。input:focus{ …..}みたいな使われ方をしていますね。今日は:focus擬似クラスについて簡単に解説していきます。 :focus擬似クラスとは …

PHP WordPress

2020年4月17日

wordpressのデバッグモードを使いこなす

デバッグモードとはデバッグモードをオンにする事で、警告やエラー文を吐き出してくれます。 phpでいうvar_dumpやJavaScriptでいうconsole.log()の様な役割ですね！実際にwordpressに支障が出ている時の開発には必須になってきます。デバッグモードの使い方 …

JavaScript

2020年4月16日

JavaScriptでライブラリを使わずにトーストを実装する

はじめにデザインコーディングの延長で、JavaScriptでトーストの実装を行う機会がありました。toast.jsなどのライブラリを使った方法もあったのですが、どれも柔軟性に欠け、思い通りに要素をいじれなかったので、ピュアなJavaScriptを使い実装しました。完成物ボタンを押すと緑色のトーストが出てきます。「登録完了」とかで使われるやつです。ソースコード …

scss HTML・CSS

2020年4月10日

Inputタグのplaceholder、disabledの装飾

自分用の備忘録。フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。特に装飾していない状態だとInputタグは以下の様になります。「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。 …

2020年4月10日

業務で使うなら知っていて欲しいHTMLの歴史

はじめにプログラミングを始めると1番最初に出会うだろう言語がHTMLです。多くの人は半年もプログラミングに携われば、基本的なHTMLダグを覚えて使えるようになると思いますしかし、業務でHTMLを使うコーダーやフロントエンドエンジニアは、タグの理解だけでは不十分だと思っています。本記事では、HTMLを業務で使うなら知っておきたい基礎知識を自分なりにまとめました。主にコーダー、フロントエンドエンジニアとして歴が浅い人を対象に書きましたので、参考になれば幸いです。 …