タグ

CSSとlayoutに関するama-chのブックマーク (4)

  • 理解しておきたい、CSSによるインラインレイアウトの仕組み(font-size/line-height編)Inline Layout─Frontrend Conference

    理解しておきたい、CSSによるインラインレイアウトの仕組み(font-size/line-height編)Inline Layout─Frontrend Conference 高津戸壮(株式会社ピクセルグリッド) この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事(全4回)として書き起こしたものです。今回は第1回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

    理解しておきたい、CSSによるインラインレイアウトの仕組み(font-size/line-height編)Inline Layout─Frontrend Conference
  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
  • Advanced HTML page authoring using modern CSS features code lab

    Advanced HTML page authoring using modern CSS features code lab Introduction This codelab will teach you the latest CSS features and how to use them effectively to build amazing web content taking full advantage of modern browsers. The lessons show how to produce different layouts from web document content by applying various CSS layout features. Pre-requisites A laptop with a text editor installe

    Advanced HTML page authoring using modern CSS features code lab
  • ふじこのプログラミング奮闘記

    どうも(p・ω・q) 土日合わせて5日間のお盆休みでした~。 皮膚も髪も茶色くなったような気がしますよ。 さて、二週間ほど前の記事になってしまいますが、 .netのThe future of CSS layoutsという記事を翻訳紹介します。 *** -- CSSが提供する機能はとてもすばらしいですが、基的なページレイアウトに関しては、意外と残念なことになっています。 -- しかし、Peter Gasstonが言うように、よりリッチでダイナミックなページにするためのオプションも用意されています。 公言してから数年、CSS3はついに立派な地位を築きました。角丸やグラデーション、透過、変形、遷移、アニメーションなどなど、 全く新しい様々な機能を使えるようになりました。そんな一見魅力的で楽しい機能ですが、あと何が足りないのでしょう。 CSS3が対処するべき次の問題は、レイアウトです。今現在、

    ama-ch
    ama-ch 2012/06/10
    Columns,FlexBox,Grid,Template,Positioned floats,Exclusions,Regions
  • 1