CSS
スクロールでついてくるやつではなく、 「ページの一番下に表示、ただしコンテンツが少なくスクロールが発生しないときは画面の一番下に表示」 というやつ。まずHTMLがこんな感じで、固定したいfooter要素がbodyの直下にあるものとする。 他のコンテンツの構…
CSSとHTMLだけで、divを横にスルッとスライドさせるやつ(語彙力) スライドショーみたいに勝手にうごくやつじゃなくて、クリックして次に進むタイプ。 .slides { display: flex; overflow: hidden; scroll-behavior: smooth; } .slides > div { flex-shrink: 0…
個人的に開発作業をするときは、 非表示用のクラスを定義しておいて、そのクラスを追加削除することで対応しています。CSS ※AdminLTEなんかだと、同様の定義が元から含まれています .hidden { display: none; } HTML <div class="hidden"> ここは表示されない </div> <div> ここは表示される </div>…
これのfloat版。今回も以下の3つを並べてみます。 <div class="div1">div要素1</div> <div class="div2">div要素2</div> <div class="div3">div要素3</div> .div_common{ margin: 0; padding: 0; color: #FFF; } .div1{ width: 5em; height: 5em; background: #6b8e23; } .div2{ width: 5em; height: 5em; background: #9acd32; } .div…
いろんな方法はあるっぽいけど、とりあえず調べて動かしてみたやつを残しておく。 ブラウザによっては動かないとかあるかも。displayでなくfloatでやるときはこっち。 以下の3つのdivをいろんな並べ方してみます。 (3つと言いつつ、パターンによって親divが…
バック兼業フロントエンドエンジニア1年生、昔はHTMLは書いてたけどCSSすごい苦手だったのが今更響いている…。サンプルを作って試したのをメモ。<HTML> <div id="divid1" class="divclass1 divclass2"> <span>test1</span> <div id="divid2" class="divclass1 divclass3"> <span>test2</span> <div id="divid3" class="divclass2 divclass3"> <span>test3</span> </div></div></div>
デザイン的には諸刃の剣な感じがしますが、 新着情報やちょっとした一覧など、特定部分のみをスクロールさせたいとき。スタイルに「overflow: auto;」もしくは「overflow: scroll;」を入れればOKです。 ただし、heightを指定しておく必要あり。 (ここでheig…
CSS初心者は毎日色々困っています。諸々のサイズ指定をするのに、 とりあえずわかりやすくパーセンテージ指定をしたいことが結構あるのですが 効くときと効かないときがある。どういうことかと思って調べてたらたぶんこれだ…。CSSでheight:100%を使う方法に…