Webエンジニアのブログ

Webサイトで背景として動画を画面全体に流すことでユーザーの目を引きつけて言葉では伝わらないメッセージや印象を与えることができます。 ここではHTMLのvideoタグとCSSで動画を背景として画面全体に表示させる方法をご紹介します。 HTM...
続きを読む>>

WordPress5.0から搭載されたエディタ「Gutenberg」ではブロック単位でコンテンツを作成していくわけですが、Block Labというプラグインを利用するとデフォルトのブロックの他、カスタムブロックを作成することができます。 &...
続きを読む>>

WordPressで構築したブログで記事の中にソースコードを表示させる場合にはSyntaxHighlighter Evolvedというプラグインを利用されている方がいるかと思います。 WordPressのアップグレードでバージョン5.0から...
続きを読む>>

WordPress5.0から新しいエディタ「Gutenberg（グーテンベルク）」が搭載されるようになりました。 それまでは多くのCMSで導入されているTinyMCEでしたが、WordPress5.0にアップグレードすると新しいエディタに変...
続きを読む>>

Webサイトにアクセスしたとき、メインビジュアルでダイナミックに写真や動画を使ってインパクトを与えることができますが、そこに文字やメッセージなどをなんらかのアニメーションで表示させることもまたユーザーの目を引くポイントになります。 Webサ...
続きを読む>>

今ではCSSのみでいろんなデザインが表現できるようになりました。そこで少し面白いことが出来るCSS Shapesをご紹介します。CSS Shapesを使うと円や多角形などの領域をうまく利用してコンテンツ要素のレイアウトを自由にデザインするこ...
続きを読む>>

Webサイトのスマートフォンのメニューボタンでよく見かけるデザインが三本ラインのハンバーガーメニューだと思います。 ハンバーガーメニューに関してはCSSのみでOPENとCLOSEのデザインを作りメニューの表示・非表示もCSSでできますので、...
続きを読む>>

データベースを利用したWebアプリケーションを開発していく中で、テーブル内の情報から特定のキーワードで文言検索をかける仕様をデザインに追加する時があります。検索窓やカテゴリーを選択させて検索させる場合でしょうか。 そうした仕様にする場合は裏...
続きを読む>>

簡単なWebアンケートをHTMLとPHPスクリプトを使ってフォームを作成した際、テキストやテキストエリアの値の取得や表示はわかるがラジオボタンやチェックボックスを使った場合にどのように値を受け取ればいいのか、また出力する場合はどのようにプロ...
続きを読む>>

データベースを利用したWebアプリケーションの開発でテスト段階で格納したデータをそのまま本番公開しようとなると、テスト段階のデータが格納されたまま公開となってしまいます。公開後の正確なデータを扱う場合はテストの時のデータを削除しておく必要が...
続きを読む>>