レスポンシブ

この記事に関しては、第2弾の記事を書きましたので「第2弾【CSS・レスポンシブ】日付とカテゴリとタイトルを横並びにして新着情報を作る」をご覧ください。（2021年7月25日）   過去に「【 ...

ページ内で線や色分けなどでエリアを区切る表現がありますが、今回は区切りのところにタイトル用の画像やテキストを被せる方法をご案内します。 ◆デモページをご覧ください。 デモページを見る   ソ ...

PCだと横並びで、スマホだと縦並びになるカード型の表示形式です。 1カラムのページで見かけると思います。   ◆まずはデモページをご覧ください。 デモページを見る   ソースもろも ...

飲食店などで使える料金表を、実際の店舗に置いてあるメニュー表のように作ってみました。 スマホで見るときは、メニューや料金が縦並びになります。   ◆まずはデモページをご覧ください。 デモペー ...

画像の上に、白いカードを乗せたようなデザインで作りました。 数字の部分は「Google Fonts」を利用しています。 スマホで見るときは、テキストと画像が縦並びになります。   ◆まずはデ ...

会社概要やお問い合わせページなどで使う事のある表組みを、レスポンシブな「table」で作る方法です。 実際のページを下記のデモページよりご確認ください。 ブラウザを狭めてみると、レイアウトが変わります ...

PCで表示する時は横並びで、スマホで表示する時は上下に変わる、レスポンシブな「dl dt dd」定義リストです。 新着情報を例にしたデモページです。 ブラウザの横幅を狭めてみてください。 デモページを ...