iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法

iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法

2016/03/25 JavaScript

iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。 サイズ設定が大きすぎ...

JavaScript でテキストをクリップボードへコピーする方法

JavaScript でテキストをクリップボードへコピーする方法

2016/03/09 JavaScript

JavaScript には、文字列をクリップボードに格納するための処理が用意されています。 JavaScript のテキストコピーメソッド document.execCom...

スマートフォンから AdSense のサイトにアクセスできない場合の対処法

スマートフォンから AdSense のサイトにアクセスできない場合の対処法

2016/02/26 サイト運営

Android 版の Chrome から Google AdSense のサイトへアクセスすると、既にログイン認証していても、スマートフォン版のトップページが表示される場合がありま...

PC 版 Chrome モバイルサイト表示シミュレーターの使い方

PC 版 Chrome モバイルサイト表示シミュレーターの使い方

2016/02/21 サイト運営

ブログや Web サイトを構築している人であれば、スマートフォン用サイトの構築に頭を悩ませる経験をお持ちではないでしょうか。 昨今では、ウィンドウサイズによって CSS の適...

スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

2016/02/12 HTML・CSS

スマートフォンでネットサーフィンをしていると、サイトによってアドレスバーの部分が彩色されているページがあることに気付くでしょう。通常はグレーですが、青やらオレンジやら、ページによっ...

WordPress の投稿記事一覧をデータベースから取得してファイルに出力する方法

WordPress の投稿記事一覧をデータベースから取得してファイルに出力する方法

2016/02/02 WordPress

WordPress の投稿記事リストを Excel 上で管理するため、次のような項目を出力した一覧を取得します。 ID 公開日 最終更新日 記事 URL 記事タイ...

CSS で画像を丸く切り取って表示する方法

CSS で画像を丸く切り取って表示する方法

2016/01/29 HTML・CSS

Twitter や Facebook など SNS のプロフィールアイコンで、画像が丸く切り抜かれているのをよく見かけます。これは画像が編集されたものではなく、画面表示時に CSS...

Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした

Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした

2016/01/28 WordPress

Windows 10 の利用ユーザーが増え、それに比例するように Micorosoft Edge を利用するユーザーも増えてきました。当ブログのアクセス解析を見ても2%程度ではある...

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説!

2016/01/27 HTML・CSS

CSS のコードをシンプルかつ明瞭な構成にするために、隣接セレクタ・直下セレクタ・間接セレクタの利用は欠かせません。 絶対的に必要なものではありませんが、内容を理解すればとて...

jQuery で右クリックのイベントを禁止する方法

jQuery で右クリックのイベントを禁止する方法

2016/01/27 基本

Web ページで右クリックのコンテキストメニューを表示させたくない理由は様々です。 戻る、進むを禁止する 再読み込みを禁止する 画像の保存を禁止する ソースコードの...

Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

2016/01/20 HTML・CSS

アイコン Web フォントと言えば Font Awesome です。このサイトでもカレンダーや SNS のアイコンは、画像ファイルでなく Font Awesome を利用しています...

iframe からのアクセスを拒否する .htaccess の設定方法

iframe からのアクセスを拒否する .htaccess の設定方法

2016/01/19 サイト運営

ヘッダー部分に自身のサイトの情報と広告が掲載され、下部に iframe にて当サイトが表示されている海外のサイトのページを見つけてしまいました。 直接的な被害はないものの、こ...

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

フィード(RSS)アイコンを HTML と CSS だけで実装する方法

2016/01/19 HTML・CSS

形状が単純なものであれば、画像を用意しなくても HTML と CSS で実装することができます。以前、三本線のメニューアイコン、通称ハンバーガーメニューを CSS で実装しました。...

メニューの三本線アイコンを 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 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することが...

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 からブログ記事が丸パクリされ...

このブログの運営者

NJ

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

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