少し前に書いた失われたウェブ制作のベスト・プラクティスという記事の公開後、やはりある程度まとまった形の文書が必要なのではないかという気分になった。そこでHTMLはどのようなことに気を付けて書くと安定したものになるのかという視点で、悪い例と良い例を併記したHTML Best Practicesという文書を作成した。 それぞれにそれぞれの理由はあるが、その解説は簡単ではない。歴史的な背景を始めとした様々な点からの落とし所であり、それら前提となる物事について書くとなると膨大な量になりうる。そのためコード例で悪いものと良いものを併記するだけに留めておいた。 こうなっていると、「なぜ」がわからないという面もあるが、「これをこう書けるのか」というような面もある。啓蒙的な意味合いが強い文書にも関わらずカジュアルに読めるため、悪くはないのではないかと思う。 現時点でほとんどの要素の書き方についてはひと通り

Coding in colorという記事を読んだ。どのようなものか、通常の構文強調とはどのように違うか、は僕が言葉で説明するよりもそのデモを見てみた方がわかりやすい。記事ではtypoに気づきやすいとかあるけど、どちらかというと読むのに向いていると感じる。 GitHubのコード・ビューワーやウェブログの記事のコード・ブロックのように、ハイライト規則を読む人が知らない(ことがある)ようなケースだと、こういう色付けの方がスタティックな色付けよりも読みやすいような気がする。 とか書きつつ、結構前からウェブログのコード・ブロックには色付けは必要ないと考えていたりもする。色付けをしないと読みづらいほど長いコードを丸々載せると、記事の文章が分断されて読みづらくなるし、短いコードなら色付けが必要になることはまずない。コメント部分のみコントラストを下げるみたいなので十分な気がする、と、そういうJavaScr

git-release.jsでファイルと行の指定をまとめて設定する良い方法を考えてた。結局はコロンでつなぐという古き良き感じにしたけど、ウェブではこういうのにも使えそうなのをRFC5147 - URI Fragment Identifiers for the text/plain Media Typeで仕様を決めているらしい。何行目かだけじゃなくて何文字目から何文字目までみたいなのが出来るようだ。 以下はExamplesの簡単なメモ。 http://example.com/text.txt#char=100 text.txtの100文字目。 http://example.com/text.txt#line=10,20 text.txtの11から20行目。line=10が10行目と11行目の境界ということ。 https://example.com/text.txt#line=,1 text.

このWebサイトのフッターで使用しているアイコン画像(PNG)の高解像度とPSDのセットをZIPにまとめました。白と黒それぞれ256pxのPSDと256/128/64/32pxのPNGが入っています。正方形に切り出してファイル名をちゃんと付けるのが面倒だったので縦長のスプライト画像です。 Download: ShiroKuro Social Icons v1.5 含まれるアイコンは、 フィード メール Webサイト Twitter はてなグループ GitHub Flickr Last.fm Delicious はてなブックマーク Facebook Wufoo Amazon Pinterest 以上の14種類です。増える予定はありません。 諸事情によりパブリック・ドメインやCreative Commonsにはできそうもなかったので、簡単な使用条件だけを同梱しておきました。リサイズとは言えない

Webフォント遊びの一環として、M+ Outlineの1cと1mのRegularからLatin付近、つまり半角英数と記号を抜き出してサブセット化し、WOFFを作ってみました。M+ Outlineの半角英数はかなり好きなので、Windowsのブラウザでもそのあたりを満喫できたらなぁという感じです。 Demo: M+ 1c Latin & M+ 1m Latin WOFFファイルとして公開するのは後のメンテナンス的に面倒そうなのでData URI化してHTMLにぶち込んでいます。欲しい人はアレをアレしてアレからアレで保存してください。ライセンスはM+ Outlineと同じです。 Google Web FontsからPT Sansなどを使うくらいなら、メイリオやヒラギノとの相性的にM+ 1c Latinの方が良い感じなんじゃないでしょうか？　Regularだとちょっと負けるかもしれないので、Me

段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切り線をつけるにはどうすれば良いのでしょうか？ 結論としては::beforeと::after擬似要素を組み合わせて頑張るということになります。例えば上記CSS-Tricksのサンプルの最後の例やCekerholicなどで見られるセクション記号(§)の左右に罫線がつくようなデザインを作ってみます。 Demo: Section/Paragraph Divider hr要素の場合は結構簡単なものです。 hr { border: none; border-top: 1px dotted #666; position: relative; he

ちょっと何を言っているのかよくわからないですね。つまり:target擬似クラスでpadding-topを使うことによって、アンカーでページ内ジャンプ(<a href="#foo">...</a>とかで飛ぶやつです)した時に上部に余白をとってやろうというアイディアです。こうすることによって上部にメニューを固定していても重ならなくすることができるでしょうし、そうでなくても多くの場合ジャンプした先のコンテンツに対してキレイに余白が確保できるんではないかと。 Demo: Refine Anchor Jump with :target Section #4に飛ぶリンクはデフォルトのもので、描画領域の上端に見出しが来てしまっています。Section #7に飛ぶリンクが:targetを使って改良したもので、上部に少し余白が確保されていることと思います。 #test7:target { padding-t

Open Source InitiativeのMITライセンスのページのURLを使ってMITライセンスと明示している人は結構多いと思います。ライセンス全文コピペするの面倒ですしね……。ただその場合は権利者の名前等を予め書き、ライセンス条項については以下のURLを参照……などと注意書きも含めた方が無難です。そういうのを「忘れるし！　面倒だし！」と思ったRemy Sharpがmit-license.orgというウェブサービスを作ってくれました。 登録するとユーザー名をサブドメインとしたURLが確保されます。例えば僕の場合はhail2u.mit-license.orgです。このページを見るとわかるように権利者の名前と発行年、オプションとしてWebサイトのURLにリンクを張れたりもします。 curlでJSONを送りつけるという方法でも登録できるみたいですが、JSONファイルの登録とバッティングした