じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高10万PV▶︎Twitterのフォロワーは6400人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計830部&520万円突破

Luminousで画像をポップアップで拡大する方法【Lightbox系プラグイン】

2023/3/28

Luminousで画像をポップアップで拡大する方法【Lightbox系プラグイン】

Lightbox系プラグインLuminousを使った画像をポップアップで拡大表示させる方法を解説します。jQuery非依存で軽量、コードも簡単なのでコピペですぐ実装できると思います。

CSSでテキストの最初の一文字を大きくする方法【::first-letterの使い方】

2023/3/27

CSSでテキストの最初の一文字を大きくする方法【::first-letterの使い方】

CSSの擬似要素、first-letterを使って最初の一文字を大きくする方法を解説します。文字を大きくするだけでなく、色や太さを変えたり、floatを使って一文字目にテキストを回り込ませる事も可能です。

CSSのaspect-ratioでアスペクト比を固定してレスポンシブを簡単にする方法

2023/3/27

CSSのaspect-ratioでアスペクト比を固定してレスポンシブを簡単にする方法

CSSのaspect-ratioでアスペクト比を固定してレスポンシブを簡単にする方法を解説します。padding-topを使うという従来のやり方もありますが、aspect-ratioの方がコードも少なく簡単に書けます。

CSSでアルファベット(英語)を大文字・小文字表示にする方法

2023/3/26

CSSでアルファベット(英語)を大文字・小文字表示にする方法

アルファベット(英語)をHTMLで全て大文字で書くと音声読み上げソフトで正しく発音されないので、CSSで大文字にする方法を解説します。これが出来るとアクセシビリティを考慮した書き方ができます。

CSSでダウンロードしたWebフォントを使う方法【@font-faceの書き方】

2023/3/26

CSSでダウンロードしたWebフォントを使う方法【@font-faceの書き方】

ダウンロードしたフリーのWebフォントの使い方、@font-faceの書き方を解説します。拡張子やformatなど通常のフォントのスタイルでは書かない記述もあります。複数の太さやstyleなどのして方法も解説しています。

CSSでborder(線)をグラデーションにする方法【サンプル付き】

2023/3/25

CSSでborder(線)をグラデーションにする方法【サンプル付き】

border(線)をグラデーションにする方法を解説します。上下左右、円形、、3色以上、一部、一周など色んな実装をサンプル付きでご紹介します。

CSSでborder(線)の両端を徐々に透過させる方法【サンプル付き】

2023/3/25

CSSでborder(線)の両端を徐々に透過させる方法【サンプル付き】

タイトルの両端に線を引くデザインがありますが、この線の両端を徐々に薄く透過させる方法と、タイトルの上下に一本の線を引きその線の両端を透過させる方法も解説。どちらもbackground-image: linear-gradient();を使います。

CSSのdvhでスマホの高さ100%にする方法【アドレスバー問題解決】

2023/3/25

CSSのdvhでスマホの高さ100%にする方法【アドレスバー問題解決】

高さいっぱいに表示したい場合、100vhにすればパソコンでは良くてもスマホだと問題があります。今まではJavaScriptを使う方法が主流でしたが、今はdvhという便利な単位が使えるようになったので、どのように見えるのか含めて解説します。

CSSで要素を上下左右反転させる方法【背景画像だけ反転も解説】

2023/3/24

CSSで要素を上下左右反転させる方法【背景画像だけ反転も解説】

画像や要素を上下左右反転させる方法と、背景画像だけ反転させてその上にある文字は反転させない方法をサンプルを使って解説していきます。今回は主にtransform: scale();を使う方法を解説します。

HTMLのpictureタグで画像のレスポンシブ切り替えする方法

2023/3/24

HTMLのpictureタグで画像のレスポンシブ切り替えする方法

pictureタグで画像のレスポンシブ切り替えする方法を解説しています。CSSのdisplay: none;でPCとSPを切り替える方法はパフォーマンス的に良くないですが、pictureタグはその心配がありません。デモも用意しています。