CSS Grid・Flexboxの 最近の進化とミライDIST.38 「CSSな夜」で発表した内容です。 https://dist.connpass.com/event/266728/ Twitter https://twitter.com/tonkotsuboy_com
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
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日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <
Adobe AIRでクールなMP3プレーヤーを作ってみる
Adobe AIRとは 「Adobe AIR」とは、リッチクライアントとして定評のある「Flex」や「Flash」「ActionScript」といったWeb技術を利用してデスクトップアプリケーションを作成し、動かせる実行環境のことです。Adobe社が提供しています。 ブラウザを使用する必要がないため、ローカルファイルへのアクセスやドラッグ＆ドロップを行うこともでき、WindowsやMac OS、Linuxで動作するなど、プラットフォームを問わない特長もあります。 今回はこのAdobe AIRを利用して、MP3プレーヤーを製作してみましょう。 対象読者 Flash、Flexでの開発経験のある人。 基本的なActionScript3.0の知識のある人。 プラットフォームを問わないアプリケーションを開発したい人。 実行環境/開発環境の準備 それではまず、Adobe AIRの実行環境をインストール
Adobe AIR 1.5 * Flex SDK を使用した最初の AIR アプリケーションの作成
Adobe® AIR® の機能を簡潔かつ実践的に説明するため、以下の手順に従って Flex SDK を使用し、SWF ベースの単純な AIR アプリケーション「Hello World」を作成します。SDK と共に提供されているコマンドラインツールを使用した AIR アプリケーションのコンパイル、テストおよびパッケージ化の方法を学習します。 作業を開始するには、ランタイムをインストールし、Adobe® Flex™ 3 を設定しておく必要があります。このチュートリアルでは、AMXMLC コンパイラ、AIR Debug Launcher（ADL）および AIR Developer Tool（ADT）を使用します。これらのプログラムは、Flex 3 SDK の bin ディレクトリにあります（Flex 3 SDK の設定を参照してください）。 この節では、次の構造を持つ XML ファイルであるアプ
AIR SDKとFlex SDKではじめてのAIRアプリケーションを作る » Churadesign
はじめに OSXとテキストエディタを使ってはじめてのAIRアプリケーションを作成してみましょう。AirとはFlashやAjaxなどweb技術を用いてデスクトップ用のアプリケーションを作成するためのフレームワークです。 Airの特徴として、ブラウザ上で動作しているアプリケーションで実現するには難しい、デスクトップからファイルをDrag&Dropしたり、ローカルファイルシステムへのアクセスなどOSの機能を利用することもできます。 またAirで作成されたアプリケーションはWindows、OSX、Linuxで動作するためより幅広いクライアント環境で動作させることができます。 Airを作成するためのSDKはadobeが無料で公開しており、Flashアプリケーションを作成するためのFlexもオープンソース化されたことにより無料で開発環境が用意できます。 さらにFlexBuilderという有料のIDEも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
