レスポンシブで大活躍のflexboxを使い倒す(前編) - Hatsuka
flexboxプロパティってとても便利ですよね。 便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。 いい加減覚えよう！といういましめエントリーです。 フレックスレイアウト 今までレイアウトには ブロックレイアウト インラインレイアウト テーブルレイアウト 配置レイアウト がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。 近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。 どういうときに使うの？ 要素を左右上下と整列させたいとき 横並び要素の高さをそろえたいとき 要素を好きな順序に並び替えたいとき などなど、用途は様々です。 例えばこういう配置で高さを揃えたいときとか… sectionの後はh1を置きたいけど、上に画像がいるなーというときとか… See the Pen doejQa
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 こんにちは、WEBマーケティング部の杉尾です。 今回と次回で、『2015年4月現在、Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』を紹介します。 今回はFlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応実践編の第一回です。 各プロパティの書き方 はじめに ※Flexboxは過去に二度大きな仕様変更がありました。 それぞれを古い順に、『box仕様』、『flexbox仕様』、『flex仕様』（現行）と呼称します。 ※IE10はベンダープレフィックス（-ms-）付きで『flexbox仕様』に対応している唯一のブラウザです。 ※iOS 6.1以前
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】
【参考ソース】 .foo { display:-webkit-box;/*--- Androidブラウザ用 ---*/ display:-ms-flexbox;/*--- IE10 ---*/ display: -webkit-flex;/*--- safari（PC）用 ---*/ display:flex; -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/ -ms-flex-pack:justify;/*--- IE10 ---*/ -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/ justify-content:space-between; } 【解説】 ２～５行目 Flexboxを作るための指定です。 ６～９行目 左からflexアイテムを並べて余白があれば、そ
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
ActionScript 3.0 の 条件付きコンパイル
ActionScript 3.0 でデバッグ時と、リリース時のコードを分けるには、if 文などを使用して分岐しても良いが、swfにデバッグコードが含まれてしまうため、条件付きコンパイルを使用すると良い。 この方法を使用すると、同名のプロパティやメソッドなどを環境により変更する事ができる。 Flashでの定数定義 「プロファイル」-「スクリプト - 設定」-「定数の構成タブ」で定数を追加する Flexでの定数定義 mxmlcのコンパイラオプションで指定 mxmlc -define+=CONFIG::DEBUG,true -define+=CONFIG::RELEASE,false .. flex-config.xmlで指定 <compiler> <define> <name>CONFIG::DEBUG</name> <value>true</value> </define> <define>
Flash BuilderでiOSアプリを作る【第4回】『証明書ファイルの作成（Windows編）』 | DevelopersIO
前回は、Macを使ったiOSアプリ開発に必要な証明書ファイルの作成方法を紹介しました。 今回はWindowsを使ってやってみましょう。 開発用証明書の作成（Windows編） ＜今回作成するもの＞ 証明書署名要求ファイル（*.csr） CER形式証明書ファイル（*.cer） P12形式証明書ファイル（*.p12） MacではOS付属の「キーチェーンアクセス」を使って証明書署名要求ファイル（CSRファイル）を作成しましたが、 Windowsにはその手のソフトが付属していないので、「OpenSSL」というソフトをダウンロードして利用します。 ＜用意するもの＞ ネットへの接続環境 お手持ちのWindows OpenSSLのダウンロードとインストール OpenSSLは公式サイトにてソースコードが公開されています。 こちらを利用するにはソースコードを自前でコンパイルする必要がありますが、 既に有志の
Flash Builder 4とプラグインで爆速コーディングをしよう！ | ClockMaker Blog
先日紹介したFlash Builder 4ですが、皆さんはもう試されましたでしょうか？ アップグレードしたばかりで、どのような使用感なのか気になるところですよね。今回はFlash Builder 4の紹介に加えて、さらにコード補完を劇的に強化するプラグインの紹介です。 Flash Builder 4は様々な機能が豊富でとても強力なツールなのですが、他コードエディターの進化に比べると若干コード補完のみが物足りない印象があります。AdobeエヴァンジェリストであるLee氏のブログThe Flash Blogで知ったのですが、SourceMateというプラグインがとても優秀でコード支援機能を強化してくれます。 Flash Builder 4でActionScript 3.0をコーディングする様子をビデオにまとめたので、まずはご覧くださいませ。90秒のムービーで、Flash Builder 4とS
Hero - 次期 Flex SDK （マルチスクリーン対応） のご紹介 - akihiro kamijo
Flex SDK 4 が公開されて 3 ヶ月ほど経ちましたが、次のリリースに関する情報が公開されました。コードネームは何を思ったか Hero です。（Adobe Open Source - Hero） 今年の後半にプレビュー版の公開、来年中に正式に出荷、が予定されています。 Hero は、大きく 3 （+1） つのテーマを元に開発されるようです。 マルチスクリーン開発： Web、デスクトップ、そしてモバイルデバイス向けアプリケーションを同じフレームワークから構築 Spark の熟成： Spark コンポーネントや機能の追加による Spark アーキテクチャーの拡張 大規模開発への対応： Flex の基本構造の改良による大規模アプリケーション開発のサポート 新しい Flash Player と AIR の機能を最大限に活用 Hero は、まだ公開されていない最新の実行環境 （おそらくこれとか
ワークフローを変えるFlex 4とFlash Catalystの基礎知識（1/2）- ＠IT
ティルフィン合同会社 高橋 俊光 2010/5/31 Adobe CS5の新しい中核を担うFlex 4のフレームワーク。ワークフローを初めRIA開発現場がどう変わるかを、Flash Builder 4やFlash Catalyst、Adobe AIR 2などの技術・ツール・フレームワークなどの機能を紹介しながら解説する連載（編集部） CS5の新しい中核を担うFlex 4のフレームワーク Flashをリッチクライアント/RIA（リッチ・インターネット・アプリケーション）の有力なプラットフォームへと押し上げた開発フレームワーク「Flex」は、とうとう先日バージョン4がリリースされました。Eclipseベースの統合開発環境のFlash Builder（旧、Flex Builder）も同様にバージョン4へと進化を遂げました。 さらに大きいのは「Flash Catalyst」というインタラクションデ
Flash制作に欠かせない3つのツール・まとめ編 | _level0 - KAYAC Front Engineer Blog
唐突に始まったこのお題シリーズ。 「他のFlasherさんが自身の愛用制作ツールを紹介してくれたらうれしいなぁ。」とtwitterでもつぶやいてたんですが、1日と経たないうちにみなさんのっかってくれて、その反響に驚いてます。 さきほど確認しただけでも、今の時点ですでに30人の方がお題に対して答えてくださっているので、単純計算でも90ツール。（もちろん重複はありますがｗ） それでは、順不同でお送りします。敬称略でスミマセン。 お題に答えてくれた方 ■ Flash制作に欠かせない3つのツール・flair4jp編 ・通信監視ツール（Firebug、inetSpyなど） ・Celeron マシン（Flashチューニング開発用） ・毒舌（突っ込まれたくないところを突っ込んでくれる人） ■ Flash制作に欠かせない3つのツール・ll_koba_ll編 ・Charles（弊社satoも紹介していたロー
Flash のシンボルを Flex コンポーネントに | _level0 - KAYAC Front Engineer Blog
海賊王をめざす男 マツです。こんにちは。 Flex には Flash との連携をサポートするクラスがあります。 ・UIMovieClip ・ContainerMovieClip Flash で基本となる部品を作り、Adobe が無料で提供する機能拡張を使って Flex のコンポーネントに変換して使用します。 Flex Component Kit for Flash CS3 Professional http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins 使用例 1. Flex Component Kit for Flash CS3 Professional をインストールします。 2. fla ファイルの動的アセット用のシンボルを作成します。 Test.fla に Circle, Square を用意します。 シンボル
あもなずん小屋 : Flex3 SDKでコンパイルした swc を Flash CS3で使う
Flex3 SDKでコンパイルした swc を Flash CS3で使う よくわかってないのに、トライアンドエラーでなんとなく成功しちゃったので以下の内容には間違いを含む可能性が非常に高いです。 間違いというか「無駄」はかなり多いと思いますので、「ここは不要だよ～」とかぜひ教えてください。 さて、まず参考文献。 http://timwalling.com/2007/10/22/compiling-flash-cs3-compatible-swcs-with-flex/ http://labs.qi-ideas.com/2007/12/25/using-flex-compiled-code-within-flash http://kozy.heteml.jp/pukiwiki/index.php?ActionScript3.0%20swc%BA%EE%C0%AE%A2%AAFlashCS3%
馬鹿全 - Flex と FlashCS3 で SWF を作るときの 18 のポイント＋α
以前も書いたことですが、色々増えてきたのでまとめてみた。 Flex と Flash CS3 でハイブリッドな SWF を作る場合、 大抵は Flex で土台を作り、グラフィック部分などを Flash で作るということになるだろう。 その際に俺が実際引っかかったりした部分をまとめた。 なので Flash しか関係ないじゃんとか Flex しか関係ないじゃんと思わずに Flash しか関係ないじゃん？って所は それを制御する側がいるということを考えて Flex しか関係ないじゃん？って所は それに制御される側がいるということを考えて 読んで欲しい。 Flex と Flash CS3 では コンパイラが違う。 Flex で出来ることは Flash でも同じように実装できるわけではない。 逆もまた然り。 また、エラーの出力なども違う。 Flash CS3 では出るエラーも F
Flex BuilderのプロジェクトをSubversionで管理する方法 - Do you read me?
すでにSubversionで管理されているディレクトリ「~/Sites/hogehoge」に、新たに「~/Sites/hogehoge/flex/」というディレクトリを作り、そこにFlex Builderで作ったプロジェクトを置いて、それをSubversionで管理する方法。 そもそもなぜこんなことを考えなければならないかと言うと、Flex Builderのプロジェクトには、Flex Builderがプロジェクトを管理するために作るファイルがあって、そのファイルのパーミッションがFlex Builderのものになっているため、素直にコミットしようとするとエラーになる。 そこで、Subversionのpropertyのsvn:ignoreを使って、このファイルは管理しませんよ、というのを予め宣言しておかなければならない。 まず、適当なテキストエディタで除外リストを作り「~/ignore.tx
scale nine : skins and themes for flex and adobe air
Give your Flex or AIR application a new look. ScaleNine provides skins and themes for Flex and AIR created by the community using the Adobe Creative Suite of tools and Flash Catalyst. Check out the Gallery to see the latest submissions or gain a little inspiration from the Showcase area of great looking applications. Browse the Gallery
JavaとFlex／AIRをつなぐ「炎」のオープンソース（1/3） ─ ＠IT
JavaとFlex／AIRをつなぐ「炎」のオープンソース Tomcatを使ったサーバPushもできるBlazeDSとは？ クラスメソッド株式会社 友田 翼 2007/12/27 2007年12月13日に米国アドビシステムズ社（以下、アドビ社）から「BlazeDS」というオープンソースプロジェクトが公開され、現在Adobe LabsからBlazeDSのパブリックベータ版がダウンロード可能になっています（参照「アドビ、「BlazeDS」はAjax＋JSONの4倍速い～リモーティング、メッセージングのOSS～」）。ちなみに、Blazeは英語で「炎」の意味ですね。 本稿では、オープンソースになったBlazeDSについて、付属されているサンプルアプリケーションを見ながら、いったいどんなものであるのかを紹介していきたいと思います。 「炎のデータ・サービス」？ BlazeDSとは何なのか？ BlazeD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://daybyday.teamminded.com/articles/software-development/flex3-mxmlc-%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3.html
CodeZine（コードジン）
Flex 3 Style Explorer