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

CSS

: CSS

Bootstrap: img-fluid による画像のレスポンシブ対応

2023/7/8

Bootstrap では、img-fluid クラスを適用することで、画像のレスポンシブ対応を行うことができます。実装例サンプルダウンロード bootstrap-responsive-image. ...

: CSS

Bootstrap: マージンを設定する方法

2023/7/14

Bootstrap でマージンを設定する方法を紹介します。通常の CSS のプロパティ表記と異なり、省略形が使われているので、省略のルールを示します。実装ルールマージンと位置は、次のような規則で表 ...

: CSS

Bootstrap: 要素の上側（上部）に罫線を表示する方法

2023/7/8

border-top の利用 border-top クラスを利用することで、要素の上側（上部）に罫線を表示することができます。フッターの上罫線などを表示する際に重宝します。実行結果フッター要素の上 ...

: CSS

Bootstrap: 要素の下側に罫線を表示する方法

2023/7/8

border-bottom の利用 border-bottom クラスを利用することで、要素の下側に罫線を表示することができます。ヘッダー　navbar の下罫線を表示する際に重宝します。実行結果 ...

: CSS

Bootstrap のリンクの下線を消す方法（サンプルあり）

2023/7/8

Bootstrap 5 でリンクの下線を消すクラスを紹介します。本稿下部に、ダウンロード可能なサンプルも用意しております。ぜひご活用下さい。 text-decoration-none の利用 text ...

: CSS

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

2019/8/28

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

: CSS

CSS: flexbox で固定フッターを表示（サンプルコードあり）

2023/7/8

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

: 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 ...

1 2 Next »