[B! IE10] ddt2000のブックマーク

Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！まずは結論から — flexアイテムの幅の計算方法結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。下図のようにflex-grow（またはf

ddt2000 2016/08/30

Flexbox
IE10

リンク

CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、王です。デザイナーやってます。今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！デモ昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

ddt2000 2013/05/01

リンク

modern.IE でIEの検証環境をさくっとつくる - Webtech Walker

modern.IEというIEの検証のために色々できるサイトができて、ここでIEのVMのイメージを落とすことができる。Virtual Box、VMWare Fusion、Parallelsとメジャーなものは全部対応してる。すごい。とりあえずMacのVirtual BoxにIE10 Win8をいれてみた。まず以下からからMacとVirtual Boxを選んで「IE10 - Win8」の.sfxとかの.rarのファイルを全部ダウンロードする。 http://www.modern.ie/ja/virtualization-tools 「.sfx」というのがよくわからんかったけどなんか圧縮形式らしくて実行権限つけて実行すれば解凍されるらしい。 $ chmod +x IE10.Win8.For.MacVirtualBox.part1.sfx $ ./IE10.Win8.For.MacVirtualB

ddt2000 2013/04/11

ie10
mac

リンク

Webkit に最適化されたサイトを IE10 に適応させるためのガイド

スラッシュドットで「Microsoft、「WebKitはWeb標準を破壊している」と主張」なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。 Microsoft、「WebKitはWeb標準を破壊している」と主張：スラッシュドット・ジャパンちなみに翻訳元の記事は「Windows Phone Developer Blog」で書かれた内容なので、「Windows Phone 8 で動作する IE10」っていう書き方になっている部分や、すべて Webkit と対比して書かれているなど、モバイル

ddt2000 2012/11/21

IE10
html5

リンク

IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER

ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewportはW3Cにより策定段階にある。IE10ではメトロ？スタイル用のネイティブアプリを作成するためのアプローチとして独自のviewport指定をできるようになっている。Windows 8のデバイス向けにレスポンシブデザインを施すには、下記のように指定する。 @-ms-viewport{width: device-width;} コンテンツの幅をデバイスにフィットさせたくない場合は下記のように指定す