Elementor #762

v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
JavaScript Vue.js

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

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

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (21)
HTML・CSS

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

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

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (21)
HTML・CSS

:focus擬似クラスとは

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

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (6)
PHP WordPress

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

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

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (22)
JavaScript

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

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

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (21)
scss HTML・CSS

Inputタグのplaceholder、disabledの装飾

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

Read More

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

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

Read More
macbookpro
エンジニアリングライフ HTML・CSS

web制作案件で「ありがちな場面」と「その際に有効な記事」まとめ

qiitaに書いたので、コチラを参考にしてください。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

vue-cliをインストールしようとしたら「gyp: No Xcode or CLT version detected!」というエラーが出て困った件

要約 ・vue-cliでローカルにvue環境を作ろうとした・npm install -g @vue/cliで「gyp: …

Read More
macbookpro
エンジニアリングライフ

macでのプログラミングを楽にする小技チートシート[WIP]

普段の開発の時によく使う小技をチートシートの様にまとめました!(WIP笑)macの場合に限りますが、自分メモも兼ねてどんどん足していきます。 ページ内検索 ドキュメントを読んでる時に、この用語でgrepしたいって時などに使えます google chromeの場合です。 …

Read More
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping