ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
How To Center a Div
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
margin-inlineで左右中央寄せが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 19日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 19 日目 ブロック要素を中央に寄せるときって margin を auto しますよね。margin: 0 auto だと上下に 0 を指定するのがなんか嫌だなという感じが自分はあるので、margin-left と margin-right を併用して使っていました。欠点は書く量がちょっと多いことです。まあエディターでコピペすれば済むんだけど。 margin-inline を使うとまとめて指定できます。 例 デモ：https://codepen.io/ginpei/pen/ZEwgXjZ 関連プロパティ 想像つくかもですが、左右の “inline” に対応して上下の margin-block というのもあります。動作も想像通り。 また margin を margin-top 等で上下左右へ分解できるのと同様、inline
Flexboxのjustify-contentで左右寄せが簡単便利（最近便利なCSSおれおれAdvent Calendar 2023 – 08日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 08 日目 2 つの要素を左右に並べる場面は結構ありますよね。最上部のナビゲーションバーとか。ほら左端がロゴで右端にメニューみたいな。Flexbox だと簡単です。 例 デモ：https://codepen.io/ginpei/pen/eYxxwKP <nav class="TopNavBar"> <div> <a href="/">Ginpen.com</a> </div> <div> <a href="/about">About</a> <a href="/contact">Contact</a> </div> </nav>
Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項
先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート
フォントが大好物な人に！ 横組み・縦組みの読みやすさにこだわった「靜明朝（しずかみんちょう）」無料版と有料版がリリース
横組みに適した「靜明朝大かな」、縦組み適した「靜明朝小かな」、読みやすさにこだわった明朝体の日本語フォントを紹介します。 明朝体で少し新しい雰囲気を出したいな、という時にぴったりのフォントです。 無料版と有料版の2種類があります。無料版は1ウェイト、収録文字数は有料版と同じで、商用プロジェクトでも無料で利用できるフリーフォントです。 「余韻かな」（紹介記事）などでお馴染みのREN FONT様から新作フォントがリリースされました！ ※画像の掲載にあたっては、REN FONT様に許諾を得ております。 「靜明朝大かな」は横組みに適したフォントで、「靜明朝小かな」は縦組みに適したフォント。特に長文での読みやすさに配慮してデザインされています。 靜明朝大かな 無料版と有料版の2種類があり、どちらも商用プロジェクトで利用できます。無料版は収録文字数も同じで、違いはプロポーショナルメトリクス・ペアカーニ
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js
360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。 パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモ デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる
Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています csstable { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; margin: 0; padding: 10px; position: relative; } th { background-color: #fff; } td:hover::before { background-color: red; content: ""; height: 100%; left: -5000px; position: absolute; top: 0
SakubunCSS - 作文用紙風CSS
Web上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。 そこで使ってみたいのがSakubunCSSです。振り仮名まで含めて日本語で縦書きが実現できるCSSです。 SakubunCSSの使い方 SakubunCSSの文章です。rubyタグを使って振り仮名を指定できます。 つれづれなるままに、<ruby>日<rt>ひ</rt></ruby>くらし<ruby>硯<rt>すずり</rt></ruby>にむかひて、<ruby>心<rt>こころ</rt></ruby>にうつりゆくよしなし<ruby>事<rt>ごと</rt></ruby>を、そこはかとなく<ruby>書<rt>か</rt></ruby>きつくれば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
writing-modeで縦書きが便利なこともある（最近便利なCSSおれおれAdvent Calendar 2023 – 12日目） | Ginpen.com
place-itemsで縦横中央寄せ（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 16日目） | Ginpen.com
縦書きで横書きにする方法（Adobe Photoshop 編） - by Takumi Hirashima
FullScreen Slider - アニメーションしながらコンテンツを切り替え MOONGIFT