じゅんぺい

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タグはその心配がありません。デモも用意しています。

縁取り文字をtext-strokeとtext-shadowを使って実装する方法を解説します。どちらも注意点があり、デモを見ながらその違いも確認できます。両方知っておくと使い分けができるようになります。

text-shadowでテキスト(文字)に影をつける方法をサンプルを使って解説します。影は位置、色、ぼかしなど変えられるので、1つずつ解説していきます。また影を複数つけたり全方向にして縁取り文字のようにすることも可能です。

box-shadowでボックス要素や画像に影をつける方法をサンプルを使って解説します。影は位置、色、大きさ、ぼかし、向きなど変えられるので、1つずつ解説していきます。

Flexboxで画像とテキストを横並びにしたら画像や要素が小さく潰れた(縮む)ことはありませんか？これはCSSに1行書けば解説することができます。今回はその対処方法と原因をデモを使って解説します。

CSSで文章を縦書きにする方法をデモを使って解説しています。また縦書きで使えるテクニックについてもご紹介しています。縦書きは日本風のサイトではよくあるデザインなので、実装できるようにしておくと便利です。

サンクスページや404ページなど、コンテンツ量が少なく短いページでもフッターを最下部に表示する方法を解説します。ページの高さが足りないページは対策しないとフッターの下に余白が出来てしまうので、ちゃんと対策しておきましょう。

CSSのhover(マウスオーバー)で画像を切り替える方法を解説。回転・スライド・フェードなど様々な方法と方向での切替方法をデモとコードを使って解説しています。

CSSでhoverしたら画像や文字など要素を回転させる方法を解説しています。hoverしたときだけ回転させる場合と、hoverを離したときにも回転させる場合の両方解説しています。アニメーションは簡単に実装できるので、ぜひ試してみて下さい。

CSSで要素を回転させる方法をアニメーションも使いながら解説しています。コードとデモがあるので、コピペで実装可能です。要素を回転・傾けることは実務でもたまにあるので、覚えておくと便利です。

The Moneytizerを1ヶ月使った収益を報告します。アドセンスと比較したり分析をしているので、アドセンスで稼げないと感じている人は必見です。当ブログはアドセンスの10倍以上稼げていますが、それもちゃんと理由はあり解説しています。

The MoneytizerはGoogleアドセンスに似た広告配信サービスで、日本で導入されたのは2022年とまだ情報が少ないです。今回は評判・口コミ・アドセンスとの違いや登録方法、広告の貼り方など解説。5ドル貰えるクーポンコード付きです。