position: absolute;を中央寄せする方法 | コトダマウェブ
positionプロパティをabsoluteに指定したときって、どうやって中央に寄せるんだっけ？と意外と覚えられない自分のための備忘録です。なんかposition: absolute;になった時点で配置についてどう考えたらよいか分からなくなってしまいますよね。 左右を中央寄せる方法 See the Pen img_center03 by kenichi (@ken81) on CodePen. CSS img{ position: absolute; left: 0; right: 0; margin: auto; } これは理屈というよりは覚えた方が良いと思います。左右のpositionをゼロにしてmargin: auto;と。 上下を中央に寄せる方法 See the Pen img_center04 by kenichi (@ken81) on CodePen. CSS img{ po
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方 – bl6.jp
CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に配置させたい時があるかと思います。先日このように配置させなきゃいけない状況になったのでその時のやり方をメモがてらエントリーします。ちなみに今回は二つの要素の幅と高さが決まっている場合と、二つ目の要素の幅と高さだけが決まっていて一つ目は決まっていない場合の2パターンのやり方です。 [ads_center] 二つの要素の幅と高さが決まっている場合 二つ上下に並んでいる要素が共に幅と高さが決まっている場合のやり方です。この場合はpositionだけを使えばいいのでとても簡単です。 HTML <div class="wrap"> <div class="box1">box1</div> <div class="box2">box2</div> </div> .wrap { position: relative; height:
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
MobileSafariのposition:fixedが厄介すぎる件 – capeknote
固定ツールバーの実現最近ipad/iphoneサイト制作について調べてるんだけど、positon:fixedが使えない関係で、上下固定メニューが厄介すぎるのでメモ。 結論から言えば、 iscroll.js をつかう Sencha Touch (Ext.js 有料) をつかう のが現実的っぽい。 ちなみにJQueryMobileはfixed対応をガチでやらずに↓のサンプルのように http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fixed.html absoluteで、スクロールされるときに一度消して再配置しています。 たぶん汎用性を優先したんだと思う。 そもそも何が問題かというと fixedにしても画面といっしょにスクロールされちゃう setIntervalで回して常にabsolute配置を変更して対応しようと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
