メモを揉めスマートフォン用の表示で見るメモを揉めお勉強の覚書。ライブラリを公開しました。ファイルにエクスポートするためのライブラリです。詳細や、プラグイン作成の方法です。animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。コンテナ内のスペースをどれだけ占有するかを指定します。Flexboxflexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。あれもこれもと入れていたら無駄に長くなりました。リセット系CSSと併用することを前提にしています。使用するライブラリにbox-sizingの設定がない場合は以下も追加します。flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。FlexboxCSS3のtransition。一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。プログラミングというより、自分が最近知った機能。Stylusではハッシュが使えます。シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。Flexbox<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。IEではまだ試していない。調べてみるとどうやらこういう事らしい。アニメーション前の投稿で作ったデモをElectronで包んでアプリにしてみた。Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。プログラミングGWはこれを作ってました。時計と世界各地のライブカメラの映像を組み合わせたものです。APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。以下の操作が行えます。Babelnpmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。TipsCSSをStylusの構文にコンバートするオプションがStylusに用意されていることに今日気づいた。既存のプロジェクトでCSSからStylusに移行したい時とかにはいいかもしれない。-Cもしくは--cssオプションを使用する。npm今日もよく燃えてますね。いった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。このエンブレムは非常に単純な図形とルールで出来ています。アニメーションJavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。githubにアップしました。このブログでも使用しています。スキューモーフィックゴールデンウィーク中はずっとStylusを触ってた。CSS3を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。プログラミングカテゴリーで分類するアレです。inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。プログラミングタイトルで使っています。text-shadowをブラーを掛けずに8方向に落とすことで白抜きっぽくなります。BrowserifyCSSルールを追加するだけのモジュールです。append-cssからダウンロード。browser/build.jsを読み込む。Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。この記事はドキュメントの内容に修正を加えつつまとめたものです。TipsはてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。Tableはてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。Awesomeを使った。サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。ちなみにモバイルのデザインはProに入ってないので変わってないです。個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。プログラミング初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。生DOMいっぱいさわりました。Browserifyもろもろはじめました。何を書いていいのか分からなくなるので、メモはこまめに取らないとダメですね。あれこれ悩んでいるより、とにかく触ってみるのが一番だなと思いました。アニメーションオライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。プログラミングこのブログにコードを載せる際のシンタックスハイライトの為に作った。基本的にはキーワードを正規表現で拾ってきて<span>タグで囲むだけのもの。正規表現リテラルと文字列リテラルは複雑になったので分けて処理。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。