2022年現在、CSSでテキストに蛍光ペン風の下線を引く方法をググるとだいたいlinear-gradientを使った記事がヒットします。しかし、いまどきはlinear-gradientを使わなくてもtext-decorationで同じような表現ができるので紹介しておきます。 結論: こういうCSSをあてる /* セレクタ名はてきとう */ .highlight { text-decoration: underline; /* 下線 */ text-decoration-thickness: 0.5em; /* 線の太さ */ text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */ text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */ text-decoration-

はじめに 文字列を強調するために、蛍光ペンでなぞったような効果を出すことがありますが、今やCSSのグラデーション（linear-gradient）を使うのが定番になってますね。今回紹介するのもご多分に漏れずlinear-gradientを用いますが、少しこだわってより本物っぽく仕上げてみます。まずは実際のデモを見てみましょう。 蛍光ペンマーカー効果のサンプル その１ わたくしといふ現象は仮定された有機交流電燈のひとつの青い照明です （あらゆる透明な幽霊の複合体） 風景やみんなといつしよに　せはしくせはしく明滅しながら いかにもたしかにともりつづける因果交流電燈のひとつの青い照明です （ひかりはたもち　その電燈は失はれ） これらは二十二箇月の　過去とかんずる方角から 紙と鉱質インクをつらね（すべてわたくしと明滅しみんなが同時に感ずるもの） ここまでたもちつゞけられたかげと ひかりのひとくさり

前回のブログを作成するにあたって、デモページをいくつも用意する必要があった。これまではCodePenで作成したものを埋め込んで表示していたが、ソースコードがブログと別の場所で管理されていることが煩わしかったので、代わりにデモページを同サイトに配置してiframe要素から読み込んで表示することにした。 これをシンプルに実装すると次のようになる。 <iframe src="/2025-09-12-click-friendly-target-areas/navbar-bad.html" title="ナビゲーションバーのデモ（悪い例）" height="128" style="width: 100%" ></iframe> このうち、title属性にはそのドキュメントのタイトルを設定する。そして、iframe要素をそのドキュメントとピッタリ同じ高さにするために、ドキュメントの高さをheight属

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事は、「Web UI 実装勉強会 #1」での同タイトルの発表をもとにしたものです。 ターゲットエリアを広げる工夫 リンクやボタンなどのUI要素を押したときに反応する領域のことをターゲットエリアと呼びます。素朴に実装すれば、その要素の視覚的なサイズがそのままターゲットエリアになります。 しかし場合によっては、これではあまり使い勝手が良くならないことがあります。要素自体のサイズが小さいと押すことができる領域も狭くなるので、その分正確性が求められて押しづらくなります。 そういうときには、視覚的なサイズよりも余分にターゲットエリアを広げるテクニックを使います。paddingプロパティを使って要素自体のサイズを広げつつ、レイアウトが崩れないように同じ大きさのネガティブマージンを適用します。 a { margin: -4px; padding: 4px; } 一方、プレーンなテキストリンクと違っ

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だった。

ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。 休日は仕事しないって決めてるんだけど、ちょっと空いた時間とかにこうやってブログ書けるのが良い。 iOSではbackground-attachment:fixed;が効かない！？ ちょっとおしゃれなホームページを作ってくれと言われたら、 簡単にできるものとして背景固定のパララックス風のページデザインがあります。 こんなやつです。 Frankie's Sports Bar & Grill よくあるこんな感じの背景を固定して前面の要素だけが動くようなデザインですね。 シンプ

“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる コンテンツの邪魔になって読み手の気を散らす これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。 加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。 件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。 html { /* 下線と文字の距離を離す */ text-underline-offset:

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

CSSで不透明度80％に指定するとき、 opacityプロパティか、HEX(16進数)か、RGBAの3通りがあります。 例えば背景色に指定する場合は以下のようになります。 /* opacityプロパティで指定 */ .A{ background-color: #000; /* ← rgb(0,0,0);でもOK */ opacity: 0.8; } /* HEXで指定 */ .B{ background-color: #000000CC; } /* RGBAで指定 */ .C{ background-color: rgba(0,0,0,0.8); }

2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー

必知事項は次のとおりです。 CloseWatcher API を使用すると、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現できます。 <details> 要素を使用して、アコーディオン パターンを簡単に実装できます。 権限ポリシー違反レポートが利用可能になりました。 他にも多数の機能があります。 Adriana Jara と申します。Chrome 120 のデベロッパー向けの新機能について詳しく見てみましょう。 CloseWatcher API。 モーダル コンポーネントやポップアップ コンポーネントの重要な機能は、閉じやすく、閉じる方法が統一されていることです。これらのメカニズムは閉じるリクエストと呼ばれ、通常は、デスクトップ プラットフォームでは ESC キー、Android では「戻る」ジェスチャーまたはボタンです。 ウェブ デベロッパーは、独自のコンポーネントの閉

（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。