画像をBase64でHTMLファイルに直接埋め込む方法
画像をBase64にエンコード（変換）して直接HTMLファイルに埋め込む方法をメモしておきます。 ※この記事は過去の記事を最新情報に加筆修正したものです。 Webサイトの高速化技術のひとつとして、HTTPリクエスト数を減らす目的で用いられることもあるインライ ...
リンクのtarget=_blankには「rel=noopener」でセキュリティ対策
リンクを新規ウィンドウ（タブ）で開く「target="_blank"」のセキュリティ対策としての「rel="noopener"」についてメモしておきます。 外部サイトへリンクする際に便利なtarget="_blank"ですが、フィッシング詐欺に利用されてしまう可能 ...
CSSのappearanceを使ったセレクトボックスのカスタマイズ
セレクトボックス（select要素）のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を ...
スマホサイトのデザインプレビューに。モックアップHTML（iPhone）
スマホ対応サイトのデザインを、クライアントに確認してもらう際に使えるiPhone画面をイメージしたHTMLモックアップをダウンロードできます。 レスポンシブWebデザインも主流になり、Webサイトのスマホ対応が急速に進んでいる昨今、クライアントや代理店などに画像ベ ...
jQuery：ページ内リンクのスムーススクロール
jQueryでプラグインを使わずにページ内リンクのスクロールをスムースにする方法です。 ページ内リンクのスクロールを滑らか（スムース／スムーズ）にするためのjQueryプラグインを見かけることは多いですが、スクロールのためだけに結構なファイルサイズを読み込むのは気 ...
jQuery：下からスライドインするメニュー
jQueryを使って、ウィンドウ下部に固定（FIX）させたメニューを下からスライドインさせる方法です。 ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。 上部のメニューと違っ ...
コーディングの品質UPと時短ツール7選
コーディングの品質アップと負担軽減・時間短縮に役立つオンラインツール。様々なツールがありますが、よく使うものは自然と決まってくるものです。今回は、普段よく利用するツールをいくつかご紹介したいと思います。もちろん、どれも無料で利用できるものばかりです！ ...
CSS：オンマウス（hover）で画像をフェードする
CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像に ...
CSS：ウィンドウ全体の内側にボーダーをつける
ウィンドウ全体の少し内側にボーダーをつける方法をメモ。デモはこちら。 bodyいっぱいにボーダーを付けた（ように見える）タイプのものは、ネットで検索すればいくつかの方法がヒットしますが、それではありません。 bodyのサイズよりも少し内側にボーダーを設け、ウィン ...
IE6-7でボタンのテキストを非表示にする
IE6-7でボタンのテキストを非表示にする方法が意外すぎるので、自分用にメモ。 先日、本ブログ design edgeのデザイン変更のためにコーディングをしていたところ、IE6-7でSubmitボタンのテキストを非表示にできず、つまずきました。 以下、元のソース ...