読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

CSS

Stylus JavaScript API とプラグインの仕組みについて

先日 foovar という Stylus のライブラリを公開しました。 Stylus の変数を JS ファイルにエクスポートするためのライブラリです。 memowomome.hatenablog.com その時に調べた Stylus JavaScript API の詳細や、プラグイン作成の方法です。 仕様の変更などに…

Stylus の変数に JS からアクセスする方法を考える

transition 、animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。 それでも、どうしても JavaScript で操作したい時…

flexbox-grow, flex-shrink, flex-basis について

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた…

Case Studies in Flexbox - flex-grow, flex-shrink, flex-basis

flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 See the Pen Case …

CSSの先頭に書くやつ

// Stylus * position relative リセット系CSSと併用することを前提にしています。 使用するライブラリにbox-sizingの設定がない場合は以下も追加します。 // Stylus :root box-sizing border-box * box-sizing inherit box-sizingに関してはsanitaze.cssを…

flexアイテム内のスクロールを有効にする

やりたいこと display: flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示…

width、heightがautoの要素にtransitionを適用する

CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…

Stylusのあまり知られていない機能

というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10px…

button要素にはflexboxを使わないほうが良さそうです

<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。 IEではまだ試していない。 調べてみるとどうやらこういう事らしい。 stackoverflow: Flexbox not working on <button> element in some browsers The problem is that the <button> element</button></button></button>…

ライブカメラと時計のやつをElectronアプリにした

前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 (超優秀な同僚が組んだ物を流用している) アカベコマ…

時計と世界各地のライブカメラの映像を組み合わせた何か

GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…

decafjsを使ってappend-cssをアップデートしました

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。 たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてび…

CSSをStylusの構文にコンバートする

CSSをStylusの構文にコンバートするオプションがStylusに用意されていることに今日気づいた。 既存のプロジェクトでCSSからStylusに移行したい時とかにはいいかもしれない。 -Cもしくは--cssオプションを使用する。 $ stylus -C path/to/source.css ./source…

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…

setTimeoutの挙動について

JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…

StylusでスキューモーフィックなCSS3ジェネレータを作った(続き)

前回のエントリー githubにアップしました。 github: all-user/stylus-skeuomorphic npm: @alluser/stylus-skeuomorphic Demo: Cassette Deck Controls 各ボタンの記号はFont Awesomeです。 このブログでも使用しています。 PlayとRecのボタンは<input type="checkbox" style="display: none;">と<label>を組み合わ</label>…

StylusでスキューモーフィックなCSS3ジェネレータを作った

ゴールデンウィーク中はずっとStylusを触ってた。 CSS3を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。 実際にページ内で使う事を考えると、全部画像にした方が結局出来ることも多…

タグをCSSで描く

カテゴリーで分類するアレです。 はじめに図解します。 元となる<a>要素 display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。 inline-blockの要素は流れこむ inline-block inline-block inl</a>…

text-shadowで白抜き文字を作る

タイトルで使っています。 text-shadowをブラーを掛けずに8方向に落とすことで白抜きっぽくなります。 .outline-cha { color: white; text-shadow: black 1px 1px 0px, black -1px 1px 0px, black -1px -1px 0px, black 1px -1px 0px, black 1px 0px 0px, b…

append-cssというnpmモジュールを作った

CSSルールを追加するだけのモジュールです。 npm: append-css インストール Nodeがあってnpmが使える場合は、 npm install append-css npmがない場合はgithub: append-cssからダウンロード。 使い方 ブラウザの場合 browser/build.jsを読み込む。 <script src="browser/build.js"></script> <script> var appe</script>…

RoomMirrorというnpmモジュールを作った

RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…

はてなブログのカスタムCSSをローカルで編集する

はてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。 編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。 これをローカルでデザインを完成…

はてなブログのシンタックスハイライトにCodeMirrorを使う

はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…

はてなブログでFont Awesomeを使う

Font Awesome 今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。 サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。 文字コードやfont-familyを意識しなくても使える 前知識として「Web Fontでアイコ…

はてなブログのカスタムCSSをゼロから書き直した

疲れた。 ちなみにモバイルのデザインはProに入ってないので変わってないです。 個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。 公式テーマから流用した部分 ほとんどはゼロから書きましたが、CSSリセット、セレ…

RealDOM再入門

初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。 生DOMいっぱいさわりました。 ブラウザで検索・置換 いくつかサンプルコードを見ているとDocument.body.innerHTMLを正規表現で検索・置換するものが多かった、 というのはつまり以下…

Ruby, RSpec, CoffeeScript, Node.js, gulp, browserify

もろもろはじめました。 何を書いていいのか分からなくなるので、メモはこまめに取らないとダメですね。 ザクッとした感想(雑感) あれこれ悩んでいるより、とにかく触ってみるのが一番だなと思いました。 新しかったり、自分の知らない技術の紹介とかを見…

CSSスプライトによるアニメーションでプログレスバーを作ってみた

オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。 ダイナミックHTML - Wikipedia javascriptグラフィックス - デモページ HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら…

javascriptでjavascriptのシンタックスハイライト

このブログにコードを載せる際のシンタックスハイライトの為に作った。 基本的にはキーワードを正規表現で拾ってきて<span>タグで囲むだけのもの。 正規表現リテラルと文字列リテラルは複雑になったので分けて処理。 結局思い通りに動くまで2日か3日ぐらいかかっ</span>…