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 つ(もしくは少数個)に結合する最適化が主流だ
定期リリースでvim-css3-syntaxのv2.7.0を出す。巷で話題のフォーム関連要素をゴリゴリいじるための仕様、Forms Level 1が公開されたので、マイナー番号が上がっている。また、リリース・ページでは更新された仕様の名前だけでなく、ちゃんとリンクを張るようにする。 グリッド関係のプロパティーが複雑になりつつあるのか、汎用化・共有化しつつあるのか、追いかけることが大変そうだ。また、Edgeからは項目間の境界線についての提案が上がり、Safariからは項目の流し込み順を定義する方法の提案が上がっている。まだまだ動きが多そうな仕様で、注視していきたい。 フォーム関連要素へのスタイルについては、楽しそうという気持ちが先行する。プラットフォーム標準コントロールの方が操作しやすいという派閥に所属しているが、それでも今まで手を入れられなかったところに手を出せるということに興奮を隠せない
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことから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
日本語などの約物に含まれる空白(例えば、開き鍵括弧の左にある空白)などを文脈に応じて詰めるtext-spacing-trimプロパティーがChrome 123やEdge 123で一部実装されている。特に指定せずにいたり、:root要素などでtrim-firstなどを指定すると、初期値の関係や継承によりpre要素でも詰められる。そうすると(対応するOpenType機能であるhaltを所持している)等幅フォント(例えばNoto Sans Mono CJK JP)で描画される場合に文字位置がずれてしまう。 仕様で初期値のnormalはChrome 123やEdge 123の実装でも採用されている。この値では、日本語の約物が続く場合(例えば」「や。「など、Text Module Level 4仕様のExample 41を参照)にどちらかの約物の持つ空白を詰めるよう指示する。この値は継承されるため、
CSSでlight-dark()関数を使う場合、多くの場合は:rootでcolor-schemeプロパティーを指定しておく。SVGではsvg要素などでstyle属性を使い、color-schemeプロパティーを書いておく。style要素でも良いが、ほぼ全て視覚表現のためのSVGでは、HTMLと違ってコードの断片化となり、書きづらいだろう。color-scheme属性というものはない(ようだが、変わるかもしれない)。 <svg xmlns="http://www.w3.org/2000/svg" ... style="color-scheme: light dark;"> <path d="..." fill="light-dark(black, white)"/> </svg> SVGでカラー・スキームに応答するためには、これまではstyle要素にCSSとしてまとめざるを得なかった。メディ
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 では「戻る」ジェスチャーまたはボタンです。 ウェブ デベロッパーは、独自のコンポーネントの閉
垂直方向に複数の段落と画像が並ぶとき、間隔を均一にしたければ、それぞれ同じ大きさのmarginプロパティを適用するだろう。 <p><!-- ... --></p> <p><!-- ... --></p> <figure><!-- ... --></figure> <p><!-- ... --></p> :root { --space-default: 1rlh; } p { margin-block-start: var(--space-default); margin-block-end: 0; } figure { margin-block-start: var(--space-default); margin-block-end: 0; } See the Pen Untitled by Yuhei Yasuda (@yuheiy) on CodePen. しかし実際には、このように
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
タイトルや見出しに視覚的な趣向を凝らしたいなら「グラデーション」がおすすめです。 例えば下図のような具合に、見出しにグラデーションをかけるだけで、ページ全体に華やかな印象が加わります。 HTML＆CSSで一工夫するだけで、彩り豊かなグラデーション文字を作ることができます。 今回は、HTML＆CSSで文字にグラデーションを付けるテクニックをご紹介したいと思います。 また、記事の後半ではコピペで実装できるサンプルデザインも掲載しているので、すぐにグラデーション文字を使いたい方はどうぞ。 １．CSSで文字にグラデーションを付ける手順 まず、CSSには一発で文字にグラデーションを付けるようなプロパティや値はありません。 グラデーション文字を作るには複数のコードを組み合わせる必要があります。 具体的には、以下の３つのプロパティ・値を使って、グラデーション文字を描画していきます。 background
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
