2013年現在にHTML5でサイトを作るときに気をつけたいポイント

新しい自作ブログテンプレートを作ることを決めて、「HTML5 + CSS3」というモダンな枠組みを選ぶことにした。当然Webで調べながら作業ということになるんだけど、そこには事前に予想していなかったトラブルが潜んでいた。一通り作業が終わってHTMLをチェックしていたら、後から手直しが必要だと必要とわかった場所が結構出てきてしまっていたのだった。 原因は参考にした記事の内容が(ブログでなくても)古くてアップデートさ...

IE9の「Tableタグ+hover+scroll」で縦幅が広がるバグで大いにはまる

横幅を決めたdivタグにTableタグを流し込み、CSSの「overflow:auto」で動かせる表のようなHTMLを作っていたら、IE9だけなぜか異常な動きをする。具体的にはTableの中のリンクにマウスカーソルを合わせると、下部の要素がどんどん下に移動してしまう。文字で書いても恐らくよくわからないと思うので、下のサンプルページにIE9でアクセスして確かめてほしい。 IE Tableバグ テストページ Tableタグの中の「Link」や「Link2...

Webページを各ソーシャルサービスへ投稿(追加)するためのURLまとめ

毎回必要になるたびに検索したり、メモを探したりする羽目になるのでまとめておいた。必要になったものは順次追加予定。 はてなブックマーク http://b.hatena.ne.jp/append?[ページのURL] もしくは http://b.hatena.ne.jp/entry/add/[ページのURL] ページのタイトルは自動的に取得されるので、クエリに含めるのはURLだけでいい。 ブックマーク一覧ページ http://b.hatena.ne.jp/entry/[ページのURL] ...

角丸を表現するCSS3のborder-radiusのブラウザ対応状況を調べてみた

現在はまだ規格がきちんと定まっていないのと、ブラウザの対応状況の問題であまり使われてないCSS3なんだけど、もし普通に使える状態になったら多用されることが予想されるのが「border-radius」というプロパティ。これはCSSで指定するだけで角丸(丸い角)が作れるプロパティで、今現在角丸の表現に使われてる「角に丸い画像を使う」「空のspanなどを使って擬似的に丸く見せる」などの面倒で手間がかかる方法をとらなくて済むとい...

Webサイトの表示フォントとして「Meiryo UI」を使う

Windows Vistaが登場した当時、XPからの以降メリットのひとつとして「見やすい・読みやすい新フォント『メイリオ』が搭載された」というのがあった。残念ながらVistaは大して普及しないまま終わってしまったので「商売上の大きなウリ」にはならなかったようだけど、その後メイリオはXPでも公式に使用(ダウンロード)できるようになって、一部の企業サイトやブログで使用される程度には普及した。もちろん「フォントは優先順位を決...