ブログBLOG

【3系】Chart.jsでレーダーチャートを描画してみよう

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

【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

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

Webサイトに動画を埋め込む方法【YouTube,Vimeo,mp4】

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

html CSSで文字の強調・飾りつけデザイン8選【コピペでOK】

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

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

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

【カスタマイズしたい人向け】コマースクリエイター(commerce creator)の使い方【完全ガイド】

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

WAI-ARIA(ウェイ アリア)とは？初めて制作する方向けに解説！

アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコ ...

自由な形でリンク範囲を作る方法2つ クリッカブルマップ・SVGリンク【実装サンプル付き】

コーディングする中で、「都道府県の形に沿ってリンクを設定したい」「リンク範囲をひし形にしたい」など、複雑な形のリンクが出てきて困ったことはありませんか？ aタグで普通にリンクを付けるだけだと、リンク範囲が長方形になるので意図しないエリアまでクリックできてしまい、思うようにいかないことも多いですよ ...

Emmet（エメット）でHTMLとCSSを効率的にコーディングする

HTMLやCSSを用いたコーディングに慣れてくると、毎回ソースコードをすべて手打ちするのが手間になってくる瞬間が訪れるかと思います。例えば、テーブルのHTMLを書きたいとき、見出しまで到達するのに[crayon-673fbf6bb6a6f571484830/]という記述をしないといけません。ひと ...

SEOに強いホームページを作ろう！HTMLコーディング時に意識すること８つ

本格的なSEO対策となるとWebマーケティングに強い人にお願いするのがよいですが、丁寧なコーディングを心がけることである程度対応することが可能です。 今回は初心者の方にもわかりやすく、コーディングにおける具体的ですぐに実践できるSEO対策を紹介します。 ぜひ、SEOに強いHTMLコーディング ...