ブログBLOG

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で紹介しているサイトがあると思います。 ですが、そんなサイトを ...

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の基本とよく使う使用方法をまとめました ...