本記事では、本来子要素に継承されるプロパティのスタイルを強制解除する方法について解説しています。 【継承されるプロパティとは】 CSSのスタイルには、子要素に継承されるプロパティと継承されないプロパティの2つがあります。継承される代表的なプロ...

本記事では、CSSでクリックイベント・タッチイベントを無効化する方法について解説しています。 【pointer-eventsプロパティ】 クリックイベント・タッチイベントを無効化する方法はとても簡単で、無効化したい要素のCSSに「pointer-events: none」を指定...

本記事では、HTMLとCSSで打消し線を付ける方法について解説しています。打消し線は古い情報をページから削除せず修正記録として残しておきたい時に使用されるテクニックです。 【HTMLで打消し線を付ける方法】 HTMLで打消し線を付けるには、<del>タ...

本記事では、display:flexで横並びになったflexアイテムの高さを均等に揃える方法について解説しています。 【align-itemsプロパティを使う】 flexアイテムの高さを揃えるには、交差軸の配置を調整するalign-itemsプロパティを使います。値には「stretch」...

本記事では、displya:flexで横並びにした要素に対して均等に余白を設ける方法について解説しています。 【均等に余白を設ける2つの方法】 先輩！均等に余白を設けるにはどうすればいいんですか？ 2つの方法があるから、別々に紹介するね！個人的に1つ目に...

本記事では、CSSで画像を中央寄せする方法を解説しています。 【画像を中央寄せする2つの方法】 先輩！画像を中央寄せする方法を教えてください！ 了解！画像を中央寄せする方法は2つあるから、別々に紹介するね！ text-align:center; 1つ目は、text-align...

本記事では、divタグ(ブロック要素)が中央寄せされない時・margin:0 autoが効かない時の原因と対処法について解説しています。 【divタグが中央寄せされない原因】 先輩！divタグの中央寄せが出来ません。。 margin:0 auto;は指定している？ はい、指定し...

本記事では、data属性でスタイルを適用させる方法について解説しています。 【data属性を使う必要性】 先輩！data属性を使う理由って何ですか？別にclassを使ってスタイルを適用させればいいと思うんですけど。。 classを使っても同様にスタイルを適用する...

本記事では、CSSのpositionプロパティの解除方法について解説しています。 【position:static】 positionプロパティの値をリセットする方法はとても簡単で、position:staticで上書きします。 .elem { position:static; } staticは、positionプロパティの初...

本記事では、position:absoluteを使って中央寄せする方法について解説しています。 【position:absoluteで中央寄せする手順】 先輩！position:absoluteで中央寄せする方法を教えてください！ 了解！3つの手順に分けて解説するね！ サンプルコード <!DOC...