Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
CSSでアイコンをデザインへの補足
追記でCSSでアイコンをデザインの対応ブラウザについてざっと書いておいたが、そこで「知らない」とか「書きたくない」とIE8のところで書いた。それをどうも意図した方向とは違う感じで捉えられてしまっているようだったので、すこしだけ補足する。すでに勢いに任せて某所でも書いてしまったがもうちょっとはっきりと書く。IE8でもこうやればできるよ！ とかいう話ではなく、もっとモヤッとした話。 そもそもIE8でもちゃんと見えるように「書きたくなかった」のは、ベンダー拡張プリフィックスすら書きたくないというような意識があるからに過ぎない。Operaでグラデーション対応するためのSVGとかももちろん書きたくはない(書いてみたら面白かったので書いちゃったけど)。実際書きたくなかっただけで、IE8でもあの程度のことならfilterプロパティで実現できる。filterプロパティには複数の背景画像を実現するのに使える
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
CSSのみでスライドして画像を切り替えるギャラリーを作る
ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a
物事をシンプルにするます
ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5！ ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？ いいよね！ ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
XPIファイルにapplication/x-xpinstallを指定した方が良い？
このサイトで公開しているFirefoxの拡張のXPIファイルにはMIMEタイプとしてapplication/x-xpinstallを指定しているので、FirefoxでXPIファイルへのリンクをクリックするとインストールの許可を求める情報バーが表示される。しかしこういった多くの人にとって得体の知れないサイトでは指定しない方が良いんじゃないかと最近になって考えるようになった。 そこらへんのサイトでXPIファイルにMIMEタイプとしてapplication/x-xpinstallを設定すると、アドオンの管理がそのサイトだけで完結し、アップロードした最新のXPIファイルを直ぐにユーザーにインストールしてもらえるようになったりする。そのためアドオン開発者的にはそこそこメリットがあると思う。ただ最近のAMOの急激なパワーアップによって、これらのメリットは薄れつつある。 一方で、ユーザーにそのそこらへん
LastPass
LastPassはパスワード管理ウェブサービス。FirefoxとInternet Explorer、Safari(OS Xのみ)の拡張ソフトウェアが用意されており、ブラウザでマスターパスワードのみで様々なウェブサイトにログインできるようになる。ブックマークレットでも利用できるのでOperaなどでもいける。しばらく前からインストールとアンインストールを繰り返していたのだけど、ようやくこれ一本で行くかという気になった。Chromeの拡張も出たところらしい。基本的な機能は無料で提供されているのでまったく困らないが、プレミアム機能に申し込むと指紋認証デバイスで一括管理できるようになったりとかちょっと興味深い。 LastPassを利用するようになるまではID Managerというソフトウェアを使っていた。常駐させておけばシステムワイドなホットキーでフォームに入力できたりとか自分に必要そうな機能は揃っ
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
gVimのラッパーを作った
gVimをタブを常に表示させ、-p --remote-tab-silentをコマンドライン・オプションに指定して、タブでファイルを開くようにしているのだけど、このオプション指定が面倒。送るにショートカットを置くとか関連付けの指定とかはさほど面倒ではないのだけど、何かしらのソフトウェアでエディタを指定する時にコマンドライン・オプションを指定できないようになっている場合とかあると途端に面倒なことになる。なので、-p --remote-tab-silentを付けてgVimを起動するだけのラッパーを作った。JavaScriptで！ Download: gvim-wrapper.zip ソースは同梱されている。必要があったらそこで更新するつもり。それほど大きなものではないのでGitHubにリポジトリを作る気はあんまりない。ライセンスはMITライセンス。gVimのパスはソース内で決め打ちなので、違うパ
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
jQueryプラグイン: Highlight Search Terms
前回のエントリで取り上げたスクリプトをjQueryプラグイン化した。だけ。GitHubにリポジトリを作って公開しておいた。基本的にはこれでもう良いやとか思ってるんだけど、URLパターンはもうちょっと何とかならないかなとかは思ってる。あとマルチカラーなハイライトを実現できるようにはしたいかも。実装はhighlight-1とかクラス名を順に振っていくだけとか簡単そうなものになると思う(そこまで考えてるなら実装しろ)。 使い方は多くのjQueryプラグインと同じで、 $("body").highlightSearchTerms(); と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。 highlightSearchTerms()にはオプションとして
back_and_forthプラグインをAutoPagerize対応に
back_and_forthプラグインではprevで時系列的に古いエントリを、nextで時系列的に新しいエントリを参照していた。そのためAutoPagerizeはSITEINFOをちゃんと書いてやらないと動作しなかった。このサイトをAutoPagerizeへSITEINFOを書かずに対応させるためback_and_forthプラグインを更新して、prevとnextが参照するエントリを逆にしてみた。このバージョンのback_and_forthプラグインに差し替えた上で適切な要素のclass属性にautopagerize_page_elementを加えてやれば、SITEINFOを用意してやらなくてもAutoPagerizeが動作するようになるはず。 既にこのサイトでは稼動させている。が、キャッシュの関係で途中でterminatedになることもある(既に古いエントリを閲覧していた場合にキャッシュ
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
