スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
VimからHTMLHintを使う
HTMLの簡単な文法チェックには長らくValidator.nuのAPIを利用していたけど、Node.jsパッケージのHTMLHintがそこそこ使えそうだったので今はこっちを使っている。ローカルで動くと気軽に使える度が増す。ただデフォルトでインストールされるCLIプログラムはリッチな感じの出力にしか対応していないので、ちょっと扱いづらい。Vimのデフォルトのerrorformatに応じた形でチェック結果を出力するだけのNode.jsスクリプトを書いて使ってる。 Download: htmlhint and htmlhint.vim あらかじめグローバルにHTMLHintをインストールしておく必要がある。htmlhintをパスの通った場所に、htmlhint.vimを~/.vim/compilerディレクトリにコピーし、~/.vim/vimrcなどで以下の様に設定してやるとインストール完了。
ベンダー拡張プリフィックスヲ削減セヨ
Translation of: Cutting down on vendor prefixes とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。 以下の例ではどのプレフィックスを、使用しているのなら、使用しているかの注釈をつけておきました。だいたいが削除でき1行で済ませられるにも拘らず、様々なベンダー拡張プリフィックスと共に使われてしまっていることが多いCS
引用元の表記
blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語：citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
code要素の直前・直後で自動折り返しを発動させる
code要素の内容には途中で折返しされない長い文字列が入ることが多い。例えばinsertAdjacentHTML()であるとか。こういった文字列が行をまたぐ時、その手前にある文字(上記スクリーンショットでは「は」の文字)まで次の行に送られることがある。これはブラウザーにより挙動が違うが、CSSで大体のブラウザーで巻き込まないように調節することができる。 Demo: Force Auto-Breaking Before/After code Element Chrome 29の場合code要素の前の「は」が次の行に送られてしまう。code要素の前に句読点やカギ括弧などが来るとそれらとその前の文字までが次の行に送られたりもするので、場合によってはとても美しくない感じになってしまう。デモを見てもあまり違いがわからない感じではあるが、もっと極端な例を考えるのが面倒だった。 code::before
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
既に起動しているgVimの新しいタブでdiffを行う
Vimのdiffがすごく楽なので使いまくり始めた。単にgVimを新たに起動してdiffを行うだけならば、-dオプションとファイルを2つ渡してやれば良い。が、既に起動しているgVimの新しいタブでdiffを行う方法がわからない。--remote-tab-silentオプションを追加するだけではうまくいかないようだ。色々調べたところ、公式MLのアーカイブにあったスレッドで、--remote系のオプションではExコマンドを1つ指定して実行することができるので、それを利用してvertical diffsplitを実行してやれば良いことがわかった。 つまり、foo.txtからbar.txtとの差分を既に起動しているgVimで開く場合は、 $ gvim --remote-tab-silent +"vertical diffsplit bar.txt" foo.txt とする。foo.txtを既に起動し
ベンダー独自拡張について取り上げること
Webの世界は独自拡張だらけなのでそのことについて積極的に知る必要はある。けどそれについて個人的に使い方とかを具体的に書くことはリスクでしか無い。どうやって使うものかとかは大体ベンダー側がドキュメント化していて、それは変更があったら修正されるので、それにリンクを張れば良い。修正することのないであろうブログ等で具体的に書くのは意味がないを通り越して害悪になりうる。Twitterとか流れて忘れられるメディアなら良いけど。 例えば::-moz-placeholderとか::-webkit-input-placeholderとかいう便利な代物がある。プレースホルダー文字列のスタイルを指定するための擬似なんとかだ。便利というか場合によっては必携に近いので、これについて書きたい気持ちはわかるんだけど、どういうものかということならともかく使い方をWebに流すのは害悪にしかならない。まず間違いなくどちらか
VimのCSS3シンタックス・ファイルみたいな何か
VimでCSSを書いていると、最近のCSS3プロパティでもやもやした感じになるのはまぁしょうがないかな……と見ないふりをしていた。が、@mediaでブロックを作った時に最初のセレクタのハイライトに失敗するのとかにムキーとなって、もうこれは駄目だと思ったので、既存のCSSシンタックス・ファイルをCSS3に対応させた感じにする追加シンタックス・ファイルを作成した。はじめてのVimシンタックスファイル(もどき)。 Media Queriesでブロック化した時に以下のような感じで最初の行のハイライトが失敗する。 最初のセレクタだけなのだけど、どうも落ち着かない。これを、 とMedia Queriesの条件式も含めてちゃんとハイライトされるようにする。 他はHTML5の新しい要素やCSS3のプロパティや、値のキーワード、calc()やhsla?()などの関数などになんとなく対応させただけ。確認は十分
Tango Vimアイコン
SVG形式のかわいいVimアイコンを見つけたので、Inkscapeを使ってPNGにラスタライズし、更にそれをIcoFXでWindows形式のアイコンファイルにしたものを作った。ライセンスはCreative Commons Attribution 3.0で配布元と同じ。 Download: vim-tango-icon.zip 含まれるアイコンは、 32bit 256*256, 128*128, 96*96, 72*72, 64*64, 48*48, 32*32, 24*24, 16*16 8bit 256*256, 48*48, 32*32, 24*24, 16*16 4bit 256*256, 48*48, 32*32, 24*24, 16*16 の19種類。無駄に多い。24bit＋アルファチャンネルのPNGファイルも同梱してある。Dockとかにはこっち使うと良い(の？)。もっと大きい(
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
リデザイン @ 2011-02-07
へるべちかにゅ～！ CSSが20KBオーバーと肥大化してきたのでダイエットしようと思ったらいつの間にか全部書き換えていた。でも頑張っても13KBにしかならなかった。 以下、覚書。 Reset CSSの変更 リクエストの削減のためにYUIのCSS ResetとCSS Fontsを使うのをやめ、CSSファイルにEric MeyerのReset CSSを参考にしたものをベタに書くことにした。Reset部分はパブリック・ドメイン。欲しかったらCSSのソースからコピペでどうぞ。meyerwebのReset CSSとの違いは、 address, caption, cite, code, dfn, em, strong, th, var { font-style: inherit; font-weight: inherit; } h1, h2, h3, h4, h5, h6 { font-size: 1
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
リデザインとborder-radiusとtext-shadow
でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可
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" コミットする時に記録されるユーザー名とメ
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
Firefox 3のfilefield要素
Firefox 3のオプション設定ダイアログやダウンロード・ダイアログなどに存在するfilefield要素。nsIFilePickerなどと組み合わせてファイルやフォルダを指定するために使うもののようだけど、MDCに書いてないので使い方が全然わからなかった。けどソースをgrepして探して読んでみたら、ファイルやフォルダの指定に特化したものだったのでそんなに難しくなかった。ということで使い方のメモ。 よくある使い方であろうダイアログでアプリケーションを指定するようなケースでは、 <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <?xml-stylesheet href="chrome://mozapps/content/preferences/preferences.css"?> <?xml-styl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
