not good but great

プログラミング、アート、映画・本の感想について書きます。

html

アレみたいなアプリティザーサイトPakussoをつくった

Pakusso https://github.com/naoyashiga/Pakusso サイトを久しぶりに作ってみた。 gulp-load-pluginsを使うとプラグインをまとめられて便利だった。 var $ = require('gulp-load-plugins')(); autoprefixerでブラウザのバージョンを指定できるのは初めて知っ…

placeholderはIE9では効かない

Can I use... Support tables for HTML5, CSS3, etc 困ったもんだぜ。 ちなみplaceholderのstyleを変えるのは以下のようにする。 ::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } ::-moz-placeholder { color: #999; } :-…

Chrome Tech Talk Nightに行ってきた

Polymerのステッカーをもらった。テンションあがるw Googleのすごい人がいっぱい来てた Chrome Tech Talk Night #8 (2015/07/16 19:30〜)connpass.com Google の Developer Relations チームのメンバーが、PolymerやService Worker、Material Design Liteに…

オリジナルはてなブログテーマをGruntでLessを自動コンパイルして作るための環境設定

オリジナルテーマを作る Lessで編集できる このへんを見てると、作り方が載っていました。ただせっかくLessでBoilerplateを編集できるのだから、Gruntでタスク管理して楽チン編集したいと思いました。 はてなブログテーマ制作の手引き - ヘルプ - はてなブロ…

sinatraで宣言したインスタンス変数をSlimで使用する

index.slimに変数を渡す myapp.rb get '/' do @tweets = client.user_timeline('naoyashiga') @pageTitle = "naoyashiga tweets" slim :index end 以前のエントリではhtmlにつぶやきを渡してはいませんでした。今回はindex.slimに変数を渡したいと思います。…

middlemanでslimを使う

こちらを参考にしました。 Middleman + Slim + Herokuでブログをつくりました - ROCHAS slimを読み込む Gemfileに以下を記述。 gem "slim" ターミナルよりslimを読み込みます。 $bundle install

compassのimage-urlの設定に「../img」という相対パスを設定する

compassのimage-urlの設定に「../img」という相対パスを設定したかったのでやってみました。 image-url compassにはimage-urlという便利な機能があります。・参考 Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイ…

AngularJSを使って「真木よう子Viewer」を作り始めた

「真木よう子Viewer」とは? demo Maki Yoko Viewer

「○んこ」から連想する言葉を投稿するWebサービスをつくった

nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。naoyashiga/nko · GitHub GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweetボタンを作成…

SVGをアニメーションさせて線を描画する

デモ ボタンを押すと線がアニメーションして描画される。SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。 Animated Checkboxes and Radio Buttons with SVG | CodropsそこでSVGのアニメーションについて紹介…

項目名をクリックしてradioボタンをcheckedにする方法

inputタグに閉じタグはいらない 書いている途中に迷って調べてみた。br, img, hrにも閉じタグはいらない HTML5の閉じタグについて | NO:111 | Webデザインリリック labelタグにforを設定する <input id="sample" type="radio"><label for="sample">Hello World!</label> labelタグを加えて、属性forの値をid名にすれば、ra…