モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開 モバイルアプリケーションの開発でもっとも手間がかかるのが、ユーザーインターフェイスの構築です。例えばHTML5でモバイルアプリケーションを開発する場合、適切なUIコンポーネントを美しい外観と美しいレイアウトで実現するために、HTMLとCSSを駆使し、何度も試行錯誤しつつ開発を進めていくことになるでしょう。 そうした手間を軽減できるサービスが公開されました。アシアルの「Onsen CSS Components」です。あらかじめ一般的なモバイルアプリケーションのUIパターンやUIコンポーネントが用意されており、HTMLとCSSのソースコードをダウンロードできるようになっています。 上記は一般的なUIのさまざまなパターンが用意された画面で、このパターンに対

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr

CSSでの左寄せ・中央寄せ・右寄せ表示方法 日本語や英語など「文字を左から右へ向かって記述する言語」で書かれたHTMLでは、文字寄せ方向が指定されていないなら、文章は左寄せで表示されます。しかし、タイトルや見出しなどを中央寄せ(センタリング)して掲載したい場合はよくありますし、日付や注釈などを右寄せにして掲載したい場合もよくあるでしょう。 ウェブページに掲載した文章や画像の文字寄せ方向を指定して、左寄せ・中央寄せ・右寄せで表示する方法は簡単です。CSSのtext-alignプロパティを使って、寄せたい方向を指定するだけですから。しかし、単に1行の文章を左寄せや右寄せで表示するのではなく、同じ行内に「左寄せの文章」と「右寄せの文章」を同時に書きたい場合もあるでしょう。例えば下図のようにです。 そこで今回は、HTMLで記述した文章にCSSを適用して、特定の範囲を左寄せ・中央寄せ・右寄せの3通り

なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。 この「Grids CSS」、ブラウザ対応がしっかりしていたり、ファイルサイズが軽量だったり、テンプレートが豊富だったりといいことづくめですが、いざ使うとなるとそれなりに説明を読み込んで（簡単だけど）手作業でレイアウトをつくっていく必要があります。 そこでその作業を簡単にできるようにWYSIWYGでジェネレーターを作った方がいます。こいつは便利です。 » YUI: CSS Grid Builder ↑ コントロールパネルはこんな感じ。 プレビューを見ながらカラムの数や横幅を指定していくと簡単にレイアウトができちゃいます。もちろんコードも瞬時に生成してくれます。 なお、これを使うには当然ですがYUIが必要になります。ダウンロード

そういえば思い出した…。 某雑誌にお役立ちツールが紹介されていたことを！ Bookmarkletなるものを導入すればCSSがどんなに細かくても長くても読みづらくても(くどい)たっちょんぱ(死語)でCLASSをブラウザで確認できるのだったわ。 このブログの7/11の記事(スクリーンショット)で例示します。 上の画像のような感じでCLASS指定された部分が赤枠でCLASS名は赤字で表示されます。便利ですよね。 ※実物大のBookmarklet使用画面スクリーンショットはこちらです。 このBookmarkletはJavaScript::Bookmarkletで紹介されています。 そもそもBookmarkletとは(サイトからの転記ですが)、 JavaScriptで記述された小さな（1行から2行ぐらいの）プログラムで、ブラウザのブックマーク（お気に入り）から利用することができるもの、だそうです。

別件で探し物をしていたのですが耳よりのツールを見かけましたのでご紹介。 このツールを使うにはブラウザ「Firefox」使用となります。 その上で拡張ツール「Web Developer」をgetし、利用可能となります。 慣れたブラウザ以外のものを使うのはめんどう～と思われるかもしれません。 しかしその面倒を乗り越えると素敵な世界が…（*＾д＾*） まずは使用画面のスクリーンショット(縮小)を。 Firefoxでこの「めざせマイスキン」を開き、「Web Developer」のツールバーから「CSS」→「Edit CSS」を選択すると左サイドにCSS編集画面が出現します。 ここではエキブロのCSS編集画面ではおめにかかれない「.CAL_SUN」(エキブロ側で指定されています)なんてクラスも確認できます。 そしてこのツールのすごいところは… 例えばこのサイトの左側カレンダータイトル大きさは８ポイン

以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲　レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ