【WCAG】ウェブアクセシビリティとは?対応方法を徹底解説!
ウェブアクセシビリティという言葉はご存知でしょうか? 「アクセシビリティ」という単語自体の意味は、「近づきやすさ」や「アクセスできるようにすること」です。 ウェブアクセシビリティにおいての「アクセシビリティ」の意味は、「利用できるようにすること」という意味になります。 つまり、「どのような人で ...
東京ホームページ制作
Copyright (c) BRISK All Rights Reserved.
【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は脆弱性がいくつも存在し、その脆弱性をついた攻撃が多く発生しています。 セキュリティ対策をしっかりと講じて ...
JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】
昨今のウェブサイトではさまざまなクイズが公開されていますよね。そんなクイズですが、JavaScriptを使うと簡単に作ることができます。 質問文と回答の選択肢を用意しておき、画面を切り替える、といった方法もありますが、今回は配列の中にある質問文と回答を取得し、HTMLの中身を動的に切り替えるとい ...
プログラムにおける命名規則や記法に則り、時間と労力を削減!
最近、自分自身が2年ほど前に書いたコードを書き直すタイミングがありました。 その頃は複数人でコードを書くことや、自分自身が読み返す際のことも一切考慮せず、 とにかく楽して書くということをしていたので、コードは本当にひどいものでした。 コード自体はそれほど難しい内容ではなかったのですが、 書き直 ...