muro

本とメガネと手芸が好きな歴9年目のWebフロントエンド実装者。 初級者向けにわかりやす…

muro

本とメガネと手芸が好きな歴9年目のWebフロントエンド実装者。 初級者向けにわかりやすい説明を心掛けています。

誰もが使いやすいメガメニューを実装したい

メガメニュー（ドロップダウンメニュー）について考えたことをまとめます。 メガメニューとは（この記事では）ドロップダウンメニューのドロップダウンする部分が横幅いっぱいに広がっているような見た目のものを指します。 実際のUIについては下記をご参照ください。 （この記事では）初期表示時に表示されている部分を大項目、開閉する部分を小項目と呼びます。 よくある仕様PC表示では大項目が横並び、モバイル表示では縦並びになっている PC表示では、大項目がリンクになっていて、マウスオ

muro

    • VSCodeのユーザースニペットまとめ

      訳あってVisual Studio Code（以下、VSCode）のユーザースニペットが空っぽになってしまったので、備忘録も兼ねてまとめました。 HTML<img>の属性をたくさん "body": [ "<img src=\"$1\" alt=\"\" width=\"$2\" height=\"$3\" loading=\"lazy\">"], 最低限必要な属性はまとめて入れたい。 WebP非対応に対応したい時 "body": [ "<picture>", "\t

      muro

      • Noto Sans JP(Webフォント)のまとめ

        Webフォントの基本をおさらいWebフォントとは 簡単に言うとサーバーにアップロードされたフォント。 現在のところ、全てのOSやデバイスにデフォルトでインストールされている共通のフォントが無いので、Webフォントを利用することによって共通のフォントを表示できるようになります。 デザイン上のメリットは様々あるとは思いますが、実装上のメリットとしてはフォントの違いによるレイアウト崩れの心配が少ないのが一番大きいと思います。 Noto Sans JPとは Noto S

        muro

        • 迷わない戸惑わないためのz-indexの考え方

          既存サイトの改修でよく出会うのが z-index: 99999; というラスボスのステータスのような値のz-indexです（個人の感想です） 時にはz-indexの頂上決戦が行われていることもあるとかないとか。 おそらくこれらはz-indexについてちゃんと理解できていないためだと思われるので、初心者でも（たぶん）できる管理方法をお伝えします。 z-indexが効く時と効かない時初心者あるあるなのですが（私もよくやりました）z-indexをどれだけ上げても上に行ってく

          muro

        誰もが使いやすいメガメニューを実装したい

        muro

          gulp.jsの環境構築したので初心者向けにまとめてみる

          私も初心者だった頃に挫折を味わったgulp.jsの環境構築に、歴8年目にして再チャレンジしたので、解説を交えて方法をまとめていきます。 ※（2023.05.26）ファイル削除をdelではなくfsに変更しました。 やりたいことSassのコンパイルと圧縮（とソースマップの生成） JSの圧縮（とソースマップの生成） HTMLの複製 Browsersyncの利用 （おまけ）EJSのコンパイル とりあえずgulp入門としてコーディング初心者が使うために最低限必要そうなこと

          muro

          gulp.jsの環境構築したので初心者向けにまとめてみる

          muro

          font-sizeにvwを使う

          未経験の(経験の浅い)方々のコードを見る機会があり、その中で一番驚いたのは、font-sizeにvwを使用していた人が多いことでした。 ということで、font-sizeにvwを使用することについて考えてみました。 あくまで個人の見解ですので、そういう考え方もあるんだーと思ってお読みください。 デザインのサイズを変えてしまうそもそもデザイナーさんが16pxで作ったテキストを、実装者が勝手にサイズ変更してよいものなのか。 もちろん、デザイナーさんが「そうしてください」と言

          muro

          font-sizeにvwを使う

          muro

          それでも消えない1pxの謎を解く

          前回はコーダーを苦しめる謎の1pxを消す方法をご紹介しましたが、 なんとそれでも消えない1pxが存在し実装者を苦しめているので、その謎に迫りたいと思います。 ※まずは前回記事で紹介した方法を行ってから下記を試してください。 4つの可能性1. 線を疑う 1pxが出てしまう要素の縁をかたどる要素を選択し、そこに線が設定されている場合は「線」パネルを開きましょう。そして下記を確認してください。 線の幅は整数になっていますか？ 線の位置は外側または内側になっていますか？

          muro

          それでも消えない1pxの謎を解く

          muro

          2倍で書き出した画像のサイズが奇数になってしまう時の対処法

          Adobe Illustratorで作られたデザインデータからコーディングする場合に、よくある困りごとといえば 書き出した画像の端に謎の1pxの余白ができてしまう （画像のサイズが奇数になってしまう） ことだと思います。 座標も幅も高さも値を整えたのになぜか生まれる1pxを消すために、Photoshopを開いてひとつずつ修正した経験のあるコーダーさんも少なくないようです。 私もその中の1人でしたが、ついにその謎を解明してしまいました……！ 解決法各所の値を調整する前に

          muro

          2倍で書き出した画像のサイズが奇数になってしまう時の対処法

          muro