ヘッダを[position:fixed]で固定した際、ページ内リンクの位置がずれるのを解消する方法

ノートパソコンで作業中
当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。 しかし、[position:fixed]でヘッダを固定している場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。今回はその場合の対処方法を紹介します。 ページ内リンクの位置ずれを解消する方法 CSSで調整する方法と
続きを読む

TwitterやFacebookなどの「公式SNSボタン」をオリジナルデザインにする方法

SNSボタン
Twitterの仕様変更により、近日中にTwitterボタンのツイート数カウントが表示されなくなります。10月1日から実施されると噂されていましたが、まだ大丈夫なようです。 まだ利用できるとはいえ、仕様変更は確定事項。FacebookやGoogle+でも同じような仕様変更は過去にあり、都度ソースやデザインの
続きを読む

「読み方のわからないHTMLタグとCSSプロパティ」ベスト5!正しい読み方は?

おれはデザイナーをやめるぞ
webには様々なHTMLタグやCSSプロパティがあります。ネットで調べれば使い方はすぐにわかりますが、読み方の書いてあるサイトは意外とありません。 そのため「このタグなんて読むんだろう?」という経験は、コーディングをしたことのある人なら一度はあると思います。私も間違った読み方で覚えていたタグやプロパティがた
続きを読む

CSSの「z-index」が効かない時の解決方法

キーボードの配列
先日ブログのカテゴリメニューをページスクロールで追従するよう変更したのですが、一部のブラウザでメニューが記事の下に隠れてしまう現象にハマりました。 cssのz-indexが原因ということはすぐにわかりましたが、いくら数値を変えても変化なし。このような現象が起きた場合の解決方法を紹介します。 CSSでz-i
続きを読む

【CSS】テキストや画像のオンマウスでポップアップメッセージを表示するサンプルコード

キーボードを打つ女性の手
テキストにマウスカーソルが合わさるとポップアップメッセージが出てくるCSSのサンプルコードを紹介します。 jQueryなどスクリプトは一切使わず、HTMLとCSSをコピーするだけで簡単に実装できるので楽チンです。 サンプルデモ 下のテキストにマウスカーソルを合わせてみてください。 テキストがポップアップ表
続きを読む

IE6~8でCSS3を利用可能にするライブラリ「Selectivizr.js」使い方と注意点

ノートパソコンにメモとペン
CSS3は便利ですが、IE6~8ではほとんど対応していないのが困りモノ。IE9以上でそれなりに使えるようになるレベルです。 IE6はもう切っていいと思いますが、IE8はまだ現役で使っている方もいるはずなので、できれば対応したいですよね。 そんなIE6~8でCSS3を利用できるようにしてくれるjsライブラリ「
続きを読む