タグ

2015年5月19日のブックマーク (2件)

  • レスポンシブなサイトをつくりたい!実装方法はじめの一歩 フラップイズム

    どうも、くーへいです。 ここ数年は、「レスポンシブデザイン」のウェブサイトが流行していますよね。 ある意味、作りこまれたウェブサイトの代名詞にもなっているように感じます。 今回は「レスポンシブデザイン」の実装について、フロントエンドエンジニア目線で記事にしてみます。 今さら「はじめの一歩」?と思われるかもしれませんが、「セオリー」が固まりつつある今だからこそ、確認する必要があると思います。 そもそも「レスポンシブデザイン」とは? 「レスポンシブデザイン」が流行する前は、スマホ用のウェブサイトはディレクトリを変えて、別サイトとして構築することが多かったと思います。 「レスポンシブデザイン」では、サイトは同じなのですが、デバイスやブラウザサイズによって適用するCSSを変更することにより、PC向け、タブレット向け、スマホ向けのデザインを適用することができるウェブサイトを指します。 つまり、同一の

    レスポンシブなサイトをつくりたい!実装方法はじめの一歩 フラップイズム
  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

    どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、記事は「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日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム