JavaScript/jQuery

”Animate.css”と組み合わせることでスクロールに応じたアニメーションを簡単に設置することができるJavaScriptのライブラリ”wow.js”を紹介します。Animate.cssがバージョンアップしてv4系となったことで変更すべき点もありますのでその点も含めて紹介していきたいと思います。

JavaScript/jQuery

jquery.inviewはディスプレイのビューポート内(画面内)に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。

WebDesign

Webサイトに動きをプラス!CSSアニメーション、JavaScriptアニメーション、ライブラリ・フレームワークの3つの方法を初心者向けに徹底解説。コード例と共に向いている場面を紹介。動きを取り入れて、Webサイトの表現力とユーザー体験を向上させましょう!

HTML/CSS

レスポンシブなレイアウトを作成する方法としてCSSのメディアクエリが使われることが多いかと思いますが、今回はCSSのメディアクエリを使わずにレスポンシブなレイアウトを作成する方法について紹介していきたいと思います。 簡単な例として、ディスプレイ幅に応じてカラム数を変化させる場合の記述例などについて紹介していきます。

WordPress

WordPressサイトにフォームを設置できるプラグインにはいろいろなものがありますが、今回はユーザーが送信する前に入力内容を確認することができる「MW WP Form」というプラグインを使ったフォームの設置方法を紹介していきたいと思います。

WordPress

WordPress管理画面の投稿一覧カラムをカスタマイズして、作業効率を向上させる方法を解説。投稿IDの追加、不要カラムの非表示、カスタムフィールド値の表示など、具体的なコード例と共にご紹介します。WordPress公式情報源に基づいた信頼性の高い情報をお届けします。

HTML/CSS

ハンバーガーメニューのボタンをCSSを利用してつくる時の記述例を紹介します。

WebDesign

オリジナルの404エラーページを作成・設置する方法を解説します。静的なHTMLサイトとWordPressサイトの場合に分け、具体的な手順や記述例を紹介。SEOにも配慮した404ページでユーザー体験を向上させましょう。

HTML/CSS

Webサイトをダークモードに対応させるための実装方法を解説します。システムの設定に連動させる方法と、ページ内にダークモード/ライトモードを切り替えるボタンを設置する方法を、具体的なコード例を交えて説明します。

JavaScript/jQuery

webサイトを簡単にダークモード対応サイトにすることができる”Darkmode.js”の使い方を紹介していきます。“Darkmode.js”は、すでに出来上がっているサイトにも数行のコードを追加するだけでサイトをダークモードに対応させることができるライブラリです。