WEB DESIGN

WordPress

Google reCAPTCHAの導入方法

前回の記事「サイトのスパム対策にreCAPTCHAがおすすめ!」では、Google reCAPTCHAのバージョンごとの違いや導入のメリット・デメリットなどを解説しましたが、今回は実際にサイトやブログに設置する方法をご紹介いたします。Goo...
WordPress

サイトのスパム対策にreCAPTCHAがおすすめ!

・サイトのお問合せフォームから迷惑メールがくるので困る・・・。・スパムコメントが多いので何とかしたい・・・。そんな「スパムメール」にお困りの方はいませんか?サイトやブログに『お問い合せフォーム』を設置する際に、注意すべき点のひとつに「スパム...
CSS

文字数に応じた下線(ボーダー)をCSSで引きたい

タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。今回は、以下の3つのサンプルをご用意しました。文字数に応じた下線横幅を指定した下線文字...
JavaScript

テキストをタイプライター風に表示するiTyped.js

サービスのコンセプトや企業の理念など、テキストに動きをつけることでメッセージ性を高く表現することができます。そのなかでも、タイプライター風に文字(テキスト)を一文字ずつ入力しているような表現を、JavaScriptのプラグインを利用して実装...
PHP

PHP環境を整備する|MAMP(Windows版)

PHPを学習するにあたり必要なものを確認していきましょう。まずは、PHPプログラムを実行しWebページを表示するために、「PHPの実行環境」と「Webサーバー」を用意する必要があります。今回はいくつかある環境の中でも「MAMP(マンプ)」を...
CSS

CSSでタブの切り替え表示を実装する方法

タブをクリックすることで、表示が切り替わる機能をCSSのみで実装していきます。サンプルは「画像とテキスト」を切り替えるものをご用意しました。DEMOまずは、HTMLから記入していきましょう。 (adsbygoogle = window.ad...
HTML

table(表組み)に関する要素を覚えよう

表組みを表す要素であるtable要素について解説していきます。table要素は、表組みを表すものでありレイアウト目的での使用は禁止となりました。(adsbygoogle = window.adsbygoogle || []).push({}...
HTML

改行コードCR・LF・CR+LFの違いって何なの?

改行コードの指定でいつも気になっていた「CR」「LF」「CR+LF」って何なんだろうと思い調べましたのでメモしておきます。(adsbygoogle = window.adsbygoogle || []).push({});sakuraエディ...
ドメイン&サーバー

webサイトやブログをSSL化(https化)する方法

ちょうど昨日「Google Search Console Team」より、一通のメールが送られてきました。内容はこちら・・・。サイトにアクセスした際に、セキュリティ警告が表示されるようになります・・・。恐ろしいですね~サイトの信用ガタ落ちで...
jQuery

画像や動画をぐいっとポップアップ表示!jQueryプラグインの「Lity」

画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。 (adsbygo...
CSS

【初心者向け】はじめてのCSS ~第4話~ フォントサイズと単位について

前回の記事「【初心者向け】はじめてのCSS ~第3話~ ウェブセーフカラーについて」にて、ウェブセーフカラーについて記述しましたが、今回は「フォントサイズとその単位」について解説していきたいと思います。 (adsbygoogle = win...
CSS

inline-blockで横並びにしたときにできる隙間の対処法

ナビゲーションや画像など、横並びに要素を配置したいときにdisplay:inline-blockを利用する方法があります。その際に要素ごとの間に隙間ができてしまう問題があります。今回はその理由と対処方法を解説します。まずは、サンプルとして以...
CSS

Google日本語フォントが試験的に公開!使い方を解説!

昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユーザーが自由に使えるようになったのは、大...