Zennはエンジニアが技術・開発についての知見をシェアする場所です。本の販売や、読者からのバッジの受付により対価を受け取ることができます。

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です。 Diagonal Layouts in 2023 斜めのレイアウトを実装するこれまでの方法は、下記をご覧ください。 ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ 1. rotateではなく、skewを使用する 2. 疑似要素を使用する 3. CSSの三角関数で適切なpaddingを設定する 4. CSSカスタムプロパティでpaddingを管理する 斜めのレイアウトを実装したデモ 1. rotateではなく、skewを使用する width

CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。

アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形

Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ

前回Fontelloで作成したフォントですが、cssだけで表示しようとすると意味不明な文字列がめちゃくちゃ長くて困ります。なので普通にフォントファイルを置いて使うことにします。 www.foxism.jp フォントファイルをどこに置くか ダウンロードしたファイルをDropboxに保存 cssファイルの編集 フォントファイルのDropbox上での場所をコピー fontello.cssの編集 はてなブログの設定を変更 記事やテーマでの使用方法 まとめ フォントファイルをどこに置くか 一般的なウェブフォントの使い方は、ググるとたくさん出てくるのでそちらを参考にしてください。はてなブログの場合は、フォントファイルをアップロードできないので単体では使用することができません。Pro版ははてなダイアリーPlusの機能が使えるので、そちらの「ファイル」にアップロード自体はできるのですが、それをはてなブログ

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im

Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"

CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年

CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset値やrevert値など、見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています。 The New CSS Reset The New CSS Reset -GitHub The New CSS Resetの特徴 The New CSS Resetは何をリセットするのか？ The New CSS Resetの中身 2021年、モダンブラウザに適したCSSリセットのまとめ The New CSS Resetの特徴 この新し

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ

フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。 Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。 Leon Sans Leon Sans -GitHub Leon Sansとは Leon Sansのデモ Leon Sansの使い方 Leon Sansとは Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。 生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。 サイトでは

Text: Tumblr で使えるタグ - 導入 2010-01-20 IntroductionDashboard で Customize をクリックして Theme タブを選択し、Use custom HTML ボタンをクリックすると tumblelog のテーマを自由に編集できるようになる。 この CustomHTML に {…} や {block:…}…{/block:…} 形式の要素を仕込むことで、それらが別の要素に置換される。 例えば <head><title>{Title}</title></head> と書けば、{Title} がページ作成者の設定したページタイトルに置換される。 マークアップに用いる {…} 形式の要素を「変数」、{block:…}…{/block:…} 形式の要素を「ブロック」と呼ぶ。また、ブロック要素に囲まれた部分を「内容」と呼ぶ。 例： <html>

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？ CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介します。 Using Feature Detection, Conditionals, and Groups with Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい機能を使用する時 新しい機能の検出が必要な時 条件セレクタのサポート @supportsに対応するセレクタ セレクタの基本的なプロパティのグループ セレクタによる条件分岐の効果的な使い方 このテクニックを使用するポイントと注意点 CSSの新しい機能を使用する時 CSSは、新しい機能をスムーズに追加できるよう設計されてい

Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS