空要素に: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を採用している方は変換...
登録しておいて損なし！VScodeで開始タグから終了タグまでをパッと簡単に選択する時短ショートカットキー設定
HTMLを編集していると開始タグから終了タグまでをパッと選択したいとき、ありませんか？こんな感じ！コーディング中にキーボードから手を放してマウス使って選択とか、Shift+矢印キーで小まめに選択とか地味にめんどくさい・・・。今回はHTMLタ...
text-align: justifyでテキストを両端揃えにしたら文字間が開きすぎた・・・。word-break:break-allで解決！
サイト構築する上で長文のテキストを表示することはよくあると思います。でも左右に寄せたテキストを改行したとき、端に余分なスペースができて見た目が悪いな、ってことありませんか？そんなときに役立つのがtext-align: justify;！改行...
『Code Spell Checker』でUnknown word（スペルミス）判定されないために単語を除外する方法と解除方法
この記事はエディターにVScodeを使っている方向けとなります。プログラミングをする上で関数や変数の命名って難しいですよね。命名規則に則って命名するにしても、いかに処理や格納されたものが伝わりやすい名前にするか悩みやすいポイントですが、最低...
Tailwind CSSを導入したいけどスタイルが反映されない？Unknown at rule @tailwind エラーを解消する3つの方法
クラス名を考える必要がなかったり、HTMLとCSSを行き来しながらコーディングする必要がないなど、モダンなフロントエンドで人気のあるTailwind CSSですが、導入時に躓きやすいのが難点です。公式サイトの「Get started」ページ...
