CSSサンプル– category –

CSS Grid Layoutは、Webページの要素を「行」と「列」の両方で整理できる便利なレイアウト方法です。Flexboxが横並びや縦並びの1次元レイアウトに向いているのに対し、gridは2次元の配置が得意です。たとえば、ヘッダー、サイドバー、メイン、フッターのよ...

Flexboxでカードやメニューを横並びにすると、要素数によっては最後の1列だけ余白が目立つことがあります。特に、1行あたりの表示数が決まっているレイアウトでは、最終行が中央寄せのように見えてしまい、「左端からきれいに並べたい」と感じる場面がよく...

flexboxで左右の端に要素を配置したいときは、justify-contentを使うのが基本です。ナビゲーションメニュー、ボタンの並び、ヘッダー内のロゴとリンクの配置など、Web制作ではよく登場する場面です。まずは、「justify-contentは横方向の配置を決めるプロ...

Flexboxを使ってレイアウトを組むと、HTMLの並び順はそのままに、見た目だけ順番を入れ替えたい場面があります。そんなときに役立つのがorderプロパティです。たとえば、スマホでは画像を上に、PCではテキストを先に見せたいといった調整も、HTMLを大きく...

flexboxを使うと、子要素の配置を直感的に整えられます。なかでもよく使うのが、子要素を縦方向の中央にそろえる方法です。ヘッダーやカード、ボックス内のテキスト配置など、実務でも出番の多い基本テクニックなので、仕組みと書き方をあわせて押さえてお...

フォームの入力欄は、見た目がシンプルなままだと「ここに入力する」と気づきにくいことがあります。特にテキストボックスやテキストエリアは、クリックしやすさだけでなく、フォーカス時の見た目を分かりやすくしておくと、ユーザーが迷わず操作しやすく...

画像をWebサイトに配置したとき、「縦横比はそのままにしたいけれど、枠からはみ出す部分は切り取りたい」という場面はよくあります。たとえば、サムネイル画像を同じ大きさで並べたいときや、カードデザインを整えたいときです。こうしたときに便利なのが...

スマホ画面では画像とテキストを縦並びにし、PCでは横並びにしたいというレイアウトはよくあります。たとえば商品紹介やプロフィール、記事のサムネイル付きカードなどで使う場面が多いです。今回はCSSだけで、画面幅に応じて画像とテキストの並びを切り替...

スマホで表を見せたいとき、横スクロールにする方法は手軽ですが、見たい列を左右に動かす必要があり、少し使いづらく感じることがあります。特に列数が多い表や、比較したい情報が細かい表では、画面内で内容を読み取りやすくする工夫が大切です。 この記...

CSSだけで吹き出しを作成する方法です。 吹き出しのイメージ HTML [crayon-6aceb1c3ad235570621983/] CSS [crayon-6aceb1c3ad23c808015512/]