CSS ハンバーガーメニューの作り方とスクロール対応｜CSSだけで作るチェックボックス方式
ハンバーガーメニューを開いても中身がスクロールできないときの原因と、CSSでの直し方をまとめました。チェックボックス方式の基本コードと、dvh・overflow・overscroll-behaviorなど1行ずつの意味を解説しています。
ネタ帳
CSS 
サイト作成 正規表現チートシート｜.htaccess・VSCode・JavaScriptで使える記号の早見表
正規表現を早見表にまとめました。文字・位置・回数・グループの記号一覧と、.htaccess・VSCode・JavaScriptでの書き方の違い、よく使うパターン例を初心者向けに解説します。
HTML 作ったHTMLをスマホで使いたい人へ。Vercelで無料公開する手順をまとめました
作ったHTMLファイルをスマホで使いたくて、Vercelで公開してみました。Vercelとは何かという説明から、フォルダの作り方、ターミナルでのコマンド、URLが発行されるまでの流れを実際の画面の順番どおりにまとめています。
ネタ帳 看護師からWeb業界へ独学で転職した体験談|使った教材・挫折・未経験OKの転職サービスまとめ
/* ===== 記事内スタイル(mtc-プレフィックスでテーマと干渉しにくくしています) ===== */.mtc-article{line-height:1.9;}.mtc-article h2{margin-top:3.5em;mar...
CSS 【保存版】Tailwind CSS チートシート｜文字サイズ・余白・Flex・Grid・レスポンシブ対応まとめ
Tailwind CSSを使うたびに、text-xlって何pxだっけ？px-4って左右16pxだっけ？justify-betweenとitems-centerが毎回ごっちゃになる……そういうことで、よく表記方法を検索しているのですが、自分で...
LP PHPファイルだけで「データベース風」にURLでHTMLを切り替える方法
はじめに「果物ごとにページを作りたいけど、毎回HTMLファイルをコピーするのは大変…」そんなときに便利なのが、PHPの配列をデータベース代わりに使う方法です。通常、Webサイトで大量のデータを管理する場合はMySQLなどのデータベースを利用...
CSS 【背景画像に対応】CSSだけでリボン風デザインを作る方法｜clip-path
よく見かけるリボンCSSよく見かけるリボンの作り方は、色付き四角の左右に三角の背景と同じ色のものを被せてリボン風にするやり方です。疑似要素（::before / ::after）で白い三角形を重ねる方法です。下の画像は背景が画像になっている...
CSS 【CSS】わかりにくいposition: fixed・relative・absolute・fixed 要素の位置調整、考え方
position なんとかは、個人的になかなか難しくて、なんとなく使っていた感じだったので、一旦学習し直してみました。わかりやすく図をいれて記事を書いたので、ご参照いただけたら嬉しいです！1. absolute と relative の関係...
CSS CSS translateYの使い方｜-50%で中央寄せできる理由をコードで解説
Web制作でよく出てくるのが「要素を上下や左右の中央にそろえたい」「ロゴやハンバーガーボタンをきれいに配置したい」といったレイアウト調整です。この記事では、top・calc()・transform: translateY(-50%)を使った...
ネタ帳 黒丸パスワードの中身を見る方法｜目のマークがない時の対処法！
パスワードを入力すると、黒丸や点（●●●●●）で隠されて文字が見えなくなること、よくありますよね。最近は「目のアイコン」をクリックすれば一時的に表示できる入力フォームもありますが、そういった機能がついていない場合もあります。自分が入力したパ...
サイト作成 お名前.comでドメインE判定…スパム対策②／WordPress
スパムメールが頻繁にくるようになり、そのせいなのか、お名前.comでドメインがE判定といきなり連絡が来ました…びびります。とりあえず、原因となりそうなWordpressのセキュリティについて見直したので、私がやったことをご紹介します。スパム...
CSS 【SEO】CSS（JS）の圧縮／PageSpeed Insights
ページの速度改善についてです。ページの速度を速めることは、SEO対策として大切になってきます。わたしは、ランディングページを作成していましたが、ページの表示速度を速めることはランディングページの利便性というのを改善することにつながり、サイト...
CSS 【CSS】画面が左右に動いてしまう問題 ②
サイト制作をしているときに、画面が左右に動いてしまい、スクロールが不安定になってしまうことがありました。そこで対策方法がわかったので共有します。最初に、はみ出ている要素がないか確認します。padding等で、横幅100％からはみ出しているこ...
SEO 【SEO】サジェストキーワード メモ
SEO対策に「サジェストキーワード」を使用した対策があります。これを使用すると、Googleでその言葉で何が調べられているかわかります。例えば、鍵屋の場合「鍵 トラブル」で検索すると「鍵 トラブル 業者」のように表示される。鍵トラブルで検索...
CSS 【CSS】背景の区切り
オシャレなサイトやLPページでは、セクションの分かれ目でデザイン性のある背景の区切りが使われています。このサイトでは、素敵な区切りを作成できるもので、CSSをコピペすることができます。三角の区切りこんな感じの区切りを作ります。<!-- 背景...
CSS 【サイト作成】画面が動いてしまう問題 ①
サイト作成し、スマホで確認した際に、画面が左右に動いてしまうことがありました。縦のスクロールだけでいいのに、横にスクロールできるような感じです。そのままにしてもいい感じもしましたが、LPの作成だったので訪問してくれるユーザーが煩わしくてペー...
CSS 【CSS】リストの改行をそろえる、アイコンを画像にする、アイコンと文字の高さを揃える！
改行を揃える方法これをこれにします。/* リストの改行の位置をそろえる */.list { margin-left: 2.3em; text-indent: -2.3em;}大きさは、アイコンの大きさによって調整します。リストのアイコンを画...
CSS 【CSS】オシャレな境界線と、白い線を消す
ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s;}/* スクロールするとヘッダーが...
CSS PNG形式の画像に影をつけたいけどうまくいかない！
PNG画像で、周囲の背景は透過しているとき、「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。この時に便利なのが、filt...