HTML/CSS コンテンツ幅の中の特定の要素を画面いっぱいにするスマートな方法
こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。
どんなデザイン？
例えば次の画像のようなレイアウトです。デモサイトはこちら（...
HTML/CSS 
環境 最適なカフェ作業環境：どこでも集中できるセットの選び方
こんにちは。コロナ禍になって随分時間が経ちました。近年はフリーランス/会社員関わらず在宅ワークが進んでいますよね。
また、特にフリーランスであればカフェでの作業をする人もいるでしょう、僕もそうです。学生の方はカフェで勉強することもあ...
web制作 単なるHTML/CSSだけのプロジェクトでもホットリロードする方法
こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい！って時ありますよね。
そんな時に簡単にホットリロードを行う方法です。...
HTML/CSS 多分これが一番いいアコーディオンメニューだと思います。（高さ可変＝height: auto; 対応）
こんにちは。今回はアコーディオンメニューについて色々考えたので解説していこうと思います。
アコーディオンメニューと一言に言っても、googleで検索すると色々な実装パターンが出てきますよね。またライブラリもこれといったものがあまりあ...
web制作 視覚障害者にとってのWebはこんなに使いづらい
こんにちは。最近Twitterでよくアクセシビリティについて論争が行われるのを見かけることが多くなったように思います。
しかし、いつもWAI-ARIAのroleがどうとかあれが正しくてこれが正しくないとかコード上の話はされども当事者...
web制作 月5万円を目指すプログラミング・Web制作学習者に求められるスキル
先日HTML/CSS/jQueryを学べば1ヶ月で月5万稼げるようになる！とかいうアホなツイートを見かけまして、つい僕も心の声が漏れてしまいました。
というわけで、今回は月5万円を「安定して」稼ぐ上で「本当に」必要な能力...
JavaScript jQuery、今までありがとう
こんにちは。これまでお世話になったjQueryですが、そろそろ本当に別れを告げる時が来ているかと思います。（巷ではjQueryはオワコン、jQueryは終わった、脱jQueryとも言われていますね）
なぜ必要無くなったのかにはいくつ...
HTML/CSS display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する
こんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。
...
web制作 サイトの読み込みが重くなっている原因を探す方法
こんにちは。皆さんはサイトの読み込み速度についてどのくらい意識していますか？
読み込み速度が遅いと、せっかくデザインやコンテンツを作り込んでも効果が落ちてしまいます。
特にLPのようなコンバージョンが明確な目的になっているペー...
HTML/CSS レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。
装飾が賑やかなほど起こりや...