フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。
webのこと
CSSでつまづきやすいポイント
一昨日
CSS始めた際に、つまづきやすいポイント解説
luxonを使って「1日前」表記の公開日を表すReactコンポーネントを作る
5 日前
日付ライブラリ最近luxonを使うようにしました。もともとmomentをよく使っていたのですが、他のライブラリが推奨されているので。
Mentaで1年間メンターとして教えてみて
2022年4月11日
Mentaを使って1年ほど経ちました。色々と気をつけたいことや、今後について残しておきます。
npmにJavascript、Typescriptのプラグインやライブラリを公開する時にやることメモ
2022年4月11日
npm公開時のやってること、import,export周り、package.json周りのメモ
Typescriptでkeyof CSSStyleDeclarationをケバブケースも合わせて対応する
2022年4月6日
cssのプロパティの文字列を型として定義したい場合にCSSStyleDeclarationを使ってケバブケースも合わせて対応する方法メモ
Github Actionsを使ってnpmへパッケージを自動リリースする
2022年4月5日
いくつかnpmへのパッケージを公開しているのですが、今回公開しているプラグインのリファクタリングを行ったので合わせて自動でリリースする仕組みを導入しました。
Markdownの中に、Reactコンポーネントを使用できるようにする
2022年2月25日
markdownで返ってくる文字列を、unifiedを使って、オリジナルの任意のコンポーネントに差し替えるようにしました。
フリーランスになったときに失敗したこと
2022年1月14日
フリーランスになってから7年ほど立ちました。これからフリーランスをやりたいと言う人のために、始めたときに苦労したところや失敗したところを書いておこうかなと思います。
User CSSを使ってサイトのCSSを上書きして見やすくする
2022年1月13日
よく使うサイトなのに、使い勝手がたまにスマホ版にしか対応していなかったり、サイトが崩れてしまっている場合など、自分でUserCSSを設定することで解決することができます。
VScodeで使える便利な正規表現での検索・置換
2022年1月11日
VScodeで、特定文字内の文字列を検索や置換をするときに毎回調べたりしていたので、メモとして残しておこうかと思います。
見出しタグから目次を作るJavascript(Typescript)
2022年1月5日
ブログを書くときに、目次を毎回自前で書いたりするのが大変なので、見出しをみて自動で作るJS(TS)を書いてみました。
サイトを公開した際にやっておきたいこと
2022年1月4日
「Google Search Console」「Google analytics」「Google Tag Manerger」を導入して、「Google Lighthouse」でチェックしておきたいですね!
microCMS × Reactで吹き出しで会話してるUIを作る
2021年12月29日
microCMSとReactでカスタムフィールドを使って、Wordpressのプラグインなどでよくある吹き出しで会話しているみたいなUIを作ってみました。
HTML,CSSを覚えたあとにこれだけでも覚えておくと便利なJavascript
2021年11月22日
JavascriptでHTMLに特定のクラス名を付与して、付与したクラスに対してCSSを当てることでいろいろなものを再現する
CSS学ぶ上で便利なチートシート
2021年11月16日
CSSを学んでいく上で、いくつか迷うところがあります。チートシートとして公開されている記事がいくつかあるのでご紹介
marginを使った知っておくとお得なテクニック
2021年10月18日
普段よく使うmargin、あいだを開ける以外にも中央寄せや右に寄せるなど、知っておくと役立つ
microCMSで改善して欲しいポイント
2021年10月13日
microCMSさんすみません。。便利なサービスではありますが、一ヶ月ぐらい使っていて、ここ直してほしいなぁ。。というところがいくつかありましたので書いておきます。
【LightHouse Performance 100点を目指した】scriptをユーザー操作があってから遅れて読み込むことでスピード改善
2021年10月11日
Google AdsenseやTwitter Widgetで外部のjsを読み込んだらLightHouseのPerformanceが20点ぐらいまで下がってしまったので対策しました。
NextでカテゴリなどgetStaticPropsを使って共通で定義したいけどできなかったので、別の方法での解決策
2021年10月4日
_app.tsxでgetStaticPropsを使って共通化すれば良いかなと思ったのですがpages内でしか使えないようなので一工夫しました。
NextとmicroCMSでの「前の記事」「次の記事」の実装方法
2021年9月28日
microCMSで「前の記事」「次の記事」を取得するのに少し工夫する必要がありましたのでメモ!
ブログでSEO対策に大切なJSON-LD
2021年9月27日
ブログで使えそうなJSON-LDを書きました。SEO対策としても正しく設定しておきたいですね。
Next.js × microCMSでページング「react-paginate」を使っての実装方法
2021年9月21日
「react-paginate」を利用すると、リストの合計と現在のページを設定すると処理をあまり気にせず、シンプルなHTMLを吐き出してくれるので便利。
【模写・Photoshopデータ配布】パララックス効果を使ったサイト作成「full bloom」
2021年9月20日
母の日モチーフショッピングキャンペーンサイトのイメージサイトです。専門学校でパララックス効果を使ったサイト作成の課題を出しています。自分としても作ってみようと思い制作しました。作っていたサイトデータをダウンロードできるようにしました。自由にお使いください。
web制作を勉強する時に、おちいりがちなミス・考え方
2021年9月14日
プログラム・web制作をを勉強する上で大切な考え方や姿勢について。やっちゃいけない考え方。
画像圧縮3種の神器「ImageAlpha」「ImageOptim」「JPEGmini」
2021年9月13日
png、gif、jpgでそれぞれ圧縮して軽くなるように3つのソフトを使い分けています。それぞれの使い方を解説。
Vercelとムームードメインで独自ドメインの設定方法
2021年9月8日
昔っからムームードメイン(MuuMuuDomain)を使ってるのでその流れvercelでのドメイン設定方法のメモ
Google Search Consoleにサイトを登録する(ムームドメイン)
2021年9月7日
Google Search Consoleにサイトを登録するやり方について(ムームドメイン・MuuMuuDomain)
フロントエンドやデザインを教えるメンター(Menta)はじめました。
2021年9月6日
Mentaを使って、Photoshop / Illustrator / Figma / HTML / CSS / Javascript / React / Vue / Nuxt / Next などのweb制作を教え始めました。
- サイトのこと
Webのこと、Youtubeのこと、3Dのこと、お金のこと、お買い物情報など、興味があることを深堀って記事にしてます。
- タグ
- 新規記事
Mentaで1年間メンターとして教えてみて
2022年4月11日