ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
![CSS in JS と CSS Modules // Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/47d3743a91444b353e975a8eba728867f5e42a7d/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F427da522bd3040458eeb305d4608cf21%2Fslide_0.jpg%3F5625803)
ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
Reactを少しずつ使い始めていて、コンポーネント指向でコードを書いていけるところが自分の経験だとDelphiのような感じでとても良い。 JavaScriptとHTML(JSX)を1つのスクリプトにまとめることができたのは良いのだけど、そうするとやはりCSSも一緒にまとめたくなってくる。 それでReactとCSSについていくらか調べてみた。ちなみにElectronで動作すれば良いので、Blinkのことしか考えていない。 CSS in JS そもそもReactでCSSは普通どういう風に書くのか調べてみた。 React.js + CSS React: CSS in JS ひとつのやり方ではあるけども、style属性に一つ一つ指定していく方法。 辛くない?疑似要素は?疑似クラスは?継承してもらいたいプロパティとかもあるんだけどな〜 scoped CSS せっかくコンポーネントにするのだし、CSS
親要素に transform をかけると子要素の position: fixed が absolute 扱いになってしまう。これはブラウザ関係なくどのブラウザでも起こるようだ。 サンプルはtranslateXになっているが検証した結果scalerotateskewでも同じ現象が起き、ここまで起これば試していないがもちろんmatrixでも起きるだろう。 CSS Transforms Module Level 1のW3C Working Draftにもissueとして記載されているが、バグレポート(バグレポートの中身が理解できてないが)の方は、もう1年半ほどほったからしになっている。 タスクはちゃんと処理して!
No worries, you've got this! You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all <p> elements) and applies the margin-bottom style. To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you'll advance
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット(GPU)を用いてセントラル・プロセッシング・ユニット(CPU)の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
Webページ中に縱ラテンを使ふ方法を紹介します。CSSを設定できるWebページには簡単に導入出來ます。 Web Fontとして設定する Web Fontを使用すれば縱ラテンを簡単にWebページで使へます。CSSでは font-family 属性に依り文字に字體を指定できます。Web Fontに依れば、自前の font-family を指定したり、閲覧者がOSに install しなくても表示する字體をWebページ作成者が用意し指定出來ます。@font-face directive で自前の font-family を定義できます。 @font-face { font-family: vertical_latin; src : url("/public/Vertical_Latin_Calligraphic.otf"); } .verticalLatin { letter-spacing:
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features. CSS clutter When designing an application it’s a common practice to set aside a set of brand colors that will be reused to keep the look of th
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
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest adventure by Francisco Dias from HubSpot. I saw Francisco and Cris Necochea give this as a quick, fun presentation at the Show & Tell at CSS Dev Conf this year. He graciously agreed to prepare it for a blog post! 19 ways to override a background colo
I'm Tab Atkins and I work at Google. @tabatkins xanthir.com/+ xanthir.com xanthir.com/talks/2015-11-11 Houdini Makes CSS customizable Kissing cousin to the HTML Custom Elements work Guy Steele said the only way to preserve a language is to make it user-extensible https://drafts.css-houdini.org https://github.com/w3c/css-houdini-drafts/ Nearest-Future Houdini Parts Custom Properties redux Isolated
この記事はピクシブ株式会社 Advent Calendar 2015 の9日目の記事です。 qiita.com こんにちは。アルバイトのhakatashiです。以前の小説縦書き機能についてのpostではたくさんの拡散を頂きありがとうございました。おかげで褒賞のAmazonギフト券3000円を入手できました。ウハウハ。そして拡散に協力してくれた後輩へのおごり代に消えました。どうやら世の中は上手くできているようです。 今回は、pixivにはあまり関係ないですが、普段携わっている小説関係の業務にかこつけて、CSS3のあまり知られていない新機能、Segment Break Transformation Rules と、それを今すぐ使うための自作ライブラリを紹介します。前回と違ってがっつりエンジニア向けの内容となっているので、まったりと書いていきます。 HTMLで日本語を書きたい人間の一般的ストーリ
Style Validator is a new html/css validator with chrome extension or bookmarklet."Validation in the Browser". Style Validator is a new CSS Validator that check computedStyle NOT syntax. Chrome Extension (for only chrome browser) Style Validator 0.2.5 Differences from W3C CSS Validator and Existing html/css Validator. This will NOT detect syntax error. Instead, detect layout broken CSS Properties.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く