first-child と last-childの使い方をご紹介
2024/3/28 要素
プログラミングを勉強中のみなさん、こんにちは! 今回は、CSSの first-child と last-child について紹介します。 初心者向けのメモ書きとして執筆しておりますので、あしからず。 ...
<input> はインライン要素 max-widthは効きません
プログラミングを勉強中のみなさん、こんにちは! <input>タグに幅を持たせようとして、max-widthを設定したけど、幅が広がならいよ・・・ と困っていませんか? 結論 ...
【flex】高さを揃えないで要素を並べるにはalign-items
今回は、flexを使うときの便利なテクニック、「align-items」を紹介します。 以前私がハマってしまったのが、高さが異なる要素を並べたとき、自動で高さがそろってしまったことです。 高さはバラバ ...
【Bootstrap】レスポンシブデザインで要素の順番を変える方法
Bootstrapにおけるレスポンシブデザインで、要素の順番を変える方法はどうやるの? という疑問にお答えします。 例えばLargeサイズからMediumサイズへ移行するとき、もちろん他 ...
marginの相殺を理解しよう marginが反映されない理由を解説
cssでmarginを設定したけど反映されない・・・ と困っている人はいませんか? それは「marginの相殺」によるもの、かもしれません。 頭の中が「相殺???」となっている人は、隣り ...
クリックイベントで表示させた要素を領域外クリックで非表示にする方法
クリックイベントで出現させた要素を、再びクリックして要素を消したい! というご要望にお答えします。 ポイントは、出現した要素をクリックして非表示するのではなく、サイト上どこをクリックしてもその要素を消 ...
floatを設定したら下の要素が入り込んできた!を解決します
2024/4/4 要素
要素の横並びは flex を使う人がほとんどだと思いますが、今回は「float」のエラー解決を紹介します。 floatを使ったはいいが、floatを指定した要素に、下の要素が入りこんできた!なんてこと ...
【jQuery】対象要素(セレクタ) を2つ指定したいときのコード
2024/4/4 要素
今回は、jQueryの動作を設定するとき、対象要素(セレクタ) を2つ指定したいときの記述を紹介します。 ちょっとしたことですが、気になる人もいるかと思いますので、簡単紹介します。 目次 サンプル解決 ...
position:absolute で要素を中央寄せにする方法
今回は、CSSにおける、「position:absolute」の中央寄せをご紹介します。 *親要素に対する「relative」の記述は省略します。 目次 左右(横方向)における中央寄せ上 ...