サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
css.studiomohawk.com
はじめに Vimにおける設定ファイルである.vimrc。 私のGoogleサーチによる他者の知の結晶とも言える.vimrcはgithubにあるので、参考になれば。 .vimrc Vimで覚えるべきポイントは大きく分けて3つ。 コマンド、プラグイン、そして設定。 この記事ではその3つにVimについての情報源を追加した4つを軸にしつつ、時系列でエントリを追記する形をとることにする。 なお、プラグインを追加する際、設定も同時に行う場合が多いがその場合はプラグインのエントリに記述する。 また同様に覚えたコマンドをより簡単に呼び出すための設定もコマンドのエントリに記述する。 私のVimに対するアプローチは、Ruby on RailsとjQueryのコアメンバであるYehuda Katz氏の記事、Everyone Who Tried to Convince Me to use Vim was W
CSS Radar For Frond End Developers Recent Articles 必携Mac OSXアプリ12 30 Jul Vim - ビギナーズサバイバルガイド 24 Jul Git - フロントエンドデベロッパのためのgit 23 Jul Jekyllを使ってブログをつくろう 11 Jun ウェブデザイナのためのRuby入門 14 May Read More Windowsでも、Ubuntuでも、Macでも。これまでどんな環境でも少しでも楽になるためなら、どんな苦労も厭わないという生き方を選んだ私は数多くのアプリを愛用してきた。 今の私のメイン環境はMac OSX。もちろんLionにアップグレードしたばかり。 すでに知っての通り、HTML + CSS + JSを駆使しながら、現役フロントエンドデベロッパ/ウェブデザイナとして生計を立ている。 そんな私がどうし
Preface (Update: 2011/07/24) Vimにおける設定ファイルである.vimrc。 私のGoogleサーチによる他者の知の結晶とも言える.vimrcはgithubにあるので、参考になれば。 .vimrc Vimで覚えるべきポイントは大きく分けて3つ。 コマンド、プラグイン、そして設定。 この記事ではその3つにVimについての情報源を追加した4つを軸にしつつ、時系列でエントリを追記する形をとることにする。 なお、プラグインを追加する際、設定も同時に行う場合が多いが、その場合はプラグインのエントリに記述する。 また、同様に覚えたコマンドをより簡単に呼び出すための設定もコマンドのエントリに記述する。 私のVimに対するアプローチは、Ruby on RailsとjQueryのコアメンバであるYehuda Katz氏の記事、Everyone Who Tried to Co
CSS Radar For Frond End Developers Recent Articles Jekyllを使ってブログをつくろう 11 Jun ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr Read More Amazon S3にて静的ファイルによるウェブサイトを構築できるようになり、Amazon Web Serviceが日本リージョンを追加したことで、これからJekyllのような静的ファイルジェネレータを使ったブログが日本でも増えるのではないか。 Jekyllといえば、このCSS Radarも今年1月からwordpressを離れ、Jekyllを使ってブログを構築している。 (残念ながらまだAmazon S3でのホ
CSS Radar For Frond End Developers Recent Articles ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr Read More Terminal.appは怖い。 GUIでなんだって出来る時代にパソコンに出会った私にとっても、それは変わらない。 Macをメインで使い始める前、たっぷり3年以上もUbuntuというLinuxディストリビューションをメインで使っていた私でも、Terminalで何かをしなければならない時しか開くことはなかった。 MacVimをメインのエディタにしてから3ヶ月ほど、年明けからJekyllを使ってブログを作成しはじめた。Rubyを覚え
CSS Radar For Frond End Developers Recent Articles ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr Read More CSS Radarと名がついている割には、CSSの話があまりないなと最近になって気がついたけれど、誰も気にしちゃいないだろう。 今回はCSSやデザインからはほど遠いように思えるRubyについて。 前にも書いた気がするが、私は極度の面倒くさがり。とにかく楽をするためなら、どんな苦労もいとわない。 Rubyにチャレンジしている真っ最中ながら、色々な新しい概念に触れ、色々な新しいワザを覚え、少しずつながら、面倒なことを楽にすることもでき
CSS Radar For Frond End Developers Recent Articles ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr Read More 長い間、Adobe Photoshopはウェブデザインのデファクトアプリとして君臨してきた。もちろん、今も私のMac MiniにCS4がインストールされている。 しかし、個人プロジェクトはもちろん、すでに会社のプロジェクトでも私はPhotoshopを卒業しつつある。 Firefox + Firebugとお気に入りのエディタ(Vim)。そしてCSS3があれば、Photoshopを使わなくてもデザインができる。 Hardboiled W
CSS Radar For Frond End Developers Recent Articles ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Read More ハードウェアの値段が下がり、ネットの接続環境も高速化していく。ブラウザも高速化を競い合っている。 それでもなお、GoogleもYahoo!、FacebookもTwitterもページのロード時間を短縮するテクニックを生み出している。 なぜだろうか？ もちろん、カスタマの満足度を上げ、終局的には売り上げに貢献するからだ。 GoogleもYahoo!も世界で1位2位を争うほどすばらしいデータセンタを所有しているのだから、早くて当たり前。 なんて思って
CSS Radar For Frond End Developers Recent Articles LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan Read More If it ain’t broken, don’t fix it. 壊れてないなら、直す必要はない。 CSSは追加してほしい仕様はあるけど、壊れている、とまでは感じない。プログラミングの何たるかをまったく理解していなかった私にも簡単に覚えられた。 SASSやLESSのようなCSSの拡張が完全に悪だとは思わないが、絶対に必要だとも感じない。 でも、知っておくともっとシンプルに、もっとパワフルに、もっと素早くCSSを書くことができる、プラスアルフ
CSS Radar For Frond End Developers Recent Articles ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan レスポンシブウェブデザインについて 24 Jan Read More ワイヤフレームって作ったことありますか？ ワイヤフレームはウェブページのコンテントを視覚的に表現するドキュメントの中核を担う存在。 建築用語でいうところのブループリントと同じだろうか。 52 Weeks of UXによると、UXデザイナにとってなくてはならないモノであり、IAのベストフレンド、とさえある。(Wireframing is not a religion) 私が現在働いている会社にはもちろん、UXデザイナという職種もないし、IAという職種もない。デ
CSS Radar For Frond End Developers Recent Articles HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan レスポンシブウェブデザインについて 24 Jan CSS RadarをJekyllで作り直し 23 Jan Read More フロントエンドデベロッパな人たちはウェブ開発プロジェクトを始めるにあたり、HTML、CSS、JSのスケルトン(必要最小限の記述をしたファイル達)を含んだディレクトリを持っている人が多い事だろう。 私も個人のプロジェクト、仕事でのプロジェクトともに、それぞれに少しだけカスタマイズを行うだけで開発を始めることができるディレクトリを持っている。 今回紹介する(おそらくすでに紹介するまでもないほど知られているが)HTML5 BOILER
CSS Radar For Frond End Developers Recent Articles ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan レスポンシブウェブデザインについて 24 Jan CSS RadarをJekyllで作り直し 23 Jan Read More バージョンコントロール。まだ始めていなかったら、今からでも遅くはない。 作業用フォルダがstyle.bk20110128なんて名前であふれている なんでこの変更したのか、覚えていない。もう3ヶ月も前の話だし 誰が最新のファイル持ってるかわからないまま、作業を開始、もう1度やり直し HTMLであろうと、CSSであろうと、JSであろうと、何であろうとソースコードを人間は必ずどこかで例のような目にあうのだ。 バックアップも、更新履歴も、システムでやればいいじゃない。を解決してくれるの
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
“CSSセレクタはHTMLを救う“にて、これまで利用する機会が少なかったCSS2.1で定義されているセレクタを紹介した。そこでも触れたように、今回はCSS3で定義されるセレクタについて紹介しよう。 この記事はCSS 3 selectors explained | 456 Berea Streetでの説明を翻訳し、デモを追加したもの。オリジナルの記事の作者にこの場を借りて感謝したい。 また、現時点のブラウザサポートの状況については、CSS – Contents and compatibilityこちらを参考にしてほしい。 部分文字列一致属性セレクタ – Substring matching attribute selectors このセレクタグループには、 E[att^=”val”] E[att$=”val”] E[att*=”val”] という3つのセレクタがある。その名前の通り、このセ
Dropboxの底力 私はDropboxのヘビーユーザ。 すでに50GB($9.99/月または$99/年)は残り60%に達している。 ファイルの同期、共有、公開。シンプルながら面倒なタスクがシンプルにできることが最大の魅力だ。 The Ultimate Dropbox Toolkit & Guideにて30以上のTips&Tricksが紹介されていたが、 iTunesのライブラリを同期 Eye-Fi経由で撮った写真をiPadで閲覧 ローカルサーバ用のwwwフォルダに設定 TextExpanderとBreevyのスニペットを同期 メール添付ファイルをDropboxに格納 ソーシャルメディア用プロフィール画像の格納 とベーシックな機能以外に様々なライフハック的な活用法がある。 D.B. デモボイラープレート 様々な機能の中でも意外に見落としがちなのが、publicフォルダの存在だ。 その
FirefoxはGoogle Chromeにスピードでは勝てないが、今のところ開発環境としての地位は揺るぎない。 Firebug。 その地位はこのプラグインの存在によって守られていると言ってもいいだろう。 今回は、もはやCSSの開発に欠かせないFirebugの使い方について、基本から、応用までを、そして便利なFirebugのエクステンションも合わせて紹介したい。 JavaScriptのデバッガとしてのFirebugについては、特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社にあるので、そちらに任せ、CSS RadarではHTML/CSSについての使い方を解説しよう。 Firebugの基本 Firebugはもちろんインストールしてあるとは思うが、もしまだなら、FirebugかFirebug :: Add-ons for Firefox
YUI 2: Grids CSSやBlueprint、そして今回紹介する960 Grid Systemに代表されるCSSグリッドシステムは、ご存知の通りCSSによるグリッドベースのレイアウトを早く、簡単に作るために存在する。 なぜグリッドが必要なのか？ ルールなし、無制限のランダム(Fig.2)が美しくはないとは言い切れないが、グリッドを利用した場合(Fig.1)ではパターンを認識しやすく、情報をより整理しやすくなる。 グリッドシステムは、デザインにおいて、秩序を作り出す、もっともシンプルで、強力なツール。 シンプルであるため、面白みのないデザインしか作り出せないと思われがちだが、必要最小限の構造はグリッドシステムに任せてしまい、その構造の上で自由なデザインを生み出すことに専念する、という考え方もできる。 960 Grid System by Nathan Smith 幾つかのグリッドシス
CSSのみでFloatをクリアする - Clearfix クリアする必要のあるdivなどにclass=”clearfix”を追加すれば、 HTMLに{ clear: both }を設定したClassやbr clear=”all”などを追加することなくFloatをクリアできる。 .clearfix { display: inline-block; } .clearfix:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close comme
CSSでカラムのheightを合わせる Tableレイアウトをしていた時代に簡単にできたことがCSSでできない。 いまだにフルCSSへ移行できないという場合によくあるのが、複数カラムを採用する場合のそれぞれのカラムの高さが同じにならないこと。 Tableレイアウトでは、基本的にはTDの高さはもっとも高いTDに合わせるという状態なので、とくに意識せずとも実現できたが、CSSではそうはいかない。 CSSでカラムheightを合わせる方法 通常CSSでは左図のように、mainカラムとsidebarカラムの高さは合わない。それぞれのカラムがもつ内容がそれぞれのカラムの高さを決めるからだ。 通常であれば、それぞれの高さが異なっていても気にならないが、背景画像がある場合や、カラムごとに異なる背景色を敷いている場合などレイアウトの基本構造的に「ケツをあわせ」ないと気になる。 まずはHTMLから <d
CSSスプライトとは？ CSSスプライトという言葉を聞いたことがあるだろうか？ ナビゲーションなどで画像を利用した際にマウスオーバーで画像を切り替えるという効果を加えるのによく利用される手法だ。 その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。 CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、 CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。 なぜCSSスプライト？ CSSスプライトはなぜこれまでの手法よりも優れているのだろうか？ 大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろ
IE ダブルマージンフロートバグをFix Internet Explorer 5、5.5、6にもっとも不可解とも言えるバグがある。 それが、ダブルマージンフロートバグ。 ダブルマージンフロートバグとは？ floatした要素に対して、同じ方向にmarginを与えると、marginが2倍になってしまう。 というバグ。 図解すると上記の様になる。 .content { float: left; margin-left: 30px; } というようにすると、IE5〜6では .content { float: left; margin-left: 60px; } というように解釈される、ということだ。 見落としがちなのは、margin: 10px 0 0 30px；というように省略式で書いた場合。 もちろん、この場合もmargin-left部分の値は倍になってしまう。 修正方法 修正は意外と
次のページ
このページを最初にブックマークしてみませんか？
『CSS Rader - Tips and Tricks, Sometimes with jQuery』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
