HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
CSSの新機能のまとめ -2018年、CSSワーキンググループの会議で変更が加えられたCSSの新機能とそのデモ
先週、CSSワーキンググループの会議でCSSの仕様にさまざまな変更が加えられ、Webデザイナーや制作者にとって興味深い議論が行われました。 CSSの新機能とそのデモ、現在議論されている点について紹介します。 The CSS Working Group At TPAC: What’s New In CSS? by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 TPACとは スクロールバーのスタイル -scrollbarプロパティ アスペクト比の単位 「:where()」機能的な疑似クラス marginとpaddingのための論理的なショートハンド Web Platform Tests 参加の呼びかけ CSSの仕様はどうやって作られているのか TPACとは TPACとは、W3Cのテクニカル プレナリー・
[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ
フォームをスタイルするのが苦手、という人は少なくないと思います。 中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。 そんなbutton要素のデフォルトのスタイルを美しくするために、button要素のスタイルの仕組みを紹介します。
![[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b3e71fb3eb3cf86833906de9afc4e34c028aa15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018051604.png)
[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
![[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張](https://cdn-ak-scissors.b.st-hatena.com/image/square/971099afcdbec5ce4d85c8447e3cda9402d0849b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018052507.png)
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査
フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。 5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。 The Front-End Tooling Survey 2018 by Ashley Nolan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Q1. フロントエンドの経験年数 Q2. CSSの知
:target - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
JavaScript界隈の基本的な用語を歴史とともにさらにまとめてみた - Heppoko Binbo Yarou no Newbie Nikki
2018/12/23 リンク切れしていたものを削除 & リンクを追加 https://qiita.com/sinsengumi/items/e20342d13cbdd7ac2304 を読んで、すこしだけもやもや感がぬぐえなかったので、適当に自分が思ってる「今のJavaScriptはこんなかんじ」というのを書いた。 EcmaScript だいじなこと EcmaScriptとは、プログラミング言語ではない。 EcmaScriptとは、Ecmaインターナショナルが決めているJavaScriptの言語仕様のこと。 Ecmaとは、European Computer Manufacturers Association の略で、要は世界のコンピュータ関連の仕様を決めてる闇の組織みたいなところ。 （→History of Ecma） なんでEcmaScriptとかいうものがあるのか？ 大昔、JavaScr
何が間違っている? JavaScript のトラブルシューティング - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象
これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 Firefoxを開発するMozillaは、Firefoxにおいてこれから開発されるWeb関連の新機能はすべて安全なコンテキスト（Secure Context）のみを対象にすると、Mozilla Security Blogの1月15日付の記事「Secure Contexts Everywhere」で明らかにしました。 安全なコンテキストとは？ 安全なコンテキストとは、W3Cのドキュメント「Secure Contexts」で厳密に定義されています。日本語での説明はMDNの「Secure Contexts」で読むことができ、次のように説明されています。 (HTTPS / TLS を介して) コンテンツが安全に配信され、安全ではないコンテキストとの通信の可能性が限られているという合理的な確信
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
Sassの教科書 改訂2版が刊行！大幅にパワーアップして、新機能や実務に役立つテクニックがいっぱい！
Sassの教科書が大幅に内容を強化し、改訂2版として刊行されました！ 当ブログのビジターも多くの人が愛用したと思いますが、改定前のを持っている人も、もちろん持っていない人もSassをもっと使いこなしたい人にかなりオススメの一冊です。 Sassのインストールは初心者に分かるように優しく、よく使う基本的なテクニックは丁寧に、さらに高度なテクニックは詳しく、基本から実践までこの一冊で完璧に身につけることができます。 本書はSassが大好物な著者陣によって執筆された、愛に溢れた教科書です。さまざまなプロジェクトで培われたSassのノウハウが、惜しげもなく記されています。 Sassを使う人はもちろん、Sassってなんか敷居が高いと感じている人にも、明日から実務で使えるテクニックがしっかり学べます。
ブラウザのCSS解釈方法についての衝撃事実 - Qiita
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. sampleクラスを見つける 2. 1の子孫のtable要素を見つける 3. 2の子孫のtd要素を見つける 4. 文字色を赤くする 正しい見解 上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 全てのtd要素を見つける 2. 1の先祖要素にtable要素が存在するかを確認 3. 2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 文字色を赤くする このように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです 何が問題か？ 例えば、以下のようなHTMLコードがあったとします。 上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO
【CSS】calcの使い方！計算式で幅などの値が指定できて便利！ | Handy Web Design
を使って計算することができます。これは普段の計算でもよく使うので簡単ですね。 calcの具体的な使い方 実際にいくつか例を元に使ってみたいと思います 基本的な計算 何か足したり、引いたりしたいという時にはこのような書き方になります。 See the Pen boGxoP by tatsuya nakafuji (@handywebdesign) on CodePen. 全て同じ幅になるように設定してみましたが、このように普段でも使うような計算式で数値を設定することができます。 パーゼンテージ(%)も使える 使えるのはpxや数値だけでなく、パーセンテージ(%)も使えます See the Pen calcを使った実例２ by tatsuya nakafuji (@handywebdesign) on CodePen. 自分でわざわざ計算して指定する必要がない分、指定が楽になります。この書き方だ
CSSの読み込みを高速化するための5つのポイント
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール![[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/debac5ced80c80ee248dfc210d9fa594af0e6ca3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080310.png)
CSS Nite LP54「Coder's High 2017」（2017年11月4日開催）
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ![[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46fb0222c516388a0be1ca6e64e87199e362865/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073001.png)
