[B! css] ytumagarのブックマーク

モバイルアプリ用UIコンポーネントのHTML/CSSソースコードを生成してくれる「Onsen CSS Components」、アシアルが公開

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

ytumagar 2014/05/02

css
mobile

リンク

【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

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

ytumagar 2014/05/02

css

リンク

CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可 [ホームページ作成] All About

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

ytumagar 2013/05/25

css

リンク

[CSS]スクリプトなしで、画像の一部だけを拡大するスタイルシート

Image magnifier デモこの画像の一部だけを拡大するスタイルシートは改良が重ねられたもので、よりシンプルで、より滑らかな動作を実現しています。実装には画像が二枚必要で、デモでは左側のサムネイルと右側にその三倍のサイズの画像が使用されています。

ytumagar 2010/02/01

リンク

Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker

ytumagar 2008/04/18

css

リンク

WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』 | p o p * p o p

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

ytumagar 2006/12/15

css

リンク

LITBoxの使い方サンプル

シンプルなサンプル † 単に別ページの内容を読み込んでBOX内に表示しているだけです。 LITBoxサンプル１ (LITBoxの基本サンプル) LITBoxの生成部分 new LITBox('http://staff.ark-web.jp/~takemura/public/js/litbox/sample1.html', {type:'window',overlay:true}); 明示的に改行しますが、実際は改行させません第1引数、別ページの内容を読み込んでくるURL 第2引数、Option値 (次でやります) ↑ OptionによるBOXの制御 † 上の例では、読み込んだBOXの下がやけに長いのが気になりますね。 LITBoxはOptionでBOXの大きさの制御が可能です。 LITBoxサンプル２ (Optionを指定する) LITBoxの生成部分 new LITBox('http:

ytumagar 2006/12/12

ポップアップウィンドウ

ajax
css

リンク

フリーで使える超クールアイコン集「The Last Order Icons」:phpspot開発日誌

The Last Order Icons フリーで使える超クールアイコン集﹁The Last Order Icons﹂。次のようなかなりクールなアイコンが商用以外であればフリーで使える模様です。かなりいい感じですね。イラストレータとかで書いてるっぽいですね。関連エントリフリーのアイコン配布サイトいろいろフリーのWeb2.0風の16x16アイコンを配布しているサイト集

ytumagar 2006/12/11

css

リンク

PHPやJavaのJSPやRubyのeRBのクールじゃないところ - 矢野勉のはてな日記

Java, PHP, Ruby, Wicket この話題はPHP限定でもないので上の記事とは切り離しました。PHPのいいところを褒めてるところに書くと、褒めたい意図が壊れてしまうので。 symfonyの10分デモを見てて考えたことがきっかけではあるんだけど、実はRubyonRailsの勉強で本を読んでた時にも思ったこと。彼らはHTMLファイルにコードを書くことをなんとも思ってないんだね。もちろん、プログラマからすればその方が早いのかもしれないけどね、私には﹁HTMLはプログラマのものなの？﹂という思いがあります。 PHP︵RubyonRailsもeRB使ってる関係でそういう気があるんだけど︶はなんでもかんでもHTMLページに書いちゃう傾向があるのだけども、仕事でデザイナの主張を聞くこともある身としては、HTMLにコードを書くことはちょっとこれからのウェブ開発フレームワークとしては受

ytumagar 2006/11/19

リンク

グラフ描画機能が追加されたJavaScriptライブラリ「Dojo 0.4」:phpspot開発日誌

dojo, the Javascript Toolkit: brought to you by the Dojo Foundation グラフ描画機能が機能追加されたJavaScriptライブラリ﹁Dojo 0.4﹂。次のようなグラフがJavaScriptで描画することが可能です。曲線も美しいですね。一見Flashを使っているようにも見えます。グラフ描画するためには、dojo.jsを読み込んで、次のようなコードを書きます。 dojo.require("dojo.collections.Store"); dojo.require("dojo.charting.Chart"); dojo.require('dojo.json'); // our sample data for our line chart. var json = [ { x: 0, y: 110, size:20, x2:

ytumagar 2006/11/11

リンク

Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめ:phpspot開発日誌

Smashing Magazine Blog Archive Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby… Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめが紹介されてます。チートシートって印刷して貼っておくとほんとに便利でお世話になってます。 Ajax関連 What’s Ajax? Cheat Sheet - PDF Prototype Dissected - Cheat Sheet PNG scriptaculous Combination Effects - Cheat Sheet - PDF Apache関連 Apache Cheat Sheet Apache 1.3 Quick Reference Card - free quick reference cards - PDF htacc

ytumagar 2006/11/06

cheat sheet

リンク

CLASS指定をブラウザで簡単に確認する方法 | めざせマイスキン

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

ytumagar 2006/10/27

css

リンク

ブックマークレット一覧

ブックマークレットとは？ブックマークレットとは、WebブラウザにJavaScriptを登録することで、さまざまな動作をさせるものです。ブラウザの﹁アドレス欄(URLを入力するところ)﹂にJavaScriptを入力すると実行することができます。試しに以下のスクリプトをコピーしてアドレス欄に貼り付けてみてください。 javascript:alert(1+2); ブックマークダウンロード bkm.lzh 解凍後、MyDocumentの﹁Favorites(お気に入り)﹂フォルダへコピーしてください。お気に入りに追加されます。︻お気に入り︼への追加方法ブックマークレットを実行するリンクを右クリックして﹁お気に入りに追加﹂を選んでください。︻お気に入り︼からの実行方法︻お気に入り︼から実行したいブックマークレットを選んでください。目次作成ソース javascript:(f

ytumagar 2006/10/26

contentEditableでブラウザのHTML画面を直接編集可能にする。変更もすぐ反映

リンク

CSSを変更しながらブラウザで確認できるツール | めざせマイスキン

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

ytumagar 2006/10/26

css
firefox

リンク

Passion For The Future: すべてのタグに枠づけ、色づけしてCSSデザインを支援するSTYLE Diver

« このブログ専用の携帯リーダー　「情報考学アプリ登場」By feedAPPLI | Main | マウス周辺を拡大表示するSimaLoupe » 書評：脳・こころ｜書評：企画・発想｜書評：文化・文明｜書評：経済・経営｜書評：子供・教育｜書評：小説・戯曲｜書評：ネット活用｜書評：仕事・管理｜書評：メディア論｜書評：その他｜書評：思想・哲学｜書評：文章・表現｜書評：認知・心理｜書評：神話・宗教｜書評：科学・技術｜書評：社会・世間｜書評：教養・雑学 2006年度　年間オススメ書籍ランキング　ノンフィクション部門 2006年度　年間オススメ書籍ランキング　フィクション編 2005年度　書籍売り上げランキング　ベスト20 2005年度　年間オススメ書籍ランキング　ベスト20冊 2004年度　人気記事ベスト10 アクセス数が多かった記事とは？ 2004年度　人気書

ytumagar 2006/10/22

リンク

ブラウザ上で自由にデザインできるページ作成ツール『Noovo Communications』:phpspot開発日誌

Noovo Communications ブラウザ上で自由にデザインできるページ作成ツール﹃Noovo Communications﹄。次のようなインタフェースで、自由にページのデザインを変更し、保存できます。ページ上の画像なんかも自由にリサイズ・回転なんかが出来てしまいます。背景画像を変えるのもワンクリックです。昔からこんなツールが出来ないかなと思っていましたが、﹁Google Page Creator﹂なんかもありますし、今後も色々出てきそうな予感がします。ブログでホームページを作るのは簡単になりましたが、デザインするのもこういった形でどんどん簡単になっていくんでしょうね。

ytumagar 2006/09/15

リンク

美しいレイアウトを計算してくれるツール :: Love & Design ::

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

ytumagar 2006/09/01

自動計算

css

リンク

WEB開発者のためのリソースを集めたリンク集:phpspot開発日誌

The Web Developer's List of Resources WEB開発者のためのリソースを集めたリンク集。 Ajax、Firefoxプラグイン、Ruby、Flash、JavaScript、SQL、フォント、HTML色関連サイト、PHP、イメージ編集、ロイヤリティフリーの画像などにリンクしてます。ちゃんと有名どころをおさえていて結構便利です。 WEB開発者の方はこういうページを独自に作ってスタートページに設定しておくと快適かもしれませんね。関連エントリクールデザインサイトを一括チェック！﹃Most Inspired﹄便利なAjaxリソースへのリンク集

ytumagar 2006/08/28