CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSS Support | Gmail | Google for Developers
Send feedback CSS Support Stay organized with collections Save and categorize content based on your preferences. You can style email sent to Gmail using inline <style> blocks and standard CSS. Most CSS selectors, attributes, and media-queries are supported. Unsupported CSS properties and selectors may be ignored by Gmail. See the reference guide for a complete list of supported CSS properties and
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
【CSS】ドット絵をぼやかさずに表示する
ドットキャラクターの様に小さなピクセルで描かれた画像をブラウザで表示すると、アンチェリアスがかかりぼやけてしまう Unityではピクセルパーフェクトをオンにするとドットをそもまま表示してくれる機能がありますね javascriptだけでドットキャラのゲームを作る場合はCSSでimage-renderingを指定すると切り替える事が出来ます 要素単位でもbodyに記述してもいいですね
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
▶ Liquid Button
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSS wormhole
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
たてよこWebアワード2017
CSS Writing Modes Overview mozilla developer networkが提供する最新の技術文書です。 Writing Modesとその周辺のCSSについて解説されています。 Mozilla Developer Network（日本語） CSS Ruby Overview mozilla developer networkが提供する最新の技術文書です。 ルビに関するCSSについて解説されています。 Mozilla Developer Network（英語） OpenType フォントのタイポグラフィ機能 mozilla developer networkが提供する最新の技術文書です。 font-feature-settingsプロパティについて解説されています。 Mozilla Developer Network（日本語） Q1. CSS Writing M
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」
2017年4月15日 CSS, 便利ツール 先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ ↑私が10年以上利用している会計ソフト！ Griddyのサイトを開くと4つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指定します。デフォルトでは3つのボックスが横並びになっていますが、4つ以上
CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法 | TechMemo
transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーション時に画像が一瞬だけ伸縮してしまうことがあります。 a img{ transition:all .3s ease-in-out; } a:hover img{ opacity:0.8; } このような現象を対処するための方法をご紹介したいと思います。 CSSアニメーションで要素が一瞬伸縮したりちらついたりする場合の対処法 要素が伸縮したりちらついてしまう現象が発生する場合は、アニメーションを指定している要素に対して、以下のCSSを追加します。 a img{ -webkit-backface-visibility:hidden; backface-visibility:hid
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
これはすごい！ メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clippy — CSS clip-path maker
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
CSS-only shimmering neon text
Griddy - CSS Grid System Education Tool