ブログBLOG

JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】

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

プログラムにおける命名規則や記法に則り、時間と労力を削減！

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

pictureタグ・srcset属性の使い方を分かりやすく解説！【検証用デモページあり】

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

SEOにも影響あり！？アクセシビリティを考慮したコーディング

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

よくあるレイアウト崩れとその対策（Safari、CSS、margin、flexなど）

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

jQueryプラグイン「noUiSlider」を使って上限・下限を設定できるレンジスライダーを簡単に実装【デモ付き】

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

CSSでinputとselectのカスタマイズをしよう（ラジオボタン・チェックボックス・セレクトボックス）

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

ローディングアニメーション画面をhtmlで実装【初心者でも簡単！】

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

HTMLとCSSで作るインフォグラフィック（円／棒グラフ・レーダーチャート）【アニメーションつき】

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

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】

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