プログラミング tips を書いています。実行可能なサンプルも公開しています。また、プログラミングに役立つ英語情報も発信しています。

CSS

: CSS

Bootstrap の便利なクラス

2022/8/6

Bootstrap 5 を使う上で便利なクラスを列挙します。Bootstrap 4 からクラス名が変更されているものもありますので、ご注意ください。 border-bottom 要素の下側に罫線を表示 ...

: CSS

Flexbox を利用してレスポンシブなレイアウトを実現する２

2019/8/28

Flexbox を利用して、レスポンシブレイアウトを実現する例です。PC などの幅の広い画面では、サイドメニューがメインコンテンツの左側に表示されています。幅の狭いモバイルデバイスでは、サイドメニュー ...

: CSS

flexbox で固定フッターを表示

2019/8/28

コンテンツの量に関わらず、常に画面下部にフッターを表示する例です。こちらの記事で紹介している実装と比較し、３箇所ほど追加することで対応することができます。

: CSS

flexbox でフッターを表示する

2019/8/28

css の flexbox を使い、フッターを表示します。ページの body には、min-height で高さを明示しておきます。body の中に配置されているヘッダー(header)、メイン( ...

: CSS

Flexbox を利用して要素を中央と右端に表示

2019/8/28

Flexbox を利用して、要素を中央と右端に表示してみます。 parent クラスで display: flex としているので、justify-content に center とすることで、子要 ...

: CSS html

Flexbox を利用してレスポンシブなレイアウトを実現する

2019/8/28

タイトルのままです。Flexbox を利用して 2 カラムのレスポンシブレイアウトを実現する例です。コピペしてそのまま使えますので、よかったら使ってみてください。 CSS .header{ backg ...

: CSS html

Flexbox を使って要素を並べる

2019/8/28

Flexbox を利用して、要素を横並び、縦並びにする方法です。横並びリストの親要素(div class="list") の display に flex を指定します。そして、リストの子要素に ...

: CSS html

要素を画面の下部に表示する方法

2019/8/28

HTML と CSS で、要素を画面の下部に表示する方法です。 CSS で position を fixed、bottom に 0px とします。 <!DOCTYPE html> < ...

: CSS

擬似クラスと擬似要素

2019/8/28

今日は CSS の基礎をおさらいしていました。疑似クラス (Pseudo-classes) https://developer.mozilla.org/ja/docs/Web/CSS/pseudo- ...