HP制作

スマートフォン端末で電話発信するa要素「tel」をPC版で無効にする方法

a要素に[href="tel:電話番号"]を指定すると、電話発信用のリンクを設定することができます。スマートフォンなどではタップするだけで直接電話をかけることが…

HP制作

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

当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。しかし、[position:fixed]でヘッダを固定している場合、ページ内リ…

HP制作

【CSS】floatで横並びさせたリスト(li)をセンタリングする方法

フッタメニューやページングナビゲーションのコーディングで、liタグをfloatさせて横並びにすることはよくあると思います。しかし、そのリスト全体をセンタリングし…

HP制作

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

Twitterの仕様変更により、近日中にTwitterボタンのツイート数カウントが表示されなくなります。10月1日から実施されると噂されていましたが、まだ大丈夫…

HP制作

【CSS】floatしたリスト(li要素)をIEで表示すると崩れてしまう場合の解決方法

CSSでリスト(li要素)をfloatした際、InternetExplorerで表示すると階段状に崩れてしまう時があります。その場合の原因と解決方法について…

HP制作

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

webには様々なHTMLタグやCSSプロパティがあります。ネットで調べれば使い方はすぐにわかりますが、読み方の書いてあるサイトは意外とありません。そのため「こ…

HP制作

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

先日ブログのカテゴリメニューをページスクロールで追従するよう変更したのですが、一部のブラウザでメニューが記事の下に隠れてしまう現象にハマりました。cssのz-…

HP制作

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

テキストにマウスカーソルが合わさるとポップアップメッセージが出てくるCSSのサンプルコードを紹介します。jQueryなどスクリプトは一切使わず、HTMLとCS…

HP制作

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

CSS3は便利ですが、IE6~8ではほとんど対応していないのが困りモノ。IE9以上でそれなりに使えるようになるレベルです。IE6はもう切っていいと思いますが、…

HP制作

【CSS】floatさせた画像の下にテキストを回り込ませない方法(サンプルコードあり)

floatを使ってテキストと画像を配置することはコーディングでよく使う記述だと思います。ただ、普通にfloatしただけだとテキストが画像よりも長くなった場合、…