grid-template-areas - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
The Nu Html Checker (v.Nu)
…where FILES are the documents to check, and OPTIONS are zero or more of the following options: --errors-only --Werror --exit-zero-always --stdout --asciiquotes --user-agent USER_AGENT --no-langdetect --no-stream --filterfile FILENAME --filterpattern PATTERN --css --skip-non-css --also-check-css --svg --skip-non-svg --also-check-svg --xml --html --skip-non-html --format gnu|xml|json|text --help --
CSSに三角関数が欲しくなった日
CSS Values and Units Module Level 4では、CSSから使える数学関数として三角関数（sin()やcos()など）が定義されています。まだWorking Draftということもあり、現在のところこれらをサポートしているのはSafariのみのようですが、情報自体は数年前から出ており、目ざとい人やサイトからは紹介されています。 ところが、あまり具体的な用例が紹介されているのは見ません。そこで、この記事では筆者が三角関数を使いたくなった事例を紹介します。 具体例は、下記のようなスクロールアニメーションを持つ斜めのグラデーションです。これをどう実装するか考えてみましょう。 斜めのグラデーションの表現方法 止まっている斜めのグラデーションをCSSで表現すること自体は簡単です。次のようにrepeating-linear-gradient()を使って斜めのグラデーションの画
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
ブラウザーと画像のEXIFのお話 - Pastalablog in はてな
追記 (2020/02/17) 各ブラウザが足並みを揃える形でCSSのimage-orientation属性の初期値が from-imageになりそうです。以下各ブラウザの対応状況です。 Chrome: 158753 - chromium - An open-source project to help move the web forward. - Monorail 3月にリリース予定のChromeのバージョン81以降で有効になる予定です Webkit: 89052 – Implement css3-images image-orientation r254187で入って、Safari Technology Preview 99に含まれています Firefox: 1607667 - [css-images] Consider changing initial value of 'imag
React で簡単に遅延読み込みを実装できるライブラリを作りました - 陽気なサイとエクストリーム！
はじめに どうも、さぃと (@saitoeku3) です。 突然ですが、あなたは自作のライブラリを公開したことがありますか？ 僕は公開したいと思いつつもなかなかできずに年を越してしまいそうだったので、思い切って公開しちゃいました。 ネタは最近よく使っている遅延読み込みと Gatsby.js + Contentful 関連の2つあったのですが、今回は前者の方です。(後者もそのうち公開します) 作ったもの github.com 返り値の ref を任意のエレメントの ref に渡すだけで遅延読み込みをしてくれるカスタムフックを利用できるライブラリです。React での使用を想定しています。 今までにもいくつか遅延読み込みをしてくれるライブラリはあったのですが、コンポーネントベースで利用するものが多くて使いづらかったという問題を解決しています。(強引な押し売り) 特に差別化できると思っているのは
CSS Injection 再入門
本稿はセキュリティキャンプ 修了生進捗 #seccamp OB/OG Advent Calendar 2018 の 17 日目として書かれた記事です。一時期よく話題に上がっていた CSS Injection を, 改めて眺め直してみたいと思います。 はじめに #seccamp 2012 Web セキュリティクラス卒業生のつばめ(@lmt_swallow, @y0n3uchy)です。セキュリティ・(ミニ|ジュニア)キャンプに最近カメラ片手に出没しています。来年も頑張るぞい。 卒業生進捗 Advent Calendar らしいので, 最初に少しだけ, 自分の近況について触れておくことにします。 自分の今いる大学は 2 年生までは教養学部に所属せねばなりません。そのため大学では心理学や脳科学, 数学(のさわり)の勉強をたくさんしています(授業に潜ったり)。そうしてこれまでの趣味とは外れたことに熱
Chrome Dev Summitで披露された高速化のテクニックの数々（所感を含む） - アシアルブログ
こちらのブログではご無沙汰しています。田中です。今週はサンフランシスコにて開催されたChrome Dev Summitに参加させていただいていました。今年はweb.devの発表や新しいPageSpeed Insightsなど、例年にも増して盛りだくさんの発表が行われましたが、特に「スピードの改善テクニック」が数多く披露されたように思います。 Chrome Dev Summitのプレゼンテーションはすべて濃厚で、しかも多くの内容は「web.dev」に詳しく説明されています。ここでは、2日間にわたって行われたセッションを振り返りながら、高速化に関する内容をざっくりと追っていきたいと思います。 以前と比べて、WebサイトのJavaScriptコード量は8倍に膨れ上がっている V8の言語機能を今後も最適化していく：Promise、Async & await、フレームワーク対応等 ReactのHoo
Resemble.js : Image analysis
Compare two images? Drop two images on the boxes to the left. The box below will show a generated 'diff' image, pink areas show mismatch. This example best works with two very similar but slightly different images. Try for yourself! Don't have any images to compare? Use example images Why? Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. Howe
Webpack
Module Bundler Think Browserify with more Webpack vs Browserify Works with almost any module system AMD, CJS, UMD, Component, Latest Hipster Module System (LHMS) Can require in CSS, Images, Fonts etc. Uses CJS syntax to load modules var angular = require('angular'); angular.controller('foo', function() { }); Loaders Like browserify transforms Think CSS preprocessors ES6 Module Transpilers Convert
PNG軽量化の減色と圧縮について | GREE Engineering
このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この「なんとかして 256 色にする」というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。（この記事では減色アルゴリズムについての説明は省略します。） テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1 ピクセルあたり 24bit 必要だった画像が 1 ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 （パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code
GitHub - sachinchoolur/lightGallery: A customizable, modular, responsive, lightbox gallery plugin.