UAスタイルシートとリセットCSSとは - 2023 - kojika17

2023/02/26 161 users リセットCSS KOJIKA17 UAスタイルシート 劇薬

以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話... 続きを読む

CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css

2022/11/01 60 users iOS where Safari 新しいビューポート単位

詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用す... 続きを読む

HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css

2022/03/09 210 users 見栄え classレス ポートフォリオ HTML Webサイト

HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSS... 続きを読む

シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css

2022/02/07 352 users グラスレス CSSフレームワーク ポートフォリオ HTML

その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもし... 続きを読む

シンプルで軽量！ 新しいCSSリセット「The New CSS Reset」を作成したElad Shechterにインタビュー

2021/10/28 11 users 新しいCSSリセット where インタビュー not CSS

CSSの新しい機能:where()や:not()、allプロパティやunset値やrevert値などを使用したCSSリセット「The New CSS Reset」の特徴や機能の解説などを作成したElad Shechterに聞いたインタビューを紹介します。 CSSリセットの考え方や現在の扱い方、新しいプロパティや値の使い方・注意点、CSSの記述方法、box-sizingやlist-s... 続きを読む

新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset | コリス

2021/07/19 28 users コリス CSS unset セレクタ 新しいCSSリセット

CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset... 続きを読む

シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css | コリス

2020/06/05 453 users コリス classレス 自己紹介ページ HTML ブログ

シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い... 続きを読む

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス

2020/03/30 165 users class コンポーネント CSS ダークモード コリス

用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用で... 続きを読む

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

2020/01/16 27 users コリス GitHub dev.to CSS リセット

Web制作でモダンブラウザをターゲットにした場合、CSSにおけるブラウザによる互換性の問題は以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットやすべてをリセットする必要は全くありません。 Windows 7のサポートが終了し、また既にIE11のサポートを終了しているサービス（GitHub, Dev.toなど... 続きを読む

最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる | コリス

2019/05/30 63 users Reset CSS コリス 特徴 Webページ 利点

Webページを実装する際に、何らかのCSSリセットを使用している人が多いと思います。リリースされているものをそのまま、またはカスタマイズしたり、オリジナルのCSSリセットを使用しているかもしれません。 2大CSSリセットとも言えるNormalize CSSとReset CSSの特徴、Normalize CSSとReset CSSそれぞれの利点を取り入れ... 続きを読む

CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy | コリス

2019/02/13 240 users CSS Reboot.css 後方互換性 コリス かっけ

最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。 今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、... 続きを読む

現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css | コリス

2019/01/18 48 users コリス Normalize.css Eric Meyer

使い勝手がよさそうな新しいCSSリセットがリリースされたので、紹介します。 Destyle.cssは現在の制作環境に合うよう開発されたCSSリセットで、Eric MeyerのリセットとNormalize.cssの不満点を解消するようスタイルのリセットと正規化の両方が実現されています。 Destyle.css Destyle.css -GitHub Destyle.cssの特徴 Des... 続きを読む

CSSリセットの2019年用私流カスタマイズ方法 | コリス

2019/01/11 220 users コリス padding margin Eric Meyer

Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセ... 続きを読む

CSSリセットの現状、どのCSSリセットが適しているか選ぶ際の指針 | コリス

2018/12/06 81 users Normalize.css Eric Meyer コリス

Webページを作成する際、何かしらCSSリセットを使用されていると思います。 振り返ると、Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 CSSリセットの現状、どのCSSリセットが適しているか選ぶ際の指針を紹介します。 A look at CSS Resets in 2018 下記は各... 続きを読む

2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説 | コリス

2018/06/14 210 users コリス Bootstrap Normalize.css 解説

Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboo... 続きを読む

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css | コリス

2017/12/06 197 users Flexbox メールクライアント コリス デフォルト 主流

WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.em... 続きを読む

CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css | コリス

2017/08/09 67 users コリス Flexbox float コンポーネント グリッド

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelac... 続きを読む

CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress | コリス

2016/07/04 610 users GitHub コリス Normalize.css デフォルト

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえて... 続きを読む

単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx | コリス

2015/05/07 151 users コリス フレームワーク 一行 レスポンシブ対応 テクニック

CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Mar... 続きを読む

[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント | コリス

2012/11/26 630 users CSS Reset ブラウザ コリス スタイル 下記

ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset... 続きを読む

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス

2012/05/15 485 users コリス クロスブラウザ Normalize.css CSS

下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるもので... 続きを読む

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) : Web Design KOJIKA17

2011/03/09 174 users チートシート normal ブラウザ font-weight

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)March 9 2011 この記事は約2分で読めます。CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。 例を挙げるとh1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}h1.title {font-weight:b... 続きを読む