Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス アクセシビリティ CSS 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

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

2019/01/18 48 users コリス Eric Meyer CSSリセット リセット 両方

使い勝手がよさそうな新しい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 CSSリセット ベース

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

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング CSS 差異 デフォルト 案件

今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング CSS 差異 デフォルト 案件

今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む

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

2018/12/06 81 users Eric Meyer sanitize.css コリス 指針

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 CSS CSSリセット リセット

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

normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化 | コリス

2018/02/16 55 users コリス 2KB 3kb サポート WEB制作者

利用しているWeb制作者も多いと思います。 normalize.cssがアップデートし、8.0.0がリリースされました。 IE9以下をはじめとする古いブラウザのサポートがなくなったので、大幅に軽量化されています。v6.0.0は2.2KB、v7.0.0は2.3KBだったのが、v8.0.0で1.8KBです。 normalize.css -GitHub normalize.css 8.0.0の変更点 2... 続きを読む

[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize | コリス

2018/02/13 77 users コリス border-box box-sizing CSS

ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「 normalize.css 」をモダンブラウザ用に最適化したスタイルシートを紹介します。 「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。 modern-normalize -GitHub modern-normalizeの特徴 modern-normalizeの使い方 modern-no... 続きを読む

リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize | コリス

2017/06/01 109 users コリス デフォルト スタイルシート ブラウザごと リスト

ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。 PostCSS Normalize -GitHub normalize.cssにつ... 続きを読む

[CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 | コリス

2017/03/30 43 users コリス CSS Chrome RESET リリース

ブラウザごとに異なるHTMLの各要素のスタイルを消去（Reset）するのではなく、スタイルを正常化（Normalize）するNormalize.cssが、2017年3月26日にアップデートされました。 2016年10月3日リリースされたv5.0.0から、いくつか重要な変更点があります。 Normalize.css Normalize.css -GitHub Normalize.cssの特徴 Nor... 続きを読む

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

2016/07/04 610 users GitHub コリス デフォルト 相違 CSSリセット

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

normalize.cssで使用されている各スタイルがどのように機能しているか解説 | コリス

2015/05/21 143 users コリス 相違 sanitize.css 解説 細かい改良

先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能して... 続きを読む

reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css | コリス

2015/04/13 443 users 差異 コリス HTML アプローチ モバイル

HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub saniti... 続きを読む

[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline | コリス

2015/01/21 106 users Skyline BEM コリス アーキテクチャ class

大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。 Skyline Skyline -GitHub Skylineでは気になるCSSのテクニックがたくさん使われています。 classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boil... 続きを読む

normalize.cssはそのまま使え？ - Weblog - hail2u.net

2013/08/16 13 users Weblog hail2u.net README コミット

normalize.cssのコミットを購読してる。主にnormalize.scssを追随させるためだけど、勉強になることも多い(多かった)し。この前のコミットでREADMEが更新され、そのまま使うことを推奨すると変更された。特に邪悪な変更というわけではないんだけど、そのまま使いたくないな―みたいなのがちょっとある。 normalize.cssは素晴らしいものだし、そのまま使って何も問題ないものなこ... 続きを読む

ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit | コリス

2013/07/29 258 users jQuery UIKit コリス ウェブページ UIエレメント

簡単に利用でき、カスタマイズも容易で、ウェブ制作者のためにメンテナンスと拡張に重点をおいたHTML, CSS, JavaScriptで作成されたフロントエンド用の軽量フレームワークを紹介します。 UIkit UIkit -GitHub UIkitは現在多くの制作者が利用しているjQuery, normalize.cssをベースに、ウェブページで利用するさまざまなUIエレメントが簡単に実装できます。... 続きを読む

reset.cssやnormalize.css、box-sizingなどを選んでシンプルなHTMLのスターターセットを作れるSiimpler - かちびと.net

2012/05/27 94 users box-sizing テンプレ お好み reset.css

日曜なので軽い話題。シンプルで 小さめなプロジェクト用のテンプレ を作成するツールです。reset.css とかnormalize.cssなどを選択して スターターセットとしてDLする事が 出来ます。 この手のものはいろいろあるのでお好みで選んでみるといいですね。 Siimpler reset.cssやnormalize.cssなどを選んでシンプルなHTML5製のテンプレを作るサービスです。まぁそ... 続きを読む

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

2012/05/15 485 users コリス クロスブラウザ CSS CSSリセット エレメント

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

デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」｜WEB Drawer

2012/01/24 20 users デフォルトスタイル CSS デフォルト挙動 リセットCSS

トップ CSS デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」 サイトを制作する際、最初にブラウザ初期値のCSSをリセットする方も多いと思います。様々なリセットCSSがありますが、ほぼすべての要素をリセットさせるものや、最近のHTML5に関するタグがないものもあります。 今回ご紹介する「normalize.css」は、HTML5やCSS3... 続きを読む

俺の CSS リセット: 2011 冬 - terkel.jp

2011/12/24 668 users 両氏 terkel Nicolas Gallagher 影響

年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセッ... 続きを読む