はじめに 実装したいのはこんなパララックスです。 各セクション間に背景画像が見えていて、セクションごとに異なる画像に切り替わります。 これを2通りの方法で実装してみます。 background-attachment: fixed で実装 position: fixed + clip-path で実装 先に書いておくと、background-attachment: fixed を使う方法はiOS Safariでうまく動かなかった（2024年9月時点）ため、実際のプロダクトでは後者の方法で実装しました。 必要に応じて前者は読み飛ばしてください。 1. background-attachment: fixed で実装 特筆ポイントは、background-imageを指定している要素にbackground-attachment: fixed;を指定している点です。 背景画像を固定してくれます。

について説明します。類似タグとの使い分けでは、strongタグ、bタグ、emタグ、iタグ、uタグなどとの使い分け方法を解説。これらの強調タグを上手く使いこなして、より見やすいページを作成していきましょう！ markタグとは markタグの読み方 markタグは「マークタグ」と読みます。 markタグの説明 <mark></mark>で任意の文章を囲うことで、その文章に黄色のハイライトを引くことができます。markタグは特定の文章を強調し、読者が参照しやすいように引用文などを目立たせるために使用されます。 単に重要さを表したい時、固有名詞を目立たせたい時は別のタグがありますので、しっかり区別するようにしましょう。類似タグについては記事後半でご紹介します。

はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa

例えば、ヘッダーメニューにカーソルをhoverさせたら、下線が表示されるという実装はよくあります。 この下線ですが、ただパッと表示されるのではなく、アニメーションで実装されることが多いです。 今回は、実務でもよく使われるテキストホバー時のアンダーライン(下線)アニメーションを、11種類ご紹介します。

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか？ これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 （ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください） この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 （この記事にはほぼすべてのgrid関連プロパティが登場します！） 1.

CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法

Introduction​ This guide should help you to make sure you are following our best practices and writing tests that are more resilient. Testing philosophy​ Test user-visible behavior​ Automated tests should verify that the application code works for the end users, and avoid relying on implementation details such as things which users will not typically use, see, or even know about such as the name o

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま

Get a CSS-only Tooltip Shape or Speech Bubble made with a single-element and customizable using CSS variables. <div class="tooltip">Your text content</div> Read the content of each tooltip to know which one to use. You can adjust the position of the tail using the range slider. Click the shape to copy the CSS

IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han

おや... このページにも雪がふってきましたね... これは BASE Advent Calendar 2023 の1日目の記事です。 なんだかさいきん寒いなぁと思っていたら、ついに雪がふってきてしまいましたね！ このはらはらと舞い落ちる雪の結晶、HTML と CSS で作れちゃいます。 そして BASE には HTML 編集 App という機能があります。この機能を使うと...？ snowrry.base.shop ↑のデモショップのように、ショップに雪をふらせることができちゃいます！是非これからの季節に試してみてください ⛄ BASE ショップに雪をふらせる方法 まず HTML 編集 App の使い方については、こちらの BASE U の記事を参考に設定してください。 baseu.jp 今回は「テーマを編集する」機能を使ってショップに HTML と CSS を追加します。 HTML と

Kansai WordPress Meetup@大阪『 WordCamp Tokyo 2023 をみんなで振り返る+α (https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/296857054/) 登壇資料です。