PR

Web制作を学ぶ

スポンサーリンク
HTML/CSSを学ぶ

【position: absolute なし】display: gridを使って要素を重ねる

こんにちは。今回は、最近見かけたdiplay: gridを使って要素を重ねる方法について考えていこうと思います。 デモ ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。 デモサイトはこちら。 結論 結論から言...
HTML/CSSを学ぶ

要素をコンテンツ幅をはみ出して画面いっぱいにするスマートな方法

こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。 どんなデザイン? 例えば次の画像のようなレイアウトです。 ベース部分の説明 まずコンテンツ...
Web制作を学ぶ

単なるHTML/CSSだけのプロジェクトでもホットリロードする方法

こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい!って時ありますよね。 そんな時に簡単にホットリロードを行う方法です。 結論 ...
JavaScriptを学ぶ

多分これが一番いいアコーディオンメニューだと思います。(高さ可変=height: auto; 対応)

こんにちは。今回はアコーディオンメニューについて色々考えたので解説していこうと思います。 アコーディオンメニューと一言に言っても、googleで検索すると色々な実装パターンが出てきますよね。またライブラリもこれといったものがあまりありません...
Web制作を学ぶ

視覚障害者にとってのWebはこんなに使いづらい

こんにちは。最近Twitterでよくアクセシビリティについて論争が行われるのを見かけることが多くなったように思います。 しかし、いつもWAI-ARIAのroleがどうとかあれが正しくてこれが正しくないとかコード上の話はされども当事者にとって...
Web制作を学ぶ

月5万円を目指すプログラミング・Web制作学習者に求められるスキル

先日HTML/CSS/jQueryを学べば1ヶ月で月5万稼げるようになる!とかいうアホなツイートを見かけまして、つい僕も心の声が漏れてしまいました。 というわけで、今回は月5万円を「安定して」稼ぐ上で「本当に」必要な能力は何なのかを考えてみ...
JavaScriptを学ぶ

jQuery、今までありがとう【移行すべき理由と代替案3選】

こんにちは。これまでお世話になったjQueryですが、そろそろ本当に別れを告げる時が来ているかと思います。(巷ではjQueryはオワコン、jQueryは終わった、脱jQueryとも言われていますね) なぜ必要無くなったのかにはいくつか理由が...
HTML/CSSを学ぶ

display: grid;を使ってレスポンシブ時に要素の順番が変わるレイアウトを攻略する

こんにちは。今回は、今までは再現するのに手間のかかった「レスポンシブで要素の順番が変わるレイアウト」をgridを使って上手く攻略していこうという内容です。grid自体の解説はあまり詳しく行わないので、以下の記事を参考にしてください。 「レス...
Web制作を学ぶ

サイトの遅延を即座に解決!読み込み速度低下の原因を簡単に特定する方法

こんにちは。皆さんはサイトの読み込み速度についてどのくらい意識していますか? 読み込み速度が遅いと、せっかくデザインやコンテンツを作り込んでも効果が落ちてしまいます。 特にLPのようなコンバージョンが明確な目的になっているページは特に重要で...
HTML/CSSを学ぶ

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりやすい傾向...
スポンサーリンク