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

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

2016/01/27 HTML・CSS

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

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

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

2016/01/27 基本

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

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索!クリック1つでコードをコピー【アイコン一覧】

2016/01/20 HTML・CSS

Font Awesome はアイコンをフォントで表現できる便利なツールです。このサイトでも、各種アイコンは画像ファイルでなく Font Awesome を利用しています。CDN で...

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

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

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

2016/01/12 サイト運営

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

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

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

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

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

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

2015/12/24 HTML・CSS

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

ロリポップからエックスサーバーへドメインごと移行する方法

ロリポップからエックスサーバーへドメインごと移行する方法

先日ロリポップからエックスサーバーへレンタルサーバーを変更したことをお伝えしましたが、今回は具体的な手順を説明していきます。 手順は次の通りです。前提としてWordP...

ムームードメインからエックスサーバーへドメイン移管する方法!プレゼントドメインのキャンペーンを利用する場合

ムームードメインからエックスサーバーへドメイン移管する方法!プレゼントドメインのキャンペーンを利用する場合

XERVER では契約するプランにより、ドメインの更新料がずっと0円になるプレゼントドメインキャンペーンが適用されます。 このキャンペーンはエックスサーバーを契約し続ける限り...

レンタルサーバーをロリポップから XSERVER へ変更を決めた理由

レンタルサーバーをロリポップから XSERVER へ変更を決めた理由

ロリポップのスタンダードプランからの移行先を検討し、しばらく XSERVER X10 プランのお試し期間を利用して様子を見ていましたが、正式にエックスサーバーへの移行を決めました。...

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 の中でも基本的な処理になります。ベースとなるテ...

このブログの運営者

NJ

元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。