メニューの三本線アイコンを HTML と CSS だけで実装する方法

メニューの三本線アイコンを HTML と CSS だけで実装する方法

2016/01/18 HTML・CSS

スマートフォンで Web ページを閲覧している時に見かける三本線のアイコン。その見た目から通称「ハンバーガーメニュー」と呼ばれ、メニューの表示を意味しています。シンプルなアイコンで...

入力した数値を JavaScript で自動的に3桁カンマ区切りにして表示する方法!全角入力を許容する拡張機能も実装!

入力した数値を JavaScript で自動的に3桁カンマ区切りにして表示する方法!全角入力を許容する拡張機能も実装!

2016/01/13 JavaScript

数字項目、特に金額の入力項目においては、打ち込んだ数字の桁が間違っていないか確認する上で、3桁のカンマ区切りで表示されていることが重要視されます。 テキストボックス上で3桁カ...

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

2016/01/13 HTML・CSS

Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することが...

.htaccess で別ドメインから画像やスクリプトファイルへの直リンク禁止する方法

.htaccess で別ドメインから画像やスクリプトファイルへの直リンク禁止する方法

2016/01/12 サイト運営

アクセス解析を見ていると、思いもよらないファイルに直リンクされている時があります。 大半は方法がよくわからずソースのままコピーしてしまい、悪気があって行っているものではないと...

さくらインターネットサーバーで Index of を表示させないようにする方法

さくらインターネットサーバーで Index of を表示させないようにする方法

レンタルサーバーのさくらインターネットサーバーでは、ドメインのルートのアドレスへアクセスすると、次のように Index of が表示され、ファイルの一覧が丸見えになってしまいます。...

CSS で HTML 内の画像やテキストを中央寄せにする方法

CSS で HTML 内の画像やテキストを中央寄せにする方法

2015/12/24 HTML・CSS

CSS の左右中央寄せ・上下中央寄せにはいくつか実装方法がありますが、根本的な考え方は大きく分けて2つになります。 外側のブロック要素にスタイルを設定して、内側の要素を中...

CMYK RGB色空間 HSL色空間 HSV色空間 16進数カラーコードの変換ツール

CMYK RGB色空間 HSL色空間 HSV色空間 16進数カラーコードの変換ツール

2015/12/14 サイト運営

このツールでは以下「色に関するコード値」の相互変換を行います。 16進数カラーコード : CSS で利用される #FF9900 等 RGB : R レッド、G グリーン...

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

2015/12/14 HTML・CSS

文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。 蛍光ペン風...

WordPress のフィードをカスタマイズして more タグまでの内容を出力し、元記事へのリンクを追加する方法

WordPress のフィードをカスタマイズして more タグまでの内容を出力し、元記事へのリンクを追加する方法

2015/11/13 WordPress

WordPress の RSS や Atom のフィード情報の設定は、「全文を表示」または「抜粋のみを表示」の二択しかありません。 以前、RSS からブログ記事が丸パクリされ...

Facebookページの投稿における効果的なテクニック!広告として活用する上で意識したい文章の構成

Facebookページの投稿における効果的なテクニック!広告として活用する上で意識したい文章の構成

2015/10/30 サイト運営

前回 Facebook ページを広告として利用する上で、明確な目的を持った運用を心掛ける話をしました。後編では更新するにあたり、具体的に意識をした方が良いことについて考えていきまし...

FacebookページをブログやWebサイトの広告として活用する方法と運用する上での考え方

FacebookページをブログやWebサイトの広告として活用する方法と運用する上での考え方

2015/10/23 サイト運営

Facebook ページは、その特性をきちんと把握できれば、集客を目的とした宣伝を容易に行うことができます。 最初に断っておくと、Facebook ページが必ずしも大きな成果...

jQuery でテキストボックスの値を設定/取得/追記/削除を行う方法

jQuery でテキストボックスの値を設定/取得/追記/削除を行う方法

2015/10/08 基本

jQuery でのテキストボックスに対する操作をまとめました。 テキストボックスの value 値に対する操作は、jQuery の中でも基本的な処理になります。ベースとなるテ...

JavaScript で英数字や記号を全角から半角へ変換する方法

JavaScript で英数字や記号を全角から半角へ変換する方法

2015/10/07 JavaScript

ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応...

正規表現を用いて JavaScript で数値チェックを行う方法

正規表現を用いて JavaScript で数値チェックを行う方法

2015/10/07 JavaScript

JavaScript の数値チェックに isNaN 関数を利用する人がいますが、あまりオススメできない方法です。むしろ正しい仕様を理解していないのであれば、バグの温床になる危険な関...

jQuery UI Datepicker の便利機能を一気にまとめて定義!使いやすいカレンダーはこれだ!

jQuery UI Datepicker の便利機能を一気にまとめて定義!使いやすいカレンダーはこれだ!

2015/10/01 jQuery UI

jQuery UI のカレンダーによる日付入力補助機能を実現する Datepicker プラグインは、初期状態のままでは利便性が低いため、オプション設定により使い勝手を良くする方法...

アイコンをクリックして jQuery UI の Datepicker のカレンダーを呼び出す方法

アイコンをクリックして jQuery UI の Datepicker のカレンダーを呼び出す方法

2015/10/01 jQuery UI

jQuery UI の Datepicker には、様々なオプション項目が用意されています。上手く利用することで、カレンダー入力の利便性を向上させることができます。 これまで...

jQuery UI を用いてオリジナルのダイアログを実装する方法!独自のボタンや選択肢も簡単に追加できる!

jQuery UI を用いてオリジナルのダイアログを実装する方法!独自のボタンや選択肢も簡単に追加できる!

2015/09/30 jQuery UI

JavaScript には、ダイアログボックスを表示する alert 関数や confirm 関数が標準で用意されています。しかし、メッセージを表示して「OK」「キャンセル」の選択...

WordPress でスクロールにより画像を遅延読み込みするプラグイン Lazy Load

WordPress でスクロールにより画像を遅延読み込みするプラグイン Lazy Load

2015/09/29 WordPress

画像ファイルは容量が大きいため、Web ページのデータ転送量に直接影響を与えます。もし、画面のスクロールに応じて、表示に必要な画像だけを後追いで読み込めば、次のようなメリットがあり...

jQuery UI の Datepicker で年月をプルダウンから選択する方法

jQuery UI の Datepicker で年月をプルダウンから選択する方法

2015/09/18 jQuery UI

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。基本となる実装方法、ならびに日本語対応の手順については、次のページを参照ください。 ...

jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

2015/09/14 jQuery UI

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。基本となる実装方法、ならびに日本語対応の手順については、次のページを参照ください。 ...

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。