ブログBLOG

【HTMLとCSS】円グラフを自作する【デモ付き】

ウェブサイトにグラフやチャートを導入したいとき、様々な方法があります。 画像で配置したり、HTMLとCSSを使用したり、またはjsのプラグインでグラフを作成することができます。 ですが、画像で配置した場合はアニメーションを付けることはできませんし、jsのプラグインでグラフを作成する場合はデザ ...

Web制作現場でよく見るスペルミス・読み間違いの多い英単語

Webサイトを制作するときに英単語のスペルミス・読み間違いをしてしまったことがあると思います。 制作途中で気づければまだよいですが、公開するまで誰も気が付かないと後からの修正が必要になってしまいます。 手間も追加の費用も掛かってしまうので、なるべくそれは避けたいですよね… どういっ ...

【WCAG】ウェブアクセシビリティとは？対応方法を徹底解説！

ウェブアクセシビリティという言葉はご存知でしょうか？ 「アクセシビリティ」という単語自体の意味は、「近づきやすさ」や「アクセスできるようにすること」です。 ウェブアクセシビリティにおいての「アクセシビリティ」の意味は、「利用できるようにすること」という意味になります。 つまり、「どのような人で ...

検索窓の作成におけるベストプラクティス（SBO）について【参考デザイン・コードサンプルもご紹介！】

サイトに検索窓は設置していますか？ 検索窓というのは、サイト検索の入力欄のことです。 商品を探したいECサイトや、記事がたくさん投稿されているサイト、Twitter（X）やYouTubeなどのメディア系のサイトでは、検索機能は必須ですよね。 そこで今回の記事では、使いやすく素敵な検索窓を作成する ...

モーダルウィンドウのおすすめデザインや実装方法をご紹介（デモサンプル付き）

今回のブログでは皆さんにモーダルウィンドウのデザインのポイントや実装方法などを解説いたします。 モーダルが表示されている間は他の操作をすることができないため、しっかりとポイントを押さえないとユーザーに嫌われてしまう可能性もあります。 実際のサイトでの使用例も挙げながらポイントを解説していきま ...

CSSの便利な新セレクタ :has() / :is() / :where() の使い方解説

CSSは常に進化を続けていて、開発者にとってより便利な新しいセレクタも登場してきています。 その中でも特に便利なセレクタが、:has()、:is()、、:where()の3つです。 この3つの新しいセレクタは、「子要素を持つかどうかの判定」や「詳細度を上げない」といった待望の仕様を備えており、CS ...

【aspect-ratio】CSSでiframe・videoや画像のアスペクト比(縦横比)を設定しよう【padding-top】

コーディング中に、「ウィンドウ幅を変えると画像のアスペクト比が変わってしまう」と指摘を受けたことはありますか？ 大事な画像や動画が、変なふうに見切れたりしていたら格好付かないですよね。 今回はコーディング初心者さんに向けて、画像のアスペクト比の設定をする方法を、サンプルコードとデモ付きで ...

position: sticky;の使い方と注意点【パララックス、追従ヘッダー・固定サイドバー】

position: sticky;はIE非対応のプロパティのため、以前まではポリフィルを利用するか、fixedで代用するか、のどちらかで対応していました。 ですが、現在はIEのサポート終了によって利用する機会が多くなりました。 今回は、そんなposition: sticky;の便利な使い方と注意 ...

動きをつけてワンランクアップ！ページ遷移アニメーションまとめ【デモ付き】

ページ遷移アニメーションとは、ホームページを訪れた時やページを移動した時などの、ページが切り替わるタイミングに付けるアニメーション演出のことです。 移動という単調な動きにスライドやフェードなどのアクセントをつけることで、Webサイトならではのリッチな表現を楽しむことができます。 例えば、以下のよ ...

脆弱性だらけ！？WordPressのセキュリティを高める方法

みなさんWordPressでのセキュリティ対策は講じていますか？ WordPressは拡張性が高く、情報が豊富なことから多くの人に利用されています。 しかし、初期状態のWordPressは脆弱性がいくつも存在し、その脆弱性をついた攻撃が多く発生しています。 セキュリティ対策をしっかりと講じて ...