本記事では、本来子要素に継承されるプロパティのスタイルを強制解除する方法について解説しています。 継承されるプロパティとは 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:cen...

本記事では、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つの手順に分けて解説するね！ サンプルコード <!DOCTYPE...