BLOG

コーディングに関する記事一覧

【WCAG】ウェブアクセシビリティとは?対応方法を徹底解説!
投稿日:2023年9月7日

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

検索窓の作成におけるベストプラクティス(SBO)について【参考デザイン・コードサンプルもご紹介!】
投稿日:2023年8月3日

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

モーダルウィンドウのおすすめデザインや実装方法をご紹介(デモサンプル付き)
投稿日:2023年8月3日

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

CSSの便利な新セレクタ :has() / :is() / :where() の使い方解説
投稿日:2023年6月23日

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

【aspect-ratio】CSSでiframe・videoや画像のアスペクト比(縦横比)を設定しよう【padding-top】
投稿日:2023年4月6日

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

position: sticky;の使い方と注意点【パララックス、追従ヘッダー・固定サイドバー】
投稿日:2023年3月30日

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

動きをつけてワンランクアップ!ページ遷移アニメーションまとめ【デモ付き】
投稿日:2022年12月2日

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

脆弱性だらけ!?WordPressのセキュリティを高める方法
脆弱性だらけ!?WordPressのセキュリティを高める方法
投稿日:2022年10月24日

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

JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】
投稿日:2022年9月28日

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

プログラムにおける命名規則や記法に則り、時間と労力を削減!
投稿日:2022年9月28日

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

pictureタグ・srcset属性の使い方を分かりやすく解説!【検証用デモページあり】
投稿日:2022年9月15日

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

SEOにも影響あり!?アクセシビリティを考慮したコーディング
投稿日:2022年8月29日

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

よくあるレイアウト崩れとその対策(Safari、CSS、margin、flexなど)
投稿日:2022年8月29日

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

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

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

CSSでinputとselectのカスタマイズをしよう(ラジオボタン・チェックボックス・セレクトボックス)
投稿日:2022年6月22日

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

ローディングアニメーション画面をhtmlで実装【初心者でも簡単!】
投稿日:2022年6月7日

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

HTMLとCSSで作るインフォグラフィック(円/棒グラフ・レーダーチャート)【アニメーションつき】
投稿日:2022年6月3日

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

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】
投稿日:2022年4月28日

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

【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー
投稿日:2022年4月27日

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

インナー幅をはみ出すレイアウトのコーディング
投稿日:2022年3月31日

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