ウェブ制作 Rancher Desktop に切り替えたけど ポート80と433が使えなくて困った時の対処法
はる Docker Desktopを使用していたが、有料化に伴いRancher Desktopへ切り替えることにしました。そこで、デフォルトで80と443ポートが使用されておりそれの解除方法を紹介します。 現象 Docker Desktop...
ウェブ制作
ウェブ制作 
ウェブ制作 高速なWebサイトが作れるAstroをReactでつくる方法
Astroでは簡単に静的サイトをビルドできるWebフレームワークとのことで、今回はReact.jsを取り入れた環境を用意してみたいと思います。 はる React.js TypeScript Next.jsがわかる前提でゆるく説明してみたいと...
ウェブ制作 【VS Code 設定】編集中ファイルでエラー箇所があるとエラー音がうるさいので消したい時の方法
はる 編集中ファイルで記述のミスなどで赤くエラー表示されてるところでポコポコエラー音がして禿げるかと思ったので消し方をメモしておきます。 はる 基本設定の設定を開く検索で『audio cues error』で検索auto とか on になっ...
ウェブ制作 TDK Meta Checker をアップデート！Chromeの拡張機能
meta情報を確認しやすくした拡張機能 TDK Meta CheckerはGoogleの拡張機能で、Webサイトのmeta情報をわかりやすく確認するための機能です。Web制作者目線で確認したい内容だけに絞って表示してくれます。 シェアデバッ...
ウェブ制作 VSCode + Stylelint で、CSSファイル以外でエラーが出る対処法（TypeError: result.apply is not a function at 〜）
VSCode に Stylint の拡張機能を使用中に、jsファイルを保存時に、なぜか『TypeError: result.apply is not a function at ...』と、Stylelintのエラーが出る問題が出て消す方法...
ウェブ制作 Flexboxをゾンビゲーで楽しく学ぶ海外ゲームのクオリティーがやばい
はる Flexboxの挙動を遊びながら学べるゲームを発見しました。 めちゃくちゃクオリティーが高くてびっくりしました！ Flexboxの挙動を遊びながら学べるゲーム！ バージョンが2.0になってアニメーション・オーディオなどのパワーアップ現...
ウェブ制作 CSSだけで追従表現ができる『position: sticky』で３つの表現
はる CSSの『position: sticky』で一部分を追従する表現が簡単にできるので、その紹介をします。 JavaScriptを使わなくても追従表現ができる .wrap { position: relative; } .inner {...
ウェブ制作 CSSで縦と横の中央寄せをする３つの方法
はる 今回は、CSS要素を縦と横の中央寄席する方法を紹介します。 ３つの方法を紹介しますが、それぞれにメリットデメリットもあるので紹介します。 結論から言うと、flexを使い中央寄せ をする方法が一番シンプルの指定にはなるのでそれを使うのが...
ウェブ制作 HTML・CSS入門 講座
はる HTML・CSSをこれから始めたい！という人に向けて記事を書いています。『パソコンまずどうしたらいい？』から、チュートリアル形式でHTML・CSSを学べる連載記事なども用意してます。 環境を用意しよう！ 「パソコンはどんなのがいい？」...
ウェブ制作 教科書には載っていないコーディングする人に知っていて欲しい14のこと
はる フロントエンジニアのはるです。 今回は、コーディングをする人で入門者を脱却するために私が思う気をつけて欲しいことを紹介します。 プルリクチェックをする機会も多く、コーディングを始めたばかりの人たちにこれは知っていて欲しいなと、思うこと...
ウェブ制作 slint –init の『Would you like to install them now with npm?』をNoを選択しyarnでインストールする時のメモ
はる 現在、りあクト！という本で勉強をしていて、Kindleからうまくコピペができなかったのでメモメモ。 注意 『りあクト！』という本を読んでいて、勉強メモです。読んでないで見た人は参考にしちゃいけないメモ。 $ yarn eslint -...
ウェブ制作 【フロントエンジニア】Laravel Mix での開発環境が高機能で簡単なので入門方法を紹介
はる 今回は、取っ掛りにくいwebpackで作成する開発環境を簡単に用意できる『Laravel Mix』を紹介したいと思います。 Laravel Mix とは webpackベースのフロントエンドのビルドをするための開発環境を、シンプルな記...