アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

CSS

CSSだけで画面の下端にフッターを固定する

スクロールでついてくるやつではなく、 「ページの一番下に表示、ただしコンテンツが少なくスクロールが発生しないときは画面の一番下に表示」 というやつ。まずHTMLがこんな感じで、固定したいfooter要素がbodyの直下にあるものとする。 他のコンテンツの構…

いい感じにdivをスライドさせる

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>…

div要素をきれいに並べるのは難しい(floatを使って配置)

CSS

これの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…

div要素をきれいに並べるのは難しい(displayを使って配置)

CSS

いろんな方法はあるっぽいけど、とりあえず調べて動かしてみたやつを残しておく。 ブラウザによっては動かないとかあるかも。displayでなくfloatでやるときはこっち。 以下の3つのdivをいろんな並べ方してみます。 (3つと言いつつ、パターンによって親divが…

CSSの指定方法いろいろメモ

バック兼業フロントエンドエンジニア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>

CSSで画面の一部だけをスクロール可能にする

CSS

デザイン的には諸刃の剣な感じがしますが、 新着情報やちょっとした一覧など、特定部分のみをスクロールさせたいとき。スタイルに「overflow: auto;」もしくは「overflow: scroll;」を入れればOKです。 ただし、heightを指定しておく必要あり。 (ここでheig…

CSSでheightにパーセンテージを使えなくて困った話

CSS

CSS初心者は毎日色々困っています。諸々のサイズ指定をするのに、 とりあえずわかりやすくパーセンテージ指定をしたいことが結構あるのですが 効くときと効かないときがある。どういうことかと思って調べてたらたぶんこれだ…。CSSでheight:100%を使う方法に…