日本語などの約物に含まれる空白(例えば、開き鍵括弧の左にある空白)などを文脈に応じて詰める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
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
こんにゃくいもさんのページ ユーザーID: 12490586 総レス数: 7462 (第176位) 総編集数: 1258 (第248位) 総お絵カキコ数: 504 (第48位) 総新規記事数: 68 (第606位) 総ピコカキコ数: 3 (第418位) 最近更新した記事 アイ★チュウ 双子 双子 カードファイト!! ヴァンガード 踊るアニメOPED 踊るアニメOPED 高槻かなこ 22/7 幼馴染の一覧 ツキウタ。 アイドリッシュセブン ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ツキウタ。 アイドリッシュセブン お絵カキコ ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ツキウタ。 ラブライブ！虹ヶ咲学園スクールアイドル同好会 ラブライブ！虹ヶ咲学園スクールアイドル同好会 アニメソングの一覧 NE
斬鉄剣で斬れない物一覧単語 12件 ミジュクモノメ 6.7千文字の記事 153 0pt ほめる 掲示板へ 記事編集 斬れないのが悪いのではない。拙者の腕の未熟さ故だ・・・一覧（登場順）その他関連動画関連商品関連チャンネル関連項目掲示板 この記事は第379回の今週のオススメ記事に選ばれました！ より斬鉄剣を攻略できるような記事に編集していきましょう。 この記事は第379回の今週のオススメ記事に選ばれました！ より斬鉄剣を攻略できるような記事に編集していきましょう。 斬鉄剣で斬れない物一覧とは、ルパン三世に登場する十三代目石川五ェ門の所持する斬鉄剣で斬れない物の一覧である。 なお、斬ることはできたが再生されるなどして実質的には失敗に終わった例も含む。 また、ルパン三世という作品は個々のエピソードが独立していることが多いという性質上、「斬れないもの」も基本的には一回きりの設定となっており、あるエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く