タグ

レイアウトに関するprecommendのブックマーク (2)

  • 増えてきたソーシャルボタンを横に綺麗に並べるCSS

    CSS」の「flot」を使ってそのままソーシャルボタンを並べると上揃いで下が少しだけデコボコしてしまいます。 今までは「padding」などで微調整して下揃え風にしてたのですが、ソーシャルボタンが増えてきて「もう、面倒くさい!」となり、色々試した結果「display:inline-block;」に辿り着きました。 「vertical-align」プロパティが適用できるのは「インライン要素」と「テーブルセル」 今回は、ソーシャルボタンを下揃えにしたいので「vertical-align」プロパティが使いたいと考えていて、調べてみると「vertical-align」が使えるのが、インライン要素とテーブルセルだと分かりました。あとは、スマホでの表示具合などを見ながら試してみました。 「テーブルセル」を試してみた 「display」プロパティの「table」要素と「table-cell」要素を使っ

    増えてきたソーシャルボタンを横に綺麗に並べるCSS
  • [CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす

    スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値(px)で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き

  • 1