タグ

flexboxに関するyasu-logのブックマーク (4)

  • HTMLコーディングの人気のスタイルは? アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA

    ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ(例:IE9)が無視できるシェアまで下がったことや、floatよりFlexboxのほうが

    HTMLコーディングの人気のスタイルは? アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
  • 特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA

    ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基については前回の記事『CSS Grid Layout入門』を参照ください。 この

    特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
  • CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA

    CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり

    CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

    HTMLCSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
    yasu-log
    yasu-log 2016/12/19
    meta keywordsを強要してくるクライアントってまだいるのかな?
  • 1