-
【モダンブラウザ対応】アスペクト比を固定するaspect-ratioプロパティの使い方
以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。 しかしこの方法だと、比率を計算して%で表記する... -
素のJSとSwiperでモーダル内にスライダーを表示する方法
今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。 ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す... -
開始日からの経過年月を自動で計算する機能をJavaScriptで実装する方法【ポートフォリオに最適】
ポートフォリオサイトなどで自身のスキルを示したい時、経験年月を合わせて記載することが多いかと思います。 参考：筆者のポートフォリオサイト HTMLで年月をベタ書き... -
CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】
文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。 CSSには2重下線を実装できるtext-decorationプロパティがありますが、 色を一色し... -
CSSでグラデーションカラーのテキストを実装する方法【コピペOK】
CSSではlinear-gradientなどの関数を使うことで、背景にグラデーションカラーを設定することができますね。 しかしこの関数はbackgroundプロパティにしか使えないため、... -
ホバーすると表裏が反転するカードをCSSで実装する方法
マウスホバー時に裏表が反転するカードをCSSで実装してみました。 以下のカードにマウスカーソルを当ててみてください。（SPの場合はタップ） このアニメーションをCSS... -
【Sass】変数と@mixinでメディアクエリを簡単に記述する方法
CSSでは、レスポンシブに対応させるためのメディアクエリを書く機会が多いですよね。 特にブレイクポイントの多いサイトだと、以下のように記述量が多くなってしまいが... -
Sassで使える2種類のコメントについて【コンパイル時の挙動も解説】
CSSでは、/*と*/で文字を囲うことでコメントを記述することができますね。 /* ここにコメントを記入 */ .sample { color: red; } Sassではコメントの記述方法が2種類用... -
Sassで使用できる4つのアウトプット形式の特徴や使い方を解説
Sassとは、CSSを効率的に記述できるように設計・開発された言語です。 入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキ... -
【Sass】色を操作するのに便利な10つのSass関数を紹介！
Sassを簡単に説明すると「CSSの拡張版」で、CSSにはない多くの便利な機能がありますね。 その中でも色を操作するための関数がとても便利ですので、紹介していこうと思い... -
Sassでファイルを分割管理する方法と3つのメリット【@import, パーシャル】
大規模なWeb制作案件になると、CSSのコード量も膨大になりますよね。 パーツごと・役割ごとにCSSファイルを分割することで管理しやすくなりますが、その場合、 読み込み... -
【Swiper】サムネイル付きの画像スライダーを実装する方法
Swiperとは、スライダー（カルーセル）を簡単に作成できるJSライブラリです。 jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高... -
【コピペOK】CSSで立体感のあるボタンを作成する方法
CSSだけで、つい押したくなるような立体感のあるボタンを実装する方法を紹介していきます。 マウスカーソルを当てたとき、クリックしたときにボタンが押されているよう... -
Firefoxのブラウザ設定でbackdrop-filterを有効にする方法
backdrop-filterは要素の背後にぼかしや色変化などのグラフィック効果を適用することができるCSSプロパティです。 ブラウザ対応状況は、以下のようになっています。 “ba... -
【Glassmorphism】ガラス風のエフェクトをCSSで実装する方法
Glassmorphism（グラスモーフィズム）は、2021年に入ってから注目されている新しいデザインのトレンドです。 Mac OSのBig Surにも採用されており、半透明で背景がぼやけ... -
【CSS】要素にグラデーションカラーの影をつける方法【IE対策◎】
CSSには、要素に影をつけることができるbox-shadowプロパティが存在します。 このプロパティを使うことで、以下の例のように影のエフェクトを実装することができますね...
