どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
Fastwaveサーバ管理者からのお知らせ 日記の記述内容に関するご意見・ご感想は、各日記著者に直接ご連絡ください。 [日記鯖って何?] [使い方説明] [質問と回答] ■ スキャナ EPSON カラリオ カラリオ・スキャナ GT-S600 (EPSONの商品ページ)。 スキャナ欲しいなーでも2,3万はするし…と思っていたのですが、調べてみるとなんか一番下のモデルなら1万円切っていてとても安いのです。 何よりちゃんとWindows Vista x64対応です。すばらしい。 ということでAmazonでぽちっとしました。 実際に使ってみた感想は、画質に取り立てて凄いこだわりがないからかもですが、特に困ったこと(変にゆがむとか色がアレとか)もなくコストパフォーマンス的に良いのではないかと思います。 本体そのものに関しては、軽くて丸みがなくかつ薄いこともあり邪魔にならないのが良いですね。
主に自分の為のメモ。 CSSのmarginでわかりにくいのが、縦方向の解釈。 上下に隣接するBOX同士でどう処理されるか、という部分ではないでしょうか。 CSSでサイトをコーディングしていると、あれっと思う事もしばしば。 まずは単純に上下に並べられたBOXの場合。 サンプル このサンプルでは、上のBOXには1emの縦margin。 下のBOXには2emの縦marginが指定されています。 その結果、上下BOXの間に発生するmarginは、大きい方である2emになります。 1em+2em=3emのような足し算にはなりません。 これはシンプルで分かりやすいですね。 次はちょっとややこしい、親子関係での上下margin。 サンプル2 サンプルのソースを見てもらえれば分かるように、divとpが親子の関係になっています。 指定するスタイルは、p要素に関してはどちらも同じ。 div要素に関しては、bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く