canvas要素の基本

HTMLのタグは使い方がシンプルで簡単なものが多いですが、canvasタグはやや扱いが難しい部類に入ります。

この記事では、『そもそもcanvasタグで何ができるのか？』『自分は学んだ方が良いのか？』そんな疑問にお答えします！

aspect-ratioについて

Webページには画像を配置することも多いですが、パソコンとスマートフォンで画像の縦横比を変えたい…という場合も多いですよね。
ですが、縦横比を計算してheightを指定するのも面倒です。

そこで、aspect-ratioを使ってheight値はautoのまま、画像の縦横比を変える方法をご紹介します。

疑似クラス:has( )について

:has( )は2022年10月現在、ようやく主要なブラウザでのサポートが広まった新しい擬似クラスです。
特定の子要素を持つ親要素をセレクタ指定する際に便利なので、ぜひ基本的な使い方を押さえておきましょう。

＊dl・dt・ddタグの使用例と注意点＊

FAQ（よくあるご質問）のコーナーは、多くのWebサイトやランディングページで見かけますよね。

今回は、FAQをマークアップするのに適したdl・dt・ddタグについて紹介します。

疑似クラス:notの基本と便利な使い方

CSS調整では『特定の要素だけ適用を除外させたい』という場合がしばしばあります。
そんな時に便利なのが、疑似クラス:notです。
この記事では:notの使い方と活用法についてご紹介します。

＊figure要素の使用例とポイント＊

画像を挿入する際、imgタグを単独で配置しても良いのか、何か他のタグで囲んでマークアップすべきなのか、悩んだことはありませんか？

説明（タイトル）付きの画像はfigure要素でマークアップするのがオススメです。
この記事では、figure要素の基本的な使い方と注意点について解説していきます。

CSSの擬似クラス:targetを使ったライトボックス

ライトボックスは通常、JavaScriptを使って実装されることが多いかと思いますが、工夫次第でCSSだけでも実装可能です。

今回は、擬似クラスの一つである:targetを使って、ライトボックスを実装する方法をご紹介します。

＊同一ページ内でジャンプさせる方法＊

ページが縦長でスクロールが大変でも、ボタンクリックで飛びたい場所へ飛べるようにしておくだけで、ユーザーの利便性はグッと向上します。

同一ページ内のジャンプは、JavaScriptの力に頼らずともHTMLだけで実装可能です。
やり方も簡単なのでWeb制作者はもちろん、ブロガーなども覚えておきたいテクニックです。

2022年版CSSで要素を中央配置にする方法の紹介

昔から使われている代表的な中央配置の方法から最新の方法まで、CSSで要素を中央に配置する方法をご紹介します！

＊Webページでルビ（ふりがな）をふる方法についてです＊

専門的な内容のブログサイトなどでは記事中に難しい漢字を使うこともあります。
その場合、（ ）の中にふりがなを記載しておく方法もありますが、本のようにルビ（ふりがな）をふることもできます。

本記事ではルビをふる方法について解説していきます。