ブログBLOG

WEBデザインツールFigmaが凄いところをコーダー目線で紹介してみた

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

IE非対応の便利なCSSプロパティ集

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

新卒でWebエンジニアになる為のポートフォリオ

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

HTML・CSSコーディングを上達させるための方法とコツを解説！【初心者向け】

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

gulp+EJS+JSONで大量のHTMLを効率的に生成する

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

モーダルを簡単に実装しよう！使い方も解説【Micromodal.js・Modaal】

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

WordPress化を考慮したコーディングをしよう！

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

CSSの数学関数を使って記述をスマートに！【calc(), min(), max(), clamp()】

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

手軽にリッチなサイトに変わる！3Dグラフィックを描画できるthree.js（WebGL）でサイトをアレンジしてみよう

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

作業時間を軽減！コーディングに便利なコード作成・変換ツール5選

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