JavaScript でスタイルシートを構築する CSSStyleSheet
CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ全体に適用されます。 const styleSheet = new CSSStyleSheet();
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
voxel.css
var scene = new voxelcss.Scene(); scene.rotate(-Math.PI / 8, Math.PI / 4, 0); scene.attach(document.body); var world = new voxelcss.World(scene); var editor = new voxelcss.Editor(world); editor.enableAutoSave(); if (editor.isSaved()) { editor.load(); } else { editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } View in JSFiddle var voxel = new voxelcss.Voxel(0, 0, 0, 10
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
iPhoneのブラウザ上で30FPS以上でヌルヌル動く3Dゲームを作ってみた - 最高のコンピューティング環境とは？
iPhoneでのCSS 3D Transforms利用の可能性を探るために、CSS 3D Transformsを使って3Dゲームを作ってみました。 javascriptによる3DゲームですがiPhoneのブラウザで結構スムーズに動きます。 デモページ http://ndruger.lolipop.jp/hatena/20110705/css_3d_game/css_3d_game.htm 動作環境 iPhone4 OS 4.3 Chrome14, Safari5 iPhone用ゲームですが、デバッグ用にマウスのドラッグでも操作できます 非対応環境の例 Android 傾きがブラウザから取れないので動きません。 iPod touch 第2世代 OS 4.2.1 deviceorientationイベントが発火しないので動きません。devicemotionイベントは発火するのでそちらで回転の検
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
CSS Text Wrapper
The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code
JavaScriptでCSSパーサーを書くための情報を収集中(1日目) - latest log
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できればそれでいい。 ブラウザに CSS の解釈を任せなきゃいいんじゃないか? まずは、JavaScript で CSSパーサーを書くための情報収集からです。 わかってること ロード済みのスタイルシートは、document.styleSheets に擬似配列として格納されています。長さは document.styleSheets.length から取得できます。 スタイルシートの各ルールは、cssRules (IE なら rules)に格納されています。 document.sty
CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - latest log
「CSSセレクタって、CSSのルールで絞り込みはできても、CSS(スタイル)で絞り込みができないんだ…」って思ったことはありませんか? 実験的なテーマになりますが、styleプロパティの値を、CSSセレクタでクエリーできるように構文を拡張してみました。 # 構文や機能に対する改善案をお待ちしています。 スタイルで絞込みを行う場合の基本的な構文は、E { prop operator value } 以下のバリエーションを用意しました。 prop の値は、計算済みの値(currentStyle または getComputedStyle())の値と比較します。 IEで、currentStyle(element).width === "auto" なケースがありますが、そのような場合でも "auto" を px単位の値に自動的に変換したうえで比較します(つまり div{width="auto"}
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ
フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
CSS JSON
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS. CSS JSON Structure { "selector-1":{ "property-
JavaScriptでブラウザのフォントサイズを検出する方法:phpspot開発日誌
A List Apart: Articles: Text-Resize Detection When you design for the web, you don’t know what software people will use to experience your site, and you don’t know what capabilities your users (and their software) have.CSSとJavaScriptでブラウザのフォントサイズを検出する方法。 ブラウザの各々のフォントのサイズって検出できないと思っていましたが、JavaScriptを使うことでそれが可能です。 これにより、次のことが可能になります。 ・ フォントサイズに合わせたデザイン調整 ・ アクセスログに新たなデータを追加(利用者はどのぐらいのサイズで自分のページを見ているか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - daybrush/scenejs: 🎬 Scene.js is JavaScript & CSS timeline-based animation library
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
CodePen - Front End Developer Playground & Code Editor in the Browser
http://jpschwinghamer.com/sandbox/leds
http://youmos.com/news/mochaui
http://livsey.org/experiments/textareatools/?