LayoutでInterface Builderを使わないレイアウト
はじめまして。 TELLERでiOS/Androidのアプリの開発をしている@kazutoyoです。 今回はSwiftで書かれているUIのレイアウトをAndroidのレイアウトシステムのように行うライブラリ、『Layout』について紹介します。 なぜLayoutなのか現在iOSのUIの実装は主にInterface Builderで行われているかと思います。 Interface Builderで直感的にUIを配置でき、簡単にUIを構築できるツールだと思います。 ただ、私がこれまでInterface Builderで開発する上で次のような問題がありました。 複数人で開発していて、XIB/Storyboardファイルがコンフリクトすると修正がかなり難しいAutoLayoutの設定など複雑になってきた似たようなViewをつくるときにコピペしづらい特にStoryBoardのコンフリクトは複数人で開発
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、昔はfloatプロパティを使うのが主流でした。しかし、CSSの「Flexboxフレックスボックス」を使うとfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サン
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
CSSにおける国際的レイアウト
この文書は、W3Cにより作成されW3Cワーキングドラフトとして公開されている "International Layout in CSS" (http://www.w3.org/TR/1999/WD-i18n-format-19990127/) を、どら猫本舗が翻訳したものです。 この文書の原文はワーキングドラフトです。将来の改訂が予定されていることにご注意ください。最新版の仕様書は http://www.w3.org/TR/WD-i18n-format/ にあります。 正式な仕様書はW3Cサイトにある英語版です。この日本語版は参考にすぎません。 この文書には翻訳上の誤りがあるかもしれません。どら猫本舗は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 お気付きの点がありましたらどら猫本舗までお知らせください。 WD-i18n-format-19990127 CSSにおける
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
purplish-layout – a RubyMotion wrapper for Auto Layout on iOS and OS X
GitHub - motion-kit/motion-kit: The RubyMotion layout and styling gem. Follow @MotionKit on twitter for updates and commit notifications
iOS6 Auto Layout
GitHub - arnaudleray/pocketgrid: PocketGrid is a lightweight pure CSS grid system for Responsive Web Design. Moreover, it is semantic, mobile-first, and allows to have an unlimited number of columns and breakpoints.
多機能レイアウトライブラリ
CSS Layouts: Grid and CSS Layouts