ブログBLOG

font-familyの指定の仕方を解説！Androidで明朝体を表示させたい時の方法も紹介

みなさん、font-familyは正しく設定できていますか？ font-familyはサイトに表示されるフォントを予め決めておくことができるCSSプロパティのことです。 いつも同じものを使っているためフォントを変更する際に指定を間違えてしまったり、テンプレートをそのまま使っているのでよく ...

ReactとNext.jsでウェブサイトを作る

本記事ではウェブサイトの作り方に悩んでいる人に向けて、ReactとNext.jsでウェブサイトを作る方法を紹介します。 ReactとNext.jsはプログラムの道具箱のようなもので、ウェブサイトを作るときに必要な部品が揃っています。 そのため、ウェブサイトをより効率的に開発することが ...

【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;の便利な使い方と注意 ...