ブログBLOG

JavaScript経験者におすすめ！ウェブサイトに3Dグラフィックを描画できるthree.js（WebGL）を使ってみよう

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

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

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

Sass（SCSS記法）の書き方紹介

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

【Gridは便利？】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選！

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

【jQuery】動きのあるアコーディオンメニュー・開閉ボタンまとめ（コピペ用サンプル付き）

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

【CSS】positionの基本とよく使う使用方法まとめ

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

【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は、使い方次第でさまざまな装飾をほどこすことができます。例えば蛍光ペンで引いたようなデザインから、下線、アイコン、インデント、カーニングなどなどをソース付きで紹介していますので、初心者の方 ...