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

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

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

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

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

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

＊ハンバーガーメニュー実装のポイント＊

スマホ版Webサイトではナビゲーションメニューを表示しておくスペースがないので普段は隠しておき、ボタンタップでメニューが表れる仕組みが一般的です。
この記事では、そういったメニューの実装のポイントをお伝えします。

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

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

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

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

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

＊DOM操作の基本についてです＊

JavaScriptを使うと、HTMLを直接編集しなくてもプログラムでHTMLを動的に操作（テキストの書き換えや、属性の変更、要素の生成・削除など）することができます。

今回はDOM操作の手順と方法について、基礎の部分を簡単にお伝えします。

＊【CSS】要素の表示⇔非表示の切り替えについてです＊

要素の非表示自体はdisplayプロパティなどで簡単にできますが、アニメーションにして表示と非表示を切り替えたい場合などは注意が必要です。
opacityとvisibilityの違いなどについても解説しています。

＊改行（br要素）の注意点についてです＊

brタグの挿入で改行ができることは、コーダーでなくとも知っている人が多いのではないかと思います。
使い方もタグを挿入するだけなので、とても簡単です。

ですが簡単であるがゆえに、無意識的に適切ではないbr要素の使い方をしてしまうことも…！？
今一度、br要素の注意点について確認していきましょう。

＊JavaScriptの配列・オブジェクトを使って複数のデータを格納・確認する方法です＊

例えば会員登録をする際、氏名の他にメールアドレスやパスワードを設定することが多いと思います。
このように複数のデータがある場合は、データを【配列】や【オブジェクト】の形式にすることで、管理が容易となります。

この記事では、配列・オブジェクトを使った複数データの格納についてお伝えします。

＊【CSS】画像の形に合わせてテキストの回り込ませる方法です＊

画像とテキストを横並びにすると、通常であれば四角形の枠で区切られて規則正しく画像とテキストが並べられます。
規則正しいレイアウトは見やすいのですが、面白みに欠けて退屈な印象を与えてしまうことも…。

そこで、画像の形（丸とか色々）に合わせてテキストを回り込ませる、ちょっとオシャレなレイアウトを実装する方法をご紹介します！