pictureタグ・srcset属性の使い方を分かりやすく解説!【検証用デモページあり】
Webサイトのコーディングで、画面幅によって表示させる画像を変更したいとき、どのように対応していますか? 今までは .pc-only / .sp-only といった表示切替用のクラス名を用いて対応するのが一般的でした。 しかし、この方法では画面幅関係なくどちらの画像も読み込まれてしまうため、表示 ...
東京ホームページ制作
Copyright (c) BRISK All Rights Reserved.
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診断コンテンツの実装方法【デモ付き】
医薬品や化粧品のサイトには診断コンテンツが実装されていることが多いです。 ですが、実際に診断コンテンツを実装しようと思っても、どのように作成して良いか分からないと思います。 「サイトに診断コンテンツをを実装したいが方法が分からない」 「実装にはプラグインが必要なのか」 などと実装方法が分からな ...
【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー
Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サム ...
インナー幅をはみ出すレイアウトのコーディング
コーディングをしていると、コンテンツは特定の幅(インナー幅)に収まることが多いです。 ですが最近インナー幅からはみ出ているレイアウトのデザインが多くなったと感じます。 毎回どうやってコーディングするか悩んでしまっているので、頻出レイアウトのコーディングについてまとめてみました。 デモも用意しまし ...