BLOG

動きをつけてワンランクアップ!ページ遷移アニメーションまとめ【デモ付き】
投稿日: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、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のみで見た目が良くなるようカスタマイズし、より入力しやすいように調整する方法 ...

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

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

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

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

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

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

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー
投稿日:2022年4月27日

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

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

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

CSSの詳細度と継承について
投稿日:2022年3月28日

CSSを指定しているはずなのに、要素にスタイルが当たっていないということがよくありませんか? タイプミスはしていないし、クラス名の前にピリオド(.)もついていてセレクタの指定も間違っていない…といった場合は、詳細度や継承が原因かもしれません。 この記事では詳細度、継承についてのCSS ...

【CSS】擬似要素を理解しよう!::beforeや::afterの使い方
投稿日:2022年3月22日

「擬似要素」という言葉から何を思い浮かべますか? コーディングをしたことがある方が最初に思い浮かぶのは、やはり::beforeや::afterではないかと思います。 実際に案件で使用する擬似要素は、::beforeや::afterがほとんどです。 ですが擬似要素について調べてみたところ、様 ...

WEBデザインツールFigmaが凄いところをコーダー目線で紹介してみた
WEBデザインツールFigmaが凄いところをコーダー目線で紹介してみた
投稿日:2022年3月14日

この記事ではWEBデザインに特化したツール、「Figma」についてコーダー目線で凄い!と思ったところを紹介します。 Figmaを始めて聞いたという方もこの機会にその凄さを知って取り入れてみてはいかがでしょうか! それでは早速参りましょう! [toc] line-heigh ...

IE非対応の便利なCSSプロパティ集
投稿日:2022年2月3日

mix-blend-mode、filter、objext-fit……とても便利ですよね。 これらのプロパティを使うと、これまでjsで対応していた箇所や、再現が不可能なので画像で対応としていたものを、CSSだけで簡単に再現してくれます。 しかし、残念ながらこれらのプロパティはIE非対応です ...

新卒でWebエンジニアになる為のポートフォリオ
新卒でWebエンジニアになる為のポートフォリオ
投稿日:2022年1月20日

これから新卒でWebエンジニアを目指すみなさん、どんなポートフォリオを作ればいいかお悩みではないでしょうか? この記事ではそんな悩めるあなたに向けて、ポートフォリオ作成のポイントをご紹介します! ポイントを正しくおさえて採用者に刺さるポートフォリオを作成しましょう! [toc] ...

HTML・CSSコーディングを上達させるための方法とコツを解説!【初心者向け】
投稿日:2022年1月7日

HTML・CSSはWebサイト制作の基本です。 最近ではノーコードでサイト構築ができるサービスも多いですが、Webサイト制作に携わりたいとか自分のサイトを自由にカスタムしたいという時には、避けては通れない道です。 (HTML・CSSが書けなくても、多少の知識と理解は必要です。) 学生さ ...