Google +1ボタンの横幅を調節して空白(スペース)を消す方法

CSSでは微妙に横幅を設定しにくいために起こる、「Google +1ボタン」の横の空白(スペース)を無くすカスタマイズ方法を2種類紹介する。「全体の横幅に余裕がない」「他のソーシャルボタンときれいに並ばない」というときに役立つはず。

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

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

HTMLとCSSだけで作るFacebookの「いいね!(like)」ボタン

Facebookを利用するようになって各種サイトにおいてある「いいね!(like)」ボタンを自然に押すようになった。ボタンをおいてないところもlike bookmarkletなんかで押せるから問題ないと言えば問題ないものの、やはりサイトにおいてあった方が目に付くし押しやすいという事実はどうしても感じてしまう。 ところが先日記事ごとに「いいね!」ボタンをおいていたサイトにアクセスしたら、ボタンが消えてしまっていた。話による...

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

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