タグ

CSSに関するdamedogのブックマーク (5)

  • 死んだCSSを見つける方法 - Qiita

    使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく

    死んだCSSを見つける方法 - Qiita
    damedog
    damedog 2018/06/18
  • [CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意

    ブラウザごとに異なるHTMLの各要素のスタイルを消去(Reset)するのではなく、スタイルを正常化(Normalize)するNormalize.cssが、2017年3月26日にアップデートされました。 2016年10月3日リリースされたv5.0.0から、いくつか重要な変更点があります。 Normalize.css Normalize.css -GitHub Normalize.cssの特徴 Normalize.css v6.0.0のアップデート内容 v5.0.0からの変更箇所 Normalize.cssの特徴 Normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用

    [CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意
  • マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

    Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

    マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
  • Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか? いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います! ■CSSだけで多彩なサイトを構築できるフレームワーク! 【 Picnic CSSWeb制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です! 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

    Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza times
  • いま俺たちに必要なのはz-indexの明確な指標だ - Qiita

    こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。(調査不足だったらすいません) 広告業界では Web広告業界の展開は日国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

    いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
  • 1