サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
uGUIには自動レイアウトなシステムが積まれています。ただ、このシステム便利ではあるんですが色々と複雑なので、少し補足です。UIの大きさを動的にフィットさせる、オートレイアウトUIの大きさはLayoutElementで決まる Minは最低限サイズ、Preferredは変化するサイズ、Flexibleは余りを割合で レイアウトプロパティの確認はInspectorビューでUIを並べるだけでなくサイズも変更するLayoutGroup LayoutGroupは子のLayoutを親に伝える Control Child Sizeは子のLayoutを元に子のRectTransformを変更する Control Child SizeがFalseの場合、RectTransformのサイズをLayoutに使う Control Child Sizeによるリサイズは親より大きくならない Child Forc
こんにちは、共同開発部 iOS アプリ開発担当の図子です。 iOS 開発をしている皆さんはどういったタイミングで View のレイアウトをおこなっていますか？私は1年くらい前までは ViewController の viewWillAppar 等のメソッド内や、ViewController から View へ情報をセットするタイミングで ViewController 側から直接 View の frame やその View が持つUILabel の frame を触っていたりしていました。これだと、想定外のタイミングでレイアウトが崩れたり、ViewController 側のコード量がふくれあがってしまいがちであまり良くないと思います。また、autoresizingMask を使うと楽ですが少し込み入ったレイアウトが必要になってくると autoresizingMask では対応できなくなって
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
Get 20+ {{creative-cloud}} apps for less than the price of 3 apps. The All Apps plan includes 20+ apps and services plus 20,000 fonts, storage,templates, and tutorials for less than the price of {{acrobat}}, {{photoshop}}, and {{premiere-pro}} sold separately. https://main--cc--adobecom.hlx.page/cc-shared/fragments/merch/products/catalog/marquee/includes {{free-trial}} {{buy-now}}
Note: The proposed syntax forCSS Regions andCSS Exclusions has changed since this article was written, though the concepts remain the same. Please check theCSS Regions W3C Working Draft and theCSS Exclusions andShapes W3C Working Draft for up-to-date details. The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However,
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。CSS：シンプル版 <!DOCTYPEhtml> <style>html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Downloadgithubzip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
Adobe Systemsは米国時間3月8日、雑誌のようなレイアウトのウェブページをより簡単に作成できるという新しい標準「CSS Regions」（PDF）をWorld Wide Web Consortium（W3C）に提案した。Adobeはこの技術を、シリコンバレーで開催のCSS Working Groupのミーティングでも説明している。 雑誌風のレイアウトはAdobeの「InDesign」ソフトウェアの中心的な部分だ。各種ウェブ標準の機能が改善されれば、AdobeはInDesignユーザーに対し、ウェブ向けのデザインを作成する機能を容易に提供できるようになる。 Adobeがその方向に進んでいることを示すものがいくつかある。同社は今週、「Flash」コンテンツをCSS、JavaScript、HTMLを用いたウェブコンテンツに変換するツール「Wallaby」を発表している。また、先週リリー
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード：CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
MDCの記事用にGeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込むRubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各
MTのカスタムフィールド(複数行)の改行をサイトに反映させる デフォルトのカスタムフィールドタグでは、複数行のカスタムフィールドで入力した改行がサイトに反映されません。 サイトに改行を反映させる為にはnl2brモディファイアを利用します。 例えばMTprというカスタムフィールドタグで改行を反映さえたい場合、 <MTpr nl2br="xhtml"> という具合にnl2brモディファイアにxhtmlと指定することで改行をbr要素に変換して出力してくれます。 【お知らせ】 4/26に大阪で無料のMovable Typeセミナーを行います。 関連エントリー MTでopモディファイアを利用して複雑なレイアウトを行う Movable TypeでSEO対策-Feed編- MTカスタムフィールド画像を見えるようにする（推奨） Movable Typeの再構築 高速化いろいろ エントリーテンプレートでのM
by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article oncreatingCSS layouts usingtechniques like negative margins, any order columns and in some case opposite floats. The maingoal of the article was getting the maximum number of layouts based on the same markup, each with validCSS andHTML, without hacks nor workaround and agood cross-browser compatibility.
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
