CSS HTML+CSSだけでマスク（切り抜き）したいときに参考にしたいテクニック3選
Webデザインをする上でやりたくなるテクニックの一つに切り抜き（マスク）があります。 文字や好きなシェイプの形で背景を切り抜いたりすると、華やかさというかなんかオシャレに見えるんですよね。 今回は色ん...
CSS 
CSS シンプル、だけどレスポンシブな日本語テキストの改行テクニック
改行の入る箇所によって、キャッチコピーとか言葉の伝わりやすさや印象というのは変わってきます。 でもWebサイトでは、日本語というのは英語よりも改行が入れにくいものです。 というのも単語ごとにスペースで...
JavaScript サイトにYoutube動画を埋め込みたいときに試したい３つの実装方法
こんにちは！みみほくろです。 Youtubeって面白い動画が多くて時間を忘れちゃいますよね。 自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。...
JavaScript スクロールに合わせて要素を表示・非表示させたり切り替える方法
最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。 グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲し...
CSS JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。 そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル...
CSS 空要素に:emptyでスタイルを指定したのになぜか効かない・・・。:emptyの意外な落とし穴
テキストも画像も入っていない空のHTML要素ってありますよね。 特にPHPのような動的に生成したHTMLでは、場合によって中身が空の要素が出てくることが多いと思います。 しかし、ムダな余白を作ったり親...
VScode Live Serverを使ってPCブラウザだけじゃなくスマホ実機で簡単にライブプレビューする方法
WebサイトのコーディングでVScodeを使っている方、表示確認は何を使っていますか？ おそらくLive Serverを使っている方が多いんじゃないでしょうか。 ただ、Live Serverをインスト...
CSS CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹...
SCSS/SASS SASS/SCSSでJavaScriptのように文字列の一部を取り出す方法
こんにちは。みみほくろです。 今回はJavaScriptでよく見る文字列の一部を取り出す方法をSCSS/SASSで行う方法をご紹介します。 私はSCSSを採用しているため、サンプルコードはSCSSの記...
HTML 登録しておいて損なし！VScodeで開始タグから終了タグまでをパッと簡単に選択する時短ショートカットキー設定
HTMLを編集していると開始タグから終了タグまでをパッと選択したいとき、ありませんか？ こんな感じ！ コーディング中にキーボードから手を放してマウス使って選択とか、Shift+矢印キーで小まめに選択と...
CSS text-align: justifyでテキストを両端揃えにしたら文字間が開きすぎた・・・。word-break:break-allで解決！
サイト構築する上で長文のテキストを表示することはよくあると思います。 でも左右に寄せたテキストを改行したとき、端に余分なスペースができて見た目が悪いな、ってことありませんか？ そんなときに役立つのがt...
VScode 『Code Spell Checker』でUnknown word（スペルミス）判定されないために単語を除外する方法と解除方法
この記事はエディターにVScodeを使っている方向けとなります。 プログラミングをする上で関数や変数の命名って難しいですよね。 命名規則に則って命名するにしても、いかに処理や格納されたものが伝わりやす...