2015-01-01から1年間の記事一覧
XML, DOM, JSON, APIなどの略称を変数の命名等で使う時のフォーマット統一したい(して欲しい)。 XMLHttpRequest XML、 Extensible Markup Language（エクステンシブル マークアップ ランゲージ） ウィキペディア: Extensible Markup Language Http、 Hyperte…
今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…
JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…
LightTableは下記のディレクトリに各プラグインのフォルダが置いてある。(OS Xの場合)*1 ~/Library/Application\ Support/LightTable/plugins/ ここにプラグインのリポジトリをクローンして、LightTableを再起動すればアップデートは完了する。 下はRuby Ins…
訳あってMySQLをインストールした。 Homebrewを整える。 $ brew doctor $ brew update MySQLをインストール。 $ brew install mysql ==> Downloading https://homebrew.bintray.com/bottles/mysql-5.6.25.yosemite.bottle.tar.gz Already downloaded: /Libra…
前回のエントリー 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を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。 実際にページ内で使う事を考えると、全部画像にした方が結局出来ることも多…
カテゴリーで分類するアレです。 はじめに図解します。 元となる<a>要素 display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。 inline-blockの要素は流れこむ inline-block inline-block inl</a>…
タイトルで使っています。 text-shadowをブラーを掛けずに８方向に落とすことで白抜きっぽくなります。 .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…
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>…
htmlの中の任意の要素のdata-eval属性の値をJavaScriptとして実行するだけのモジュールです。 npm: evaluable-tag インストール Nodeがあってnpmが使える場合は、 npm install evaluable-tag npmがない場合はgithub: evaluable-tagからダウンロード。 使い方…
RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…
はてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。 編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。 これをローカルでデザインを完成…
はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…
Font Awesome 今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。 サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。 文字コードやfont-familyを意識しなくても使える 前知識として「Web Fontでアイコ…
疲れた。 ちなみにモバイルのデザインはProに入ってないので変わってないです。 個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。 公式テーマから流用した部分 ほとんどはゼロから書きましたが、CSSリセット、セレ…
初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。 生DOMいっぱいさわりました。 ブラウザで検索・置換 いくつかサンプルコードを見ているとDocument.body.innerHTMLを正規表現で検索・置換するものが多かった、 というのはつまり以下…
