BLOG

新卒で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日

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

Sass(SCSS記法)の書き方紹介
投稿日:2021年11月17日

2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 [toc] Sassについて Sass(Syntac ...

【Gridは便利?】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選!
【Gridは便利?】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選!
投稿日:2021年11月16日

みなさんは実案件でGridを導入していますか? GridはIE以外の主要ブラウザでサポートされています。 そのため、IE対応をしなければならない案件ではなかなか導入ができないのが実情です。。。 しかし、マイクロソフトから正式に、「Internet Explorer 11 デ ...

【jQuery】動きのあるアコーディオンメニューまとめ(コピペ用サンプル付き)
投稿日:2021年11月12日

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに ...

【CSS】positionの基本とよく使う使用方法まとめ
投稿日:2021年9月28日

コーディングをする時に必ずと言ってもよいほどpositionは使用されていると思います。 positionを使いこなせるとデザインを再現しやすくなります。 そのため、今回は1人でも多くの方がpositionを使いこなせるようになって頂くために、positionの基本とよく使う使用方法をまとめ ...

【3系】Chart.jsでレーダーチャートを描画してみよう
投稿日:2021年9月28日

Chart.jsというJavaScriptのライブラリを使えば、簡単にサイト上にグラフを描画することができます。 Chart.jsで描画できるグラフは折れ線グラフ、棒グラフ、円グラフ、レーダーチャート、散布図など多岐に渡りますが、 今回はその中のレーダーチャートの描画の方法を紹介 ...

【CSS】擬似クラスを使いこなそう!:not()や:nth-child()の使い方
投稿日:2021年8月31日

コーディングでは、他人から見たとき見やすいコードにすることを心がけますよね。 先輩が書いたコードを見るとなんか見やすいなって思うんです。 そこで、見やすいコードと見にくいコードの何が違うのだろうと考えたときに、不要なタグやクラスがなく、全体がすっきりしていることが見やすいコードへの近道だと感 ...

【YouTube,Vimeo,mp4】Webサイトに動画を埋め込む方法まとめ
投稿日:2021年8月25日

Web制作をしていると、サイトに動画を埋め込んで表示させたい場面はよくありますよね。 埋め込みのできる動画には、YouTube、Vimeo、mp4など、様々な形式があり、 これらを埋め込んで表示させる際には、それぞれ異なった設定方法や注意点があります。 そこで、今回はそれぞれの ...

コピペで簡単に実装!CSSで文字の強調・飾りつけ8選【初心者向け】
投稿日:2021年8月11日

HTMLとCSSを用いた文字の強調や装飾方法をまとめました。HTMLで作ったページのデザインを調整するCSSは、使い方次第でさまざまな装飾をほどこすことができます。例えば蛍光ペンで引いたようなデザインから、下線、アイコン、インデント、カーニングなどなどをソース付きで紹介していますので、初心者 ...

【コーディング初心者向け】Photoshop・Illustrator・XDから余白やフォントサイズを取得する方法まとめ
投稿日:2021年7月21日

HTMLコーディングをする際、デザインデータのほとんどは Photoshop・Illustrator・XD のどれかで頂くと思います。勉強をしてコードの書き方はわかっていても、そういったデザインツールから情報を得る方法がわからなければコーディングはできません。 弊社の新卒研修でも、アプリの ...

【カスタマイズしたい人向け】コマースクリエイター(commerce creator)の使い方【完全ガイド】
投稿日:2021年7月16日

昨年からコロナが猛威を揮い、緊急事態宣言やまん延防止等重点措置で買い物などに満足に行けない日々が続いているかと思います。 そういった背景もあり、近年では通販・ネットショッピングの需要が高まりつつあります。 通販サイトを立ち上げる構築サービス・ツールといえば、MakeShopやEC-C ...