iOS 7 で使えるフォント名一覧 - その後のその後
『iOS 7 の隠しフォント， ヒラギノ角ゴ W1/W2 を CSS で指定する』という記事を読んで、「あれ、これってPrivate APIにあたるんじゃない？」と思いフォント名一覧を出力してみたので、そのついでにその一覧をここに掲載しておきます。 （追記2013/10/17その１） iOS7で追加されたフォント、iOS6で追加されたフォントがわかるよう色分けしました。 （追記2013/10/17その２） iOS7の新機能のサンプルコード集、『iOS7 Sampler』 で新フォントを確認できるようにしました。 サンプルコードを提供されてもビルドできない！というデザイナーやディレクターの方は、ぜひお近くの開発者に実機インストールしてもらってみてください。 （追記ここまで） 何に使うのか？ self.hogeLabel.font = [UIFont fontWithName:@"Helvet
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
Firefox Developer Tools | MDN
Overview A Glossary of Common Terms A Quick Guide to Mozilla Applications Getting Started Getting Set Up To Work On The Firefox Codebase Working On Firefox Working on Firefox Bug Handling Firefox User Guide Firefox DevTools User Docs The Core Tools Page Inspector Web Console JavaScript Debugger Network Monitor Performance Panel Responsive Design Mode Accessibility inspector Application panel More
横幅の可変にも対応したPinterest風デザインライブラリ·Freetile.js MOONGIFT
Freetile.jsはカラム幅も可変なPinterest風デザインを実現するライブラリです。 2012年前半の話題を一気にかっさらっていったPinterestはその奇抜なデザインもあり、色々な類似デザインを実現するライブラリを登場させるに至っています。Freetile.jsもその一つですが、高さだけでなく幅も自由に設定できるのが特徴になります。 サンプルです。かなり複雑なデザインでもこなします。 実例です。斬新なデザインがきちっと決まります。 フィルタリングしました。並び変わる時のアニメーションが格好いいです。 要素がない部分もできてしまうのは致し方ありません。 Freetile.jsを使うとかなり自由度の高いデザインが実現できます。とは言え表示はFreetile.jsに任せきりなので、思った通りのデザインになるとは限りません。なおフィルタリング機能があり、絞り込む時にはアニメーションが
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日（日本時間24日深夜）、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
Webチェックツールの紹介：松延拓生（和歌山大学システム工学部）
開発したツールの紹介 アイトラッキングを利用したウェブユーザビリティ評価ツール 詳細は別ページ（アイトラッキングを利用したWebユーザビリティに関する研究）にて紹介するが，視線位置のコンテンツを特定して，ユーザビリティ評価を支援するツール．ヒートマップによる分析ではなく，コンテンツ単位で注視状況を定量解析できるのが特徴．インタビューを支援する機能もある． アイトラッキングを利用した意思決定過程解析ツール 眼球運動を分析することでウェブ利用中のユーザの興味の推移を分析することができるツール．UX（ユーザエクスペリエンス）を踏まえたデザインを行う．ウェブコンテンツ単位で注視状況や興味の変化を解析できるため，ウェブアプリケーション，ウェブサービスの情報構造，UIを検討可能． 既存のツールの紹介 Webサイトを作成する上で有効な様々なツールが公開されている．ここではWeb上で入手・実行可能かつ無償
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
スパークラインに対応したJavaScript製のグラフライブラリ·Grafico MOONGIFT
GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。 Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。 サンプルです。まず棒グラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 こんな複雑な感じにも。 棒グラフ。 積み上げの棒グラフ。 横棒グラフ。 スパークライン。 棒型のスパークライン。 エリア型のスパークライン。 GraficoはPrototype.jsを使ってSVGでグラフを描いています。対応ブラウザはIE6以上、Firefox3以上、Google Chrome、Safari、Operaとなっています。単純に表示する他、マウスを載せた際に説明を出す機能もあります。 GraficoはJavaScr
iOS向け最適化サイトを作る際に便利なJavaScriptライブラリ·iOS.js MOONGIFT
iOS.jsはiOS対応のWebサイトを作る際に役立つ機能を提供するJavaScriptライブラリです。 iOS向け最適化サイトを作る際には二種類の方法があります。jQuery MobileやUiUIKitのようなテーマを使って作っていく方法と、フルスクラッチです。もしフルスクラッチで作っていくならば一緒に使ってみてほしいライブラリがiOS.jsです。 通常だとこんな感じに表示されてしまうページが… iOS.jsを通すことでマックス表示にできます。 こんな感じに重なってしまうページも… iOS.jsを通すと適切に分かれて表示されます。 その他、こうやって画面サイズの取得もできます。 iOS.jsではその他、Webアプリモードとして動かしている場合はリンクのターゲットを指定してMobile Safariに飛ばないようにしたり、iOSデバイス限定のスタイルシート設定を加えられたり、iPhone
CSS Filter Effects!
「CSS Filter Effects」の紹介をしてみたいと思います。 現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 - 5. The ‘filter’ property 2011年12月16日版を参考に書いていきたいと思います。 サンプルページは以下です。 CSS Filter Effects Sample このサンプルの画像は、通常だと次のように表示されます。 左側がjpg画像で、右側はハートの外側が透過されているpng画像です。 これにフィルタをかけていきます。 なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。 このプロパティをWebkitで使
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
Bootstrap from Twitter ver1.3.0の使い方を日本語解説して簡単css (web)デザイン - end0tknr's kipple - web写経開発
この解説ページ群の目次 url トップ(このページです) bootstrapの概要「等」 入手と設置(install) http://d.hatena.ne.jp/end0tknr/20111016/1318730072 グリッドシステム http://d.hatena.ne.jp/end0tknr/20111016/1318731266 (固定/可変)レイアウト http://d.hatena.ne.jp/end0tknr/20111016/1318732238 テキスト(ﾍｯﾀﾞ, ﾘｽﾄ, ｲﾝﾗｲﾝﾗﾍﾞﾙ) http://d.hatena.ne.jp/end0tknr/20111016/1318750736 テーブル http://d.hatena.ne.jp/end0tknr/20111016/1318777018 フォーム、ボタン http://d.hatena.ne.jp/
Webデザイナー向け。CSSを手軽に楽しむ·dabblet, MOONGIFT
dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。 dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。 トップページです。上半分が適用されたHTML、下がそのCSSとなっています。 上にマウスを持っていくとメニューが表示されます。 ログインします。GitHubアカウントでログインできます。 色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい！ グラデーションだとバルーンもグラデーションがかっています。 HTMLに切り替えて記述もできます。 メニューも色々です。保存しておくこともできます。 表示の配置を変更できます。 重ねて表示もできます。 Gistに保存できます。 dabbletを使うとリアルタイムに記述したスタイルシートがその
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニバーサルデザイン - FUJITSU Japan
Home - Mgallery-JQ