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の特徴 この新し

はじめに問題です。下の画像のようなメニューを作るには、どのような CSS を指定すればいいでしょうか？ アクティブなメニューの背景色がサイト全体の背景色と同じデザイン 出典：eProduct Admin Dashboard Design by 𝐄𝐡𝐬𝐚𝐧 𝐌𝐨𝐢𝐧 on Dribbble悩みどころは、アクティブなメニューの外側の角を丸くすることだと思います。 アクティブなメニューとその他の部分の境界の角が丸くなっているこのような外側の角が丸いアクティブなメニューを作る CSS を紹介します。使用する CSS プロパティは box-shadow です。メニューの他に、タブにも使えると思います。 デモ実際のデモをご覧ください。 メニューメニューメニューメニューデモの HTML です。アクティブなメニューの class に active が付くものとします。 <ul class

スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ

CSSを書いていて、設定してしまった値を戻したいことはよくあることだと思います。 戻したくてGoogle検索してみても、reset.cssやブラウザデフォルトCSSがヒットしてなかなか思うように見つかりません。そこで一覧を作成しようと思いました。 適当にググってみて、初期値の一覧は見つかったのですがCSS3も含めたものは見た感じなかったので一覧を作成しました。 参考 : Mozilla CSS reference ※ 初期値のようなもの一覧です。colorなどの定まっていないもあります。 ※ 必ずしも正しいとは限りません。 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; anima

ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-

サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ

CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に

2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。

debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。 オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。 コード var selector = document.querySelectorAll("*"); セレクタはデフォルトでは全部指定されています else if (typeof options.selector === "undefined") { var selector = document.querySelectorAll(`*:not(${options.not}) > *`); } オプション設定されたときは:notを付けて対象外にする function random

Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。

How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition. To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. Give it a go, change the shirt from yellow to b

Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です css blockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } blockquote:before { content: '❝'; float: left; font-size: 200%; margin-left: -20px; } blockquote:after { content: "引用元:【"attr(cite)"】"; display: block; text-align: ri

これまでjavascriptを利用しないと出来なかったような動作も、CSS3の登場によりCSSのみで実装できるものが増えてきました。 対応ブラウザは限られますが、コードの簡略化のためにも積極的に使っていきたいですね。 見出しを固定したテーブル スクロールしてもthead要素が上部に固定されたままになります。 See the Pen 見出し固定テーブル by ponzu (@ponzu) on CodePen. :targetセレクタを使ってクリックで表示/非表示 :target セレクタを使い、選択された要素がクリックされたか否かによって、CSSを出し分けることが出来ます。 See the Pen :targetプロパティを使ってクリックで表示/非表示 by ponzu (@ponzu) on CodePen. 表示幅によってテキスト色が変わっているように見せるCSS 色違いのテキストを、

Result 外部サイトのリンクにだけ特定のアイコンを付ける、みたいなの やってる事は単純で、href属性に自サイトのドメインを含んでる場合は除外するようにしています 相対パスも対応する場合は便宜変更してください css a:not([href^="https://codepen.io/"]):after{ content: ""; background-image: url(foobar.gif); display: inline-block; background-size: cover; } 上記の場合はhttps://codepen.io/で始まるリンクを除外したコードとなります via Inline Icons & Wrapping

:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場合の使い方を紹介します。 CSS :not() with Multiple Classes 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :not()セレクタとは、特定のclassがない要素を選択する否定疑似クラスです。

CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも

See the Pen タブ切り替え（汎用版） by 草村 (@kusamura_mono) on CodePen.38847 HTML<div class="tab-wrap"> <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label> <div class="tab-content"> コンテンツ 1 </div> <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label> <div class="tab-co

/************************************ ** 比較表 ************************************/ /* 比較表全体 */ .compare-box { display:-webkit-box;/* 配置 */ display:-ms-flexbox;/* 配置 */ display:flex;/* 配置 */ max-width:600px;/* 横幅 */ margin: 0 auto 2rem;/* 余白 */ border-radius:4px;/* 角丸 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ background: #fef9ed; /* 背景色 */ } /* 左のボックス、右のボックス */ .compare-box .compare-left-