CSSのappearanceを使ったセレクトボックスのカスタマイズ
セレクトボックス（select要素）のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を ...
Mac版Firefoxでbackground-size:coverでopacityをかけると右端に線が出る
background-size:cover; を適用した要素にオンマウス（hover）でopacityをかけると、Mac版Firefoxで右端に線が出てしまう現象の回避方法をメモ。 先日コーディングをしていて、ある要素にbackground-size:cover; ...
たった一行！Adsenseの背景黄色を透過する方法
Google Adsenseバナーの黄色い背景色が出ないよう透明にする方法をメモしておきます。 Google Adsenseのコードを取得してバナーを貼り付けると、広告バナーの背景色が黄色になってしまいます。背景が何色であれ、広告バナーが表示されてしまえば問題あり ...
スマホサイトのデザインプレビューに。モックアップHTML（iPhone）
スマホ対応サイトのデザインを、クライアントに確認してもらう際に使えるiPhone画面をイメージしたHTMLモックアップをダウンロードできます。 レスポンシブWebデザインも主流になり、Webサイトのスマホ対応が急速に進んでいる昨今、クライアントや代理店などに画像ベ ...
jQuery：ページ内リンクのスムーススクロール
jQueryでプラグインを使わずにページ内リンクのスクロールをスムースにする方法です。 ページ内リンクのスクロールを滑らか（スムース／スムーズ）にするためのjQueryプラグインを見かけることは多いですが、スクロールのためだけに結構なファイルサイズを読み込むのは気 ...
jQuery：下からスライドインするメニュー
jQueryを使って、ウィンドウ下部に固定（FIX）させたメニューを下からスライドインさせる方法です。 ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。 上部のメニューと違っ ...
Firefoxで画像をフェードさせるとズレる
Firefoxで、リンク画像をフェード(fade)させると1pxほど左右にズレてしまう現象に困っていましたが、解決策があったのでメモしておきます。 Firefoxは以前のバージョンからフェードさせた画像がズレて見えるという現象がありました。ウィンドウのサイズによっ ...
コーディングの品質UPと時短ツール7選
コーディングの品質アップと負担軽減・時間短縮に役立つオンラインツール。様々なツールがありますが、よく使うものは自然と決まってくるものです。今回は、普段よく利用するツールをいくつかご紹介したいと思います。もちろん、どれも無料で利用できるものばかりです！ ...
CSS：オンマウス（hover）で画像をフェードする
CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像に ...
CSS：ウィンドウ全体の内側にボーダーをつける
ウィンドウ全体の少し内側にボーダーをつける方法をメモ。デモはこちら。 bodyいっぱいにボーダーを付けた（ように見える）タイプのものは、ネットで検索すればいくつかの方法がヒットしますが、それではありません。 bodyのサイズよりも少し内側にボーダーを設け、ウィン ...