- CSS 幅固定レイアウト
- gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ...
- 2020-03-16 23:26:20
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
配置
要素を配置することに関するサンプルです。
「配置」に関するサンプル
- CSS tableを使わないgridの表
- display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。...
- 2020-03-11 23:27:24
- CSS デバイスの横のサイズを扱う
- CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位...
- 2019-11-16 12:53:42
- CSS3 flexを使った配置３（行間の操作）
- 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun...
- 2019-08-03 21:29:20
- CSS3 flexを使った配置２（要素の改行）
- 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{...
- 2019-07-30 21:50:18
- CSS3 flexを使った配置１（横の位置）
- flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。...
- 2019-07-29 21:51:41
- JS URLのハッシュ値をUIに活用する
- URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。...
- 2019-08-07 22:06:43
- CSS floatとheightとtopの50%
- CSSでfloatを使うとよく、高さを指定する部分で謎にハマってしまうことがあります。 そもそもこういう風にfloatは使わないよ、と言われてしまいそうですが、...
- 2019-08-07 17:50:50
- jQuery スタイルの数値取得
- 例えばスタイルシートでもともと余白を指定していて、JSでその横幅を数値で欲しいときに使います。 #demo_base { background-color:#FCF; width:25...
- 2019-08-07 17:31:24
- CSS3 ウィンドウサイズ変更でアニメーション
- ウィンドウのサイズが変わった時にアニメーションでレイアウトを変えたいときに使う表現です。 MediaQueryを使ってウィンドウサイズによってレスポンシブに変...
- 2019-07-29 05:49:53
Top