これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ

背景画像のサイズは複数の要素で共通なのでまとめて指定し、その後に個別の要素に背景画像を指定するという場合があります。 例えば以下のような見た目を作りたい場合なんかがそうでしょう。 HTMLはインスペクターか何かで見ていただくとして、関係あるCSSは以下のようになっています。 .test li { background-position: center top; background-repeat: no-repeat; -webkit-background-size: 50px 50px; background-size: 50px 50px; } .test .red { background-image: url(http://maboroshi.biz/clearskysource/wp-content/uploads/2012/09/nya01.png); } .test .blu

今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio

と、思ったのですがlist-styleなんかは普通に使えるのでダメってこともないみたいです。 Facebookでファンページを作ったさいには、FBMLというアプリケーションを追加してやればオリジナルなコンテンツを設けることが可能です。HTMLとCSSをササっと書けば自分好みのデザインにすることも可能ということで実際に触ってみました。弊社のファンページは以下になります。 Facebook | まぼろし また、「Facebookのファンページを自由にカスタマイズする方法 | Webクリエイターボックス」にあるように、style要素内にスタイルを書いてしまうとIEでダメな感じみたいですし、そもそもhead要素外にstyle要素を書くのはどうなの？ってのもあるのですが、いちいちインラインにするのは面倒なのでstyle要素内にスタイルを書いています。 各要素がどうなっているのかな FBML内にHTM

先日「まめことネコゼのどたばた会議」の収録模様がUSTREAMで配信されていました。収録も終わってまめこさんとネコゼさんがまったりとお話している中で、ネコゼさんが作っているモジュール一覧（とかコンポーネントコレクションとか言われているやつ）のお話になったときに、それっぽいのを公開しましょうか？とつぶやいてしまったのでこのエントリーを書いてます。 で、結論から書きますと、とても申し訳ないのですが、実際にクライアントさんに納品したものしかないため、なかなか公開は厳しい感じです。ただ、それではあまりにも申しわけなさ過ぎるので、弊社内でざーーーっくりと決めているコーディングのルールと、今まで他社さんが作ったものなんかも見てきた経験で、モジュール一覧ってこんな感じのことが書かれていますよねということを公開しますね。 株式会社まぼろしのちょっとした決まり 弊社ファイルサーバ内に入っている、コーディング

こもりまさあきさんのエントリー「TextMate+Zen-Codingで超速コーディング？」を発端にして、ブログやTwitterでZen-Codingに関する話題が熱くなっています。 こもりさんのエントリーではTextMateにZen-Codingを追加していますが、僕は持っていないのでDreamweaverに入れて使ってみました。 Dreamweaverへのインストール方法 zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOGを参考にインストールしましたので、ご参照ください。 これできないのかー、ということでちょっとカスタマイズ こもりさんのエントリーを参考にいろいろと書いてみました。Dreamweaverのコードビューを良く使う自分にはたしかにめっちゃ便利ですね。ただインストールした段階ですとちょっと足りないなと思うこともあ

CSSには:focus擬似クラスというものがあります。ちょっと前ですとフォーカスされているフォームコントロールの見栄えを指定するネタがにぎわったので覚えている方も多いことでしょう。例えばこんな感じです。「フォーカスのあるフォームの装飾を変化させる – スタイルシートTIPS ふぁくとりー」。 さて、:focus擬似クラスはinput要素だけに指定するためのものではないんですよね。ページを閲覧している方が、何かの要素にフォーカスを合わせている状態の装飾を行うことが可能です。例えば、a要素には必ず:hover擬似クラスを指定して、リンク項目にカーソルがあたったことを分かりやすくするようにしている、という方も多いでしょう。そんな方は、必ず:focus擬似クラスもセットで指定してみてはいかがでしょうか？ :hover擬似クラスと:focus擬似クラスをセットで指定することで、キーボードのみでページ