Chakra UIの横並び・縦並びしたいとき使うStack（HStack・VStack）・Flexの違いと使い分け
UI・コンポーネントライブラリはWebアプリを作るときに、開発はしたいけどデザインに苦手意識を持っていてなかなか進まない、そんなときに便利な存在ですが、Reactを使う人の中には「Chakra UI」を使っている人も多いんじゃないでしょうか...
JavaScript
サイトにYoutube動画を埋め込みたいときに試したい３つの実装方法
こんにちは！みみほくろです。Youtubeって面白い動画が多くて時間を忘れちゃいますよね。自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。今回はYoutube動画をサイトに埋め込む際...
要素をスクロールに合わせて表示・非表示させたり切り替える方法
最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲しい情報を探しやすくサイト運営者としては回遊...
JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。スライダーを実装するとき、よく使わ...
空要素に:emptyでスタイルを指定したのになぜか効かない・・・。:emptyの意外な落とし穴
テキストも画像も入っていない空のHTML要素ってありますよね。特にPHPのような動的に生成したHTMLでは、場合によって中身が空の要素が出てくることが多いと思います。しかし、ムダな余白を作ったり親要素でFlexやGridなどを指定していると...
モーダルウインドウの実装方法4選！それぞれのメリットとデメリットもご紹介
今回実装方法としてご紹介するのは以下の4つです。素のJavaScript（Vanilla-JS）jQueryInput ＋ Label（HTML）Dialog（HTML+JavaScript）一つ一つ見ていきましょう！素のJavaScrip...
Webデザイン始めるならVScodeイチオシ！VScodeを使うための設定手順とオススメ拡張機能
Webデザインを始めるにあたって必要なエディターにはVScodeしかない！VScodeをこれから使い始める方向けに初期設定とおすすめの拡張機能をご紹介します。
