BLOG ブログ

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

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

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

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

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

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

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

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

昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替え ...

最近、自分自身が2年ほど前に書いたコードを書き直すタイミングがありました。 その頃は複数人でコードを書くことや、自分自身が読み返す際のことも一切考慮せず、 とにかく楽して書くということをしていたので、コードは本当にひどいものでした。 コード自体はそれほど難しい内容ではなかったのです ...

Webサイトのコーディングで、画面幅によって表示させる画像を変更したいとき、どのように対応していますか？ 今までは .pc-only / .sp-only といった表示切替用のクラス名を用いて対応するのが一般的でした。 しかし、この方法では画面幅関係なくどちらの画像も読み込まれてしまうた ...

みなさんコーディングをするときにアクセシビリティを考慮してコーディングをしていますか？ 私は今までアクセシビリティというものを一切考慮せずにコーディングをしてきました。 しかし、実務を経ていくうちに利用者には色々な方がいて、 どんな人でもサイトを利用できるように制作することが重 ...

静的コーディングが終わり、実機で確認をしてみるとSafariでスタイルが崩れていることが多いです。 逆に、MacOSのSafari14.1以降とiPhoneのiOSのSafari14.5以降には対応しているというスタイルもあります。 ですので、今回は「Safariで崩れるプロパティ」「全ブラウザ ...

ECサイトなどで価格の範囲を決めて商品を検索する機能があるとき、音量の調整や明るさの調整をするUIのようなデザインで作成されていることがありますね。 このような入力欄を「レンジスライダー」といいます。 レンジスライダーの実装には、input要素のtype属性「range」を利用す ...

Webサイトのお問い合わせフォームなどでよく利用されるform関連の要素ですが、デフォルトのデザインのままだと少し地味で使いづらいように感じてしまいます。 そこで今回は、inputタグとselectタグをCSSのみで見た目が良くなるようカスタマイズし、より入力しやすいように調整する方法 ...

ページの読み込み中に数秒間白い画面が続くと、不安になることはありませんか？ ローディングアニメーションを実装することにより、ユーザー側に「ページをしっかり読み込んでいる」ことのアピールができます。 また、最近ではアニメーションを設置することも増えたので、ローディングの時点で視覚的に興味を与え ...

近年では、グラフやチャートといったインフォグラフィックを導入しているウェブサイトが増えてきています。インフォグラフィック化することでデータをよりわかりやすく表示出来たり、重要なポイントを強調したりできる、といったメリットを挙げることができます。 インフォグラフィックをウェブサイトに入れ ...

医薬品や化粧品のサイトには診断コンテンツが実装されていることが多いです。 ですが、実際に診断コンテンツを実装しようと思っても、どのように作成して良いか分からないと思います。 「サイトに診断コンテンツをを実装したいが方法が分からない」 「実装にはプラグインが必要なのか」 などと実装 ...

Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライ ...

コーディングをしていると、コンテンツは特定の幅（インナー幅）に収まることが多いです。 ですが最近インナー幅からはみ出ているレイアウトのデザインが多くなったと感じます。 毎回どうやってコーディングするか悩んでしまっているので、頻出レイアウトのコーディングについてまとめてみました。 デモも ...