BLOG

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が書けなくても、多少の知識と理解は必要です。) 学生さ ...

gulp+EJS+JSONで大量のHTMLを効率的に生成する
投稿日:2022年1月5日

CMSを構築するほどでもないけれど、複数のページをさくっと作りたい。もしくは、PHPが使えない・インクルードができないサーバーでもページを量産したい。そういったとき、手軽にHTMLを生成できる「EJS」がとても便利です。EJSを活用すると、JSONファイルでコンテンツを一括管理して、それを元に静 ...

【Modaal】モーダルを簡単に実装しよう【Micromodal.js】
投稿日:2021年12月17日

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダ ...

WordPress化を考慮したコーディングをしよう!
投稿日:2021年12月16日

デザイン通りにコーディングできて、完成!と思っても、その後WordPress化する場合は注意が必要です。 記事のタイトルが長文になっても崩れないか? 記事のサムネイル画像のサイズが変わった時の見た目はおかしくないか? パンくずリストが長くなった時にど ...

CSSの数学関数を使って記述をスマートに!【calc(), min(), max(), clamp()】
投稿日:2021年12月16日

CSS関数をご存じですか? よく使うのがcalc()やtranslate()、rgba()などで、関数名 + ()で記述されるもののことを指します。 今回は、中でもCSSの数学関数に焦点を絞って解説していこうと思います。 calc()は普段から使っている方も多いと思いますが、min() ...

手軽にリッチなサイトに変わる!3Dグラフィックを描画できるthree.js(WebGL)でサイトをアレンジしてみよう
投稿日:2021年12月16日

ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL(Webグラフィックライブラリ)。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと ...

作業時間を軽減!コーディングに便利なコード作成・変換ツール5選
投稿日:2021年12月13日

コーディングをしていく中で 「どういうレイアウトにすれば表現できるかな...」 「SCSSで構築してるのに参考サイトがCSSでしか紹介していない...」 なんて思うこともあるかと思います。 調べれば表現したいレイアウトの方法やSCSSで紹介しているサイトがあると思います。 ですが、 ...

JavaScript経験者におすすめ!ウェブサイトに3Dグラフィックを描画できるthree.js(WebGL)を使ってみよう
投稿日:2021年12月7日

3Dグラフィックでの表現を用いたウェブサイトが増えてきたなあ、と思う方も多いのではないでしょうか。このグラフィックの表現は、もちろんHTMLとCSSだけでは不可能です。WebGL(Webグラフィックライブラリ)という、ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングするた ...

【コピペでOK】サイトを印象的に!ホバーアニメーションまとめ【デモ・サンプルコード付き】
投稿日:2021年11月26日

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。 ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。 また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。 コ ...