シンプル、だけどレスポンシブな日本語テキストの改行テクニック
改行の入る箇所によって、キャッチコピーとか言葉の伝わりやすさや印象というのは変わってきます。でもWebサイトでは、日本語というのは英語よりも改行が入れにくいものです。というのも単語ごとにスペースで区切る英語と違って、日本語は単語ごとにスペー...
サイトにYoutube動画を埋め込みたいときに試したい３つの実装方法
こんにちは！みみほくろです。Youtubeって面白い動画が多くて時間を忘れちゃいますよね。自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。今回はYoutube動画をサイトに埋め込む際...
要素をスクロールに合わせて表示・非表示させたり切り替える方法
最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲しい情報を探しやすくサイト運営者としては回遊...
JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。スライダーを実装するとき、よく使わ...
空要素に:emptyでスタイルを指定したのになぜか効かない・・・。:emptyの意外な落とし穴
テキストも画像も入っていない空のHTML要素ってありますよね。特にPHPのような動的に生成したHTMLでは、場合によって中身が空の要素が出てくることが多いと思います。しかし、ムダな余白を作ったり親要素でFlexやGridなどを指定していると...
Live Serverを使ってPCブラウザだけじゃなくスマホ実機で簡単にライブプレビューする方法
WebサイトのコーディングでVScodeを使っている方、表示確認は何を使っていますか？おそらくLive Serverを使っている方が多いんじゃないでしょうか。ただ、Live Serverをインストールしただけの状態で使っているとPCでしか表...
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。mimihokuro（みみほくろ）です。みなさんはWebデザインでアイコンをつけたいとき、何を使いますか？画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。...
SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法
こんにちは。みみほくろです。今回はJavaScriptでよく見る文字列の一部を取り出す方法をSCSS/SASSで行う方法をご紹介します。私はSCSSを採用しているため、サンプルコードはSCSSの記法になります。SASSを採用している方は変換...
