CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
CSSの新しいレイアウトモジュール「CSS Grid」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル
「CSS Grid」はCSSの新しいレイアウトモジュールで、まだEditor's Draftですが、手続き完了に近づいています。このモジュールは17個の新しいプロパティを持ち、今までとは異なる新しいコンセプトでCSSを記述します。 この新しい仕様がどのように機能し、どのように記述するか、レスポンシブ対応の3カラムレイアウトを使って紹介します。 CSS Gridの基本的な使い方は、下記ページをご覧ください。 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 The Holy Grail Layout with CSS Grid 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「Holy Grail Layout（聖杯レイアウト）」とは 「CSS Grid」で3カラムレイアウトを実装 実装の解説 「Holy G
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
テーブルの行列変換
ダウンロード jquery.table_transpose.js 使い方 head 内で jQuery と jquery.table_transpose.js を読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.table_transpose.js"></script> 対象となるテーブルのidを指定します。 $("#table1").table_transpose(); ※デモでの使用例 $("#button1").live("click",function(){ $("#table1").table_transpose(); }); 注意: row span 、 col span を指定した表には対応していません。 作者：
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Tables, for Bootstrap 5