jQuery 続きを読むでアコーディオンが開くjQuery・CSSの記述方法
お知らせやQ&Aなどで、途中までの文章を表示しておいて「続きを読む」ボタンでアコーディオンが開いて全体を表示させたい時があります。そんな時は、ちょっとしたjsとcssで実現できますのでやってみましょう。HTMLを記述するサンプル文として「人...
WEB DESIGN
jQuery 
CSS flexboxで横並びを意のままに！
要素を横並びで配置するとき、かつてはfloatプロパティを使って左に流し込んでいた人も多いと思います。今では「flexプロパティ」を使うことでコードもスッキリ記述できるようになりました。グローバルナビ、コンテンツ、リンクバナーなど横並びに均...
CSS 縦書き文字を上下左右の中央にCSSのみで配置する方法
和風ホテルや割烹料理店などの公式サイトで「縦書き文字」を上品に使っているのをよく見かけます。今回の記事はピンポイントで「縦書き文字を画面や親要素の中央に配置する方法」をご紹介します。左右の中央に配置する方法を解説しているサイトはいくつかあり...
WordPress Google reCAPTCHAの導入方法
前回の記事「サイトのスパム対策にreCAPTCHAがおすすめ！」では、Google reCAPTCHAのバージョンごとの違いや導入のメリット・デメリットなどを解説しましたが、今回は実際にサイトやブログに設置する方法をご紹介いたします。Goo...
WordPress サイトのスパム対策にreCAPTCHAがおすすめ！
・サイトのお問合せフォームから迷惑メールがくるので困る・・・。・スパムコメントが多いので何とかしたい・・・。そんな「スパムメール」にお困りの方はいませんか？サイトやブログに『お問い合せフォーム』を設置する際に、注意すべき点のひとつに「スパム...
CSS 文字数に応じた下線(ボーダー)をCSSで引きたい
タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。今回は、以下の３つのサンプルをご用意しました。文字数に応じた下線横幅を指定した下線文字...
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...