Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
UIに隠されたデザインの意図 | Made with Unity
独特の世界観やゲームシステムが特徴的な「伝説の旅団」。実は、そのUIにも独特の工夫が散りばめられています。伝説の旅団について語られる時に、UIが言及されることはほとんどありません。ある意味、空気のような存在として馴染んでいるのです。しかし、ここに至るまでに、数多くのデザイン作業が行われ、紆余曲折を経て現在の形になりました。普段のプレイ中は意識することはなかったかもしれませんが、今回はそのUIデザインについてご紹介します。 早速ですが、いくつかの画面を並べてみました。 実は、これらの画面の要素は「あるルール」に基づいてレイアウトされているのです。何だか分かりますか？ そのルールとは、「主要なボタンを右側に配置する」というものです。 分かりやすいように、左半分を暗くしてみました。ゲームのメインループに関わるボタン群が、全て右側だけで押せることが分かると思います。これは、意図的に配置されたもので
jQueryで要素を上下中央に配置する方法（IE8対応） | それからデザイン スタッフブログ
divの高さが決まっている時は、“margin-top”に高さの半分のネガティブマージンを指定すれば上下中央になります。（例：divの高さが100pxなら、“margin-top:-50px”） 高さが決まっていない時でも、下記のようにjQueryで要素の高さを取得して、cssにネガティブマージンを代入すれば上下中央にすることができます。 javascript $(function(){ var wH = $(window).innerHeight(); //ブラウザの高さを取得 var divH = $("div").innerHeight(); //divの高さを取得 $("body").css("height", wH + "px"); //bodyにブラウザの高さを代入 $("div").css("margin-top", "-" + divH / 2 + "px"); //div
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
