じゅんぺい

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

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

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

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

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

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

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

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

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

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