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のテクニカル プレナリー・
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の知
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 は比較的新しい
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のコードを整理し、効率的に管理する方法のまとめ
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門
floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ
【初心者使い方講座】プログラムを書かない人も Visual Studio Code を使ってみよう！【エディタ】 - Milkのメモ帳
Visual Studio Code（VS Code） インストール 実際に使ってみる 新規作成 拡張子のついたファイルを開く 検索やグレップ 最後に こんにちは。Milkです。 皆さんは、文章を書くときに何を使っていますか？ 今回は、Microsoftが提供する、「Visual Studio Code」についてご紹介します。 略して「VS Code」ですね。 使い方も難しくありませんし、そもそもメモ帳のような使い方なら使い方と言うほどでもありません。 「こういうものはプログラムを書く人が使うんでしょう？」って思うかもしれませんが、私はプログラムを書くとき以外にも重宝してます。 Visual Studio Code（VS Code） では、私がどういう使い方をしているかというと・・・ ね？ 普通のメモ帳でしょう？（笑） もう少し専門的な用語で言うと、こういった文章入力を支援するようなアプリ
HTML5/CSS3のニュースやTIPSなどのまとめ (2017年7月27日)
1,922円、出版社：技術評論社、著：片山暁雄／松下享平／大槻健／大瀧隆太／鈴木貴典／竹之下航洋／松井基勝
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
ES6 In Depth: Symbols – Mozilla Hacks - the Web developer blog
ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript standard, ES6 for short. Note: There is now a Vietnamese translation of this post, created by Julia Duong of the Coupofy team. What are ES6 symbols? Symbols are not logos. They’re not little pictures you can use in your code. <pre> let 😻 = 😺 × 😍; // SyntaxError </pre>
CSSだけでつくるメニュー集めました | 楽天ティップスRakutenTips
パーツをストックしておくと後で引き出して使えるので便利ですよね。悩んだら既存のパーツを使って作業効率を上げていきましょ♪ Pure CSS Transition Effects For Off-Canvas Views
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」
https://handywebdesign.net/2017/09/css3-calc/
CSS Nite LP54「Coder's High 2017」（2017年11月4日開催）
HTMLやCSSを100問特訓！パズルゲーム「Super Markup Man」
