普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
:hover時にpre要素を暗く
mediaHACKというサイトで:hover時にpre要素の背景が反転するようになってて、「おっ」と思ったのでパクりました。通常時から暗いとコードが目立ちすぎて気になるし、他の部分と合わせようとコントラストを弱めると読みづらいのでどうにかしたいなーと前々から思っていたのですが、これはなかなか良さそうな解な気がします。 pre { color: inherit; /* rgb(0, 0, 0) */ background-color: rgba(0, 0, 0, 0.2); } pre:hover { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } すぐ戻しそうではある。 追記 「チカチカして、目に悪い」というもっともな意見を貰ったので、このサイトでは使うのをやめました。ほぼ反転くらいにしてしまうと明度差が激しすぎるの
フレキシブルなボタン
ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。 Demo: Flexible Button ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。 button { padding: 0 1em; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.75em/1em; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); height: 1.9em; background-image: linear-gradient( top, rgba(255, 255
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がアイコンの前景をつなげたスプライ
結局どうすればいいの？ - 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グラデーションのちょっとしたテクニック #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
SimpldR: livedoor Readerをシンプルに
しばらく前からユーザー・スタイルシートとユーザー・スクリプトのコンビネーションでlivedoor Readerをシンプルにして使うようにしていて中々快適なのでまとめてエントリにしてみる。キーボードでサクサク操作できて快適ウハウハとかじゃなくてシンプルな画面でマウス・ホイールを使ってひゅいんひゅいん読む感じ。 ユーザー・スタイルシート ヘッダの色などを排除するのがメイン。userContent.cssに以下のCSSを追加する。 /* livedoor Reader ----------------------------- */ @-moz-document domain("reader.livedoor.com") { * { font-family: "Lucida Grande", "Trebuchet MS", sans-serif !important; } pre, code,
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
リデザインとborder-radiusとtext-shadow
でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
jQueryプラグイン: Query YQL
Yahoo! Query Language - YDNに式を指定するだけでクエリを投げられ、コールバック関数で結果を受け取れるようにするQuery YQLというjQueryのプラグインを作った。jQuery.getJSON()でもそんなに手間がかかるわけではないけど、エンドポイントとかcallback=?とか書くのがちょっと面倒だったのでプラグインにした。実装するのに2分、名前を考えるのに15分。 ソースを見ればわかる通り、jQuery.getJSON()とほぼ同じで、jQuery.get()のラッパー。将来を見据えてエンドポイントは設定で指定できるようにしようかと少し考えたけど、それは別にQuery YQL v2(またはQuery YQL v1)プラグインとか作ってやれば良さそうだと思ったので実装しなかった。色々オプション設定できるようにして複雑化させたらこのプラグインを書いた意味ないし
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" コミットする時に記録されるユーザー名とメ
Version Control for Designersを訳した
Gitを使い始めた時に読んだドキュメントのひとつであるVersion Control for Designersを日本語に訳した。for Designersとタイトルについているが、そのことは忘れて読んだ方が良いと思う。 このドキュメントは開発者向けではない。かといってデザイナ向けの特別な何かがあるわけでもない。主にターゲットになるのは、 バージョン管理システムをほとんど触ったことがない人 ちょっとは使っているけどブランチとか良くわからない人 他のを覚えるのがやっとでGitとか言われても困るという人 あたりになると思う。内容はGitの基本的なコマンドの使い方を通して、バージョン管理システムをざっと説明するとかそういう感じ。これを読めばあとはヘルプだけで良いというようなものではないが、Gitを始める時のとっかかりにはなると思う。 deployとかcodebaseとかうまい訳語が思いつかない。
Version Control for Designers
このドキュメントは Version Control for Designers の日本語訳であり、元のドキュメントと同じくソースコード管理に予備知識がまったくない人を想定している はじめに リポジトリの構造 ブランチ 作業の流れ ブランチを切る その他の便利なツール ベスト・プラクティス はじめに What have you done for me lately? バージョン管理、ソース管理やリビジョン管理とも呼ばれているものはあらゆる開発に必須である。なぜなら基本的にはメールやインスタント・メッセンジャーと同じようなコミュニケーションをとることができるツールでありながら、人々の会話ではなくソースコードを元にして機能することができるからだ。 バージョン管理 他のプログラマと簡単に意思の疎通を図ることができる 開発チームでコードを共有することができる デプロイしている「製品」バージョンを別個
rev="canonical"
海の向こうで一気に議論が過熱したrev="canonical"ネタ。ざっくりまとめると、TwitterやSMS等の文字数制限のあるメディアで長いURLを投稿するためによく使われてるURL短縮サービスはアレだよね……というところから始まって、じゃぁ個々が自前で短いURLを用意してやって機械的に辿れる仕組み、rev="canonical"を使おうぜ！ という感じ。 URL短縮サービスの提供する短いURLは、on url shortenersで触れられているようにいくつもの問題点がある。一番身近なのはスパムの温床になっていること。インバウンドリンクの追跡が不可能であることなんかも気になる人が多いかもしれない。この話題が再燃した一番大きな原因はDiggBarの登場で、そこらへんの細かいところは短縮URLは必要悪か、単なる悪か。に詳しい。 「短縮URLは必要悪か、単なる悪か。」の最後で触れられている
2年半弱ぶり
Yahoo! Pipesとかで(今さら)遊んでたら、久しぶりにブログとかも書きたくなったのでちょっとだけ。CSSもちょっと。色を変える気力は無いくせに、AdSenseいじる気力はあったよ！ タイトルロゴはSegoe ScriptのBoldを横に1.25倍にして反時計回りに5度回転させただけ。ダンボールにサインペンでサインした感じだと思って見てください。本文にCorbelとかCalibri、Candaraを使ってみようと四苦八苦したけど、どうやってもメイリオと合わないという……。Verdanaってすごいな！ 配信しているRSSをPipesに移したりとかしてたら面倒になったのでズバズバ削除したりとか。広告付けてみたりとか広告付けてみたりとか広告付けてみたりとか。GWくらいまでは付けたままで。新たに追加したのはエルミタージュ秋葉原やバッファローのドライバ更新情報など。 Pipesの使い方は少し覚
HTMLヘルプのソースを公開
HTMLヘルプはHTML Help Workshopで逆コンパイルできるのだけど、抜き出されたHTMLのファイル名がテキトウ極まりないものだったり(うろ覚え)とか色々アレだったと思うので、元にしたHTMLファイルにHTML Help Workshopのプロジェクト・ファイル群を加えてzipアーカイブにまとめ、公開しておくことにした。 css2-src.zip html-4.01-src.zip perl-5.8.8-src.zip prototype.js-1.4.0-src.zip domref-src.zip HTMLヘルプのプロジェクト・ファイルは単純な内容のものなので、目次やキーワードの追加などは容易にできる。また、CSS2とHTML 4.01のHTMLヘルプをマージして新しいHTMLヘルプにするとかも、プロジェクト・ファイルのソースがあればものの数分でできる。 「ここがおかしかっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@biglobe.jp