Vue.js
【Vue】1つのコンポーネントに複数のtemplate
tanatiyo
Vue.js Vue.jsを勉強するなかで出会ったlodash（便利な関数を提供してるライブラリ）
vueの勉強を始めた当初、たにまこさんのYouTubeで勉強させてもらいました。投稿は3年前で、バージョン2の時の書き方で、CDNを使った書き方になりますが、vueがどういった挙動をするものか把握したくて、これをみながらとりあえず触ってみま...
Vue.js Vue.jsの挙動を確かめる。。。LocalStorageでデータを保存
Vue.js単体では、サーバー機能がないので入力したデータはブラウザをリロードすると消えてしまいます。。こんなときに、LocalStorageという方法でデータを保存し（自分のPCだけですが）リロードしてもデータが消えないという、便利なもの...
Vue.js Vue.jsのメソッド（関数）・・・mounted
勉強中にmountedというメソッドが出てきたので、少し調べてみました。公式サイトではこのように言ってます↓他にこちらのサイトも参考にしました。。mounted・・・ vueのマウント直後に一度だけ実行される処理を書きたい場合、mounte...
Vue.js Vue.jsのお勉強
最近、vueの勉強を始めました。久々にガッツリと学習の時間を取り始めたのでブログのほうも久々にアウトプットの場として利用していきたいと思います。
Vue.js Vue.jsの勉強（アウトプット用）
Web制作全般 どの分野に進みたいのか正直迷っていた件
久々の更新になります。やりたいこと色々ありすぎて、アーカイブで勉強することにも終われ案件対応や営業にも追われてブログ更新を疎かにしてしまっていました(⌒-⌒; )さて、今日のお題は「どの分野に進みたいのか正直迷っていた件」です。結論から先に...
コーディングストック CodePenをブログに初導入！
これからコードの練習やストックをしていくのに、CodePenを活用していこうと思います！やっと導入することができました！ See the Pen FirstDemo by tanaka (@tiyopon) on CodePen.とりあえず...
Web制作全般 マシン(PC)をWindowsからMacに切り替えた時、Node.js 18でOpen SSL互換対応エラーに直面しました
この度新しくメインマシンをWindowsからMacに切り替えようとして、新しく一からgulp環境構築した時に出会ったエラーについて書きます。今回は、Node.js18.12.1のバージョンをインストールしてMacBook Air (macO...
Web制作全般 契約書の割印と契印
さまざまな制作会社様とやりとりを重ねることで、契約の仕方はそれぞれだと感じました。どういった形で契約書を交わしていくのかは、基本的に会社様のご意向をお聞きしながら進めます。契約書を作るのに手が回らないとおっしゃる会社様には、場合によっては私...
Photoshop とりあえずPhotoshopに慣れる！
デザインツールはいろいろありますが、一旦キナリさんのBrainに沿って進めるため、ツールはPhotoshopをメインで触っていこうと思います。（※もしコーディング案で違うツールを触ることがあればそのツールも時間を少し設けて深ぼって勉強してい...
デザインの勉強 キナリさんのBrain を購入しました！
デザインの勉強って、調べてみるといろんなロードマップがあります。コーディングの勉強や改善を行いながら、デザインも勉強していくには「絞って勉強」した方が良さそうだと感じました。そこでどういったロードマップを選択しようか悩んでいたところ、偶然に...
デザインの勉強 デザインの勉強を少しずつ開始していきます！
実案件では、AdobeのXD,Photoshop、Illustratorのデザインカンプをいただき、初めて扱うデザインツールもありましたがなんとか調べながら、コーディングに必要な最小限の使い方を覚えました。しかし、やっぱり苦手感は拭えないで...
jQuery 【jQuery】プラグイン「ONEBOOK3D」を使ってページをめくる実装をしてみました
ちょっとしたお話から「電子カタログのページをめくる実装」についてお話をいただき、色々と調べてみると面白そうなものを見つけたのでデモを作ってみました。jQueryのプラグインで作れるので手軽です！デモは公式サイトからとってきたデモにフリー素材...
WordPress 【WordPress】WordPressサイト制作の効率化とデキル制作者を目指して
実案件を通す中で自身の課題を感じていましたが、そのうちの1つにWordPress案件の生産性の向上です。何かヒントを得たくて、この度じゅんぺーさんとまさたさんのBrainを購入しました。じゅんぺーさんは、ブログでもWordPressに関して...
WordPress 【WordPress】カスタムフィールドを実装するのに「Custom Field Suite」プラグインを使った(知った)話
学習段階ではカスタムフィールドと言えば「Advanced Custom Fields！！」というくらい、よく目にしていたプラグインですが実はこちらのプラグインでは無料版のままでは「繰り返しフィールド」の実装ができません。「繰り返しフィールド...
Git GitBashでpushしたのに突然「ssh接続できていません」と表示-ネット接続切れただけ-
順調にGitでcommitとpushが出来ていたのに、突然pushが出来なくなりました（commitは出来ていました）。エラー文は、「ssh接続できない」「リモートリポジトリないよ」って言ってます。だけど「git remote」で調べたらち...
WordPress 【WordPress】カスタムフィールドをプラグインなしで実装する～サイトまとめ～
カスタムフィールドをプラグインを使って実装する方法は知っていたのですが、サイトスピードや保守・運用の面から、極力プラグインに頼らずに実装したいということもあるかと思います。そういった時には、functions.phpにコードを書いていくこと...
WordPress 【WordPress】同一ページ内にフォームを埋め込み、自動返信メールでタイトルタグを引用する方法
標題の件で、参考にしたサイトも含めてやり方を整理しておこうと思います。使うフォームはMW WP FORMというプラグインです。今回調べてみて、バシッとそのままあてはまる方法には出会えなかったのですが、参考サイトもヒントになったので載せておき...
WordPress 【WordPress】管理画面にてユーザー（投稿者）が他のユーザー（投稿者）の編集画面を見れないようにする
functions.phpに以下を貼りつける。ユーザーを「寄稿者」で設定して試してみたら、うまくいきました。参考サイトをそのままマネしました。標題の件で参考にした記事を下部に貼り付けておきます。
CSS flexboxのレスポンシブ対応で可変にしたくないアイテムのCSS指定
display: flex;で指定した子要素にあたるものの幅を可変にしたくない時ってありますよね。例えば画像とテキストが横に並んだメディアと呼ばれるようなものです。画像とテキスト部分をそれぞれFlexアイテムとして、flexboxの子要素と...
JavaScript selectタグの初期値の色だけ変更する実装方法
私はこの実装にすごく苦労しました。調べるとCSSで実装できる情報がたくさん出てくるのですが、最後までCSSでは実装出来ませんでした。このあたり、時間があればしっかり調べたいです。最終的には、下の参考サイトに載せている、のせっちさんの記事を参...
Web制作全般 FTPツールを使ってファイルをサーバーにアップロードする
しょーごさんのレビューを受ける時、【中級編】までは、ブラウザでconohawingのサーバーにログイン後、ファイルアップロードをドラッグアンドドロップでupしておりました。しかし今回【中級Ex】まできたので、今回からはFTPツールを使って実...
Web制作の勉強 flatpickrでplaceholderの実装エラーで得た経験
flatpickrで、カレンダーを実装しようとした際に、表現したい文言にならず「年/月/日」とずーっと入っていて調べてみたり、いろいろいじってみても、placeholderについての記述があまり出てこない・・・もしかして、皆そんなに悩まずに...
デザインカンプからのコーディング【練習】 デザインカンプからのコーディング練習-ピクセルパーフェクトチェック-
デザインカンプからのコーディング練習で、作業も大詰めを迎えるころ、ピクセルパーフェクトを目指してデザインと見比べて細かな調整をしていくと思います。コーディングの練習をここまでしてきて、少しずつ慣れてきましたが、中級編を終えるころ、私の中で2...
JavaScript JavaScriptのaddEventListnerでエラー発生
モーダルウィンドウの開閉操作でエラー発生し、ボタンで動作させるつもりがヘッダーナビゲーションのリンクをクリックするだけでモーダルが開いてしまう事態に・・・・イベントバブリングやイベントオブジェクトあたりが怪しいとふんで時間をかけて取り組んで...
CSS GoogleMapをレスポンシブ対応させた時に出た余白の解決方法
Googlemapをレスポンシブ対応でcssを充てている時に、お手本になぞらえてコードを書いたつもりが、地図の下のほうに大きな余白が空いてしまいました・・・通常、ググって辿り着いた情報だと以下のようなパターンになっていることが多いです。一応...
CSS レスポンシブ対応を少しでも楽にしたい【フォント編】
コーディングに時間がかかってくるところの一つに、レスポンシブ対応があります。モバイルファーストという言葉があるくらい、スマホでの見え方は検索エンジンに見つけてもらうためにもレスポンシブ対応は必須の作業となっています。そんなレスポンシブ対応で...
Git gitをサブマシンでcloneしてpushするまでの流れ【メモ用】
Githubを用いてソースコードを管理していますが、今回はいつも使っているPC(メインマシン)からではなくそれ以外のPC(サブマシン)で作業してみてうまくpushまでいけたので、メモをしておきます。①Githubの該当するリポジトリまでアク...
Git GitHub Flowを参考に個人開発用(自分用)としてGitHubを活用
以前にGitHub Flowについて書いた記事がありましたが、あれはチーム開発用らしく個人用にはforkなどの機能が使えませんでした。そのため、改めてここで流れを一から整理しなおすことにします。【前提条件】既にGiHub上にリポジトリを作成...
Git GitHub Flowとは【勉強用メモ】
勉強用メモです。(以下参考サイトより)GitHub Flowではメインのmasterブランチと機能開発のためのfeatureブランチの2つのみのシンプルな構成【流れ】①開発リポジトリをfork(※プロジェクト画面右上「Fork」ボタンから)...