WordPressで階層を変更したならRedirectionプラグインでサクッとリダイレクト設定
サイトのドメインを変えたり、ページの階層を変えたときにほぼ必須の作業なのがリダイレクト設定。でもGoogle検索にすでにインデックスされている場合は、前のURLについていたGoogleからの評価を新しいURLに引き継がせるために、301リダ...
CSSによる「部分一致」でスタイルを一括適用させる方法&効かないときのポイント
CSSで複数のクラスやIDに同じスタイルを適用させるとき、どうしてますか？.class-name1,.class-name2,#id1 { // 適用したいスタイル}こんな感じが多いと思います。でも適用したいクラスやIDを羅列するのはコード...
Chakra UIの横並び・縦並びしたいとき使うStack（HStack・VStack）・Flexの違いと使い分け
UI・コンポーネントライブラリはWebアプリを作るときに、開発はしたいけどデザインに苦手意識を持っていてなかなか進まない、そんなときに便利な存在ですが、Reactを使う人の中には「Chakra UI」を使っている人も多いんじゃないでしょうか...
HTML+CSSだけでマスク（切り抜き）したいときに参考にしたいテクニック3選
Webデザインをする上でやりたくなるテクニックの一つに切り抜き（マスク）があります。文字や好きなシェイプの形で背景を切り抜いたりすると、華やかさというかなんかオシャレに見えるんですよね。今回は色んな切り抜きのテクニックをご紹介します。テキス...
シンプル、だけどレスポンシブな日本語テキストの改行テクニック
改行の入る箇所によって、キャッチコピーとか言葉の伝わりやすさや印象というのは変わってきます。でもWebサイトでは、日本語というのは英語よりも改行が入れにくいものです。というのも単語ごとにスペースで区切る英語と違って、日本語は単語ごとにスペー...
サイトにYoutube動画を埋め込みたいときに試したい３つの実装方法
こんにちは！みみほくろです。Youtubeって面白い動画が多くて時間を忘れちゃいますよね。自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。今回はYoutube動画をサイトに埋め込む際...
要素をスクロールに合わせて表示・非表示させたり切り替える方法
最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲しい情報を探しやすくサイト運営者としては回遊...
JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。スライダーを実装するとき、よく使わ...
