CSS CSSのみで実現するカルーセル画像スライド
サイト内に自動再生のカルーセルスライドを表示させたい場合に、よく使われているのが「slick 」ですが、JSを使わずにCSSだけでシンプルに表現することができます。マウスホバーでスライドを停止させたい...
WEB DESIGN
CSS 
CSS 文章をCSSで両端揃えにする方法
まとまったテキストを配置する際に、両端がずれているとちょっと気になることありますよね？WEBサイトでも紙面デザインのように「両端揃え」でテキストを配置したい場合は、CSSのみで実現可能ですので取り入れ...
jQuery 続きを読むでアコーディオンが開くjQuery・CSSの記述方法
お知らせやQ&Aなどで、途中までの文章を表示しておいて「続きを読む」ボタンでアコーディオンが開いて全体を表示させたい時があります。そんな時は、ちょっとしたjsとcssで実現できますのでやってみましょう...
CSS flexboxで横並びを意のままに！
要素を横並びで配置するとき、かつてはfloatプロパティを使って左に流し込んでいた人も多いと思います。今では「flexプロパティ」を使うことでコードもスッキリ記述できるようになりました。グローバルナビ...
CSS 縦書き文字を上下左右の中央にCSSのみで配置する方法
和風ホテルや割烹料理店などの公式サイトで「縦書き文字」を上品に使っているのをよく見かけます。今回の記事はピンポイントで「縦書き文字を画面や親要素の中央に配置する方法」をご紹介します。左右の中央に配置す...
WordPress Google reCAPTCHAの導入方法
前回の記事「サイトのスパム対策にreCAPTCHAがおすすめ！」では、Google reCAPTCHAのバージョンごとの違いや導入のメリット・デメリットなどを解説しましたが、今回は実際にサイトやブログ...
WordPress サイトのスパム対策にreCAPTCHAがおすすめ！
・サイトのお問合せフォームから迷惑メールがくるので困る・・・。・スパムコメントが多いので何とかしたい・・・。そんな「スパムメール」にお困りの方はいませんか？サイトやブログに『お問い合せフォーム』を設置...
CSS 文字数に応じた下線(ボーダー)をCSSで引きたい
タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。今回は、以下の３つのサンプルをご用意しました。...
JavaScript テキストをタイプライター風に表示するiTyped.js
サービスのコンセプトや企業の理念など、テキストに動きをつけることでメッセージ性を高く表現することができます。そのなかでも、タイプライター風に文字（テキスト）を一文字ずつ入力しているような表現を、Jav...
PHP PHP環境を整備する｜MAMP(Windows版)
PHPを学習するにあたり必要なものを確認していきましょう。まずは、PHPプログラムを実行しWebページを表示するために、「PHPの実行環境」と「Webサーバー」を用意する必要があります。今回はいくつか...
CSS CSSでタブの切り替え表示を実装する方法
タブをクリックすることで、表示が切り替わる機能をCSSのみで実装していきます。サンプルは「画像とテキスト」を切り替えるものをご用意しました。DEMOまずは、HTMLから記入していきましょう。 (ads...
HTML table(表組み)に関する要素を覚えよう
表組みを表す要素であるtable要素について解説していきます。table要素は、表組みを表すものでありレイアウト目的での使用は禁止となりました。(adsbygoogle = window.adsbyg...
HTML 改行コードCR・LF・CR+LFの違いって何なの？
改行コードの指定でいつも気になっていた「CR」「LF」「CR+LF」って何なんだろうと思い調べましたのでメモしておきます。(adsbygoogle = window.adsbygoogle || []...
ドメイン&サーバー webサイトやブログをSSL化(https化)する方法
ちょうど昨日「Google Search Console Team」より、一通のメールが送られてきました。内容はこちら・・・。サイトにアクセスした際に、セキュリティ警告が表示されるようになります・・・...