Webデザインにおけるタイポグラフィの考察 | ノート | dotgraphy
2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド 工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ
第21回 HTML5で家計簿アプリを作る パフォーマンス向上のための工夫
業務システムの場合は毎日何千、何万というデータが発生します。今まで作ってきたアプリがこのデータ量に耐えうるかどうか確かめてみましょう。ロジックの「明細一覧取得処理」のURLを下記のように書き換えてください。 （account-logic.jsのソースコード抜粋：明細一覧取得） この状態でアプリにアクセスしてみましょう。いかがでしょうか。表が表示されるまでに数秒の待ち時間がありました。表示された画面を見ると分かる通り、ロジックを経由して取得したデータの量が非常に多いために、パフォーマンスに影響が出てしまいました。 毎日使う業務アプリにこそ、スムーズな操作が重要です。Webのユーザービリティ研究者であるヤコブ・ニールセン博士は、研究の中でWebページの反応時間について次のように述べています。 心理的・感情的な違和感を覚えない限界は0.1秒まで。 思考の流れが妨げられないのは1秒まで。 注意力を
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
CSSオジサン #0に行ってきた - morishitter blog
昨日大阪で開催された、CSSオジサンっていうCSSの勉強会に行ってきたのでその雑感。CSSオジサンってだけに若者は少なかった。女性の人が思ったよりいた印象ある。 発表は、最初がCSS設計の教科書の著者である@hilokiさん。@hilokiさんと言えばCSS設計。「メンテなブルであり続けるためのCSS設計」というタイトルの発表だった。CSSを片手間に書いている人たち、@hilokiさんのスライドは一読すべきだと思う。 メンテナブルでありつづけるためのCSS設計 from 拓樹 谷 次が@cssradarさんで、「CSS Investigation: CSSコードレビューの仕方教えます」という発表。コードレビューをする側の心構えや、おなじみの便利ツールの紹介、コードの不吉な匂いの見つけ方とかの話だった。 最後が@t32kさん。「CSSオジサン、この先生きのこるためには」というタイトルで、@t
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
「クラウド本気で始めました」なSIerのChef活用と実践～Chefアンチパターンとの戦い～
Chef Casual Talks Sapporo Vol.1 映像→https://www.youtube.com/watch?v=zJ7pYVp5M7E&feature=youtu.beRead less
業務でAmazon Web Services（AWS）を使い始める前に知っておきたいクラウドの基本のキ
本連載は、IT業界に入ったばかりの新米アプリケーション開発者や、IT業界を目指す学生さんを対象とした、クラウドによるシステム構築講座です。また、業務アプリケーション開発エンジニアでプログラムを書いたり開発環境を整備したりはできるけど、本番環境でのインフラ構築/運用管理などはよく分からないという方にも読み進めていただけるように、概念や用語の解説を入れながら説明します。本連載では、Amazon Web Servicesを使ってクラウドシステム上に簡単なWebシステムを構築していきます。 はじめに クラウドという言葉が世の中に出てきてから、ずいぶんと年月が経過しました。今日では、さまざまな企業システムがクラウド上で稼働しています。 クラウドが登場したころは、クラウドに積極的な企業や、ゲームやソーシャル系などのシステム利用が中心でした。しかし、今ではクラウドの多大なるメリットを活用するため、一般企
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
2014年のウェブシステムアーキテクチャ - stanaka's blog
(Monitoring Casual Talk in Kyotoで発表してきたので、ブログエントリにまとめ直しました) 2013年はインフラ周りの技術的な進化が大きく、いくつかのエポックメイキングな概念と実装が産まれました。個人的には特に以下の2つが大きいと思っています。 AWSの本格普及期 DockerとImmutable Infrastructure これらを踏まえて、2014年のウェブシステムの進化の方向性を考えてみます。また、それによるモニタリングへの影響もあわせて考えます。だいぶ長くなってしまったので、急ぐ人は最後に結論をまとめましたので、そちらからどうぞ! 2013年という時代背景 AWSが本格普及期を迎えているのは、言わずもがなのことで、Re:Inventでの246件という膨大のセッション数などにその勢いが表われています。 また、DockerはLXC (LinuX Conta
自分がどのくらい裕福かがわかるGlobal Rich List - pixyzehn blog
知っている方も多いかと思いますが、国と年収を入力すればいろいろと興味深い結果がでてきます。 このサイトはアニメーションもすごくきれいでとても興味深い結果が得られます。また比較しているものをわかりやすく日本がどれだけリッチであるかを改めて思いました。 http://www.globalrichlist.com/ 実際にやってみました。 まず上の画面で国と年収を入力していきます。 ここでは日本で年収200万としてみました。 そうすると結果画面にいきます。 世界でみると上から5.4％なのですね。世界で見ると、3億6千万番目に裕福であることがわかります。 こういうのは比較したことがないので、驚きがあります。 で下にスクロールしていくと今度は時給に換算されます。 およそ1050円なのですね。 そしてこのサイトは寄付をしてもらうことをおすすめしてきます。 そして僕であればコーラをかせぐのに5分12秒な
紙・布・木目・ドット柄など無料で使えるシームレスパターン素材まとめ
ウェブ制作にシームレスなパターン素材は欠かせませ... / シームレスなテクスチャーパターン素材 / Subtle Light Tile Patter...他...全18件 ウェブ制作にシームレスなパターン素材は欠かせません。いざ探そうとすると、これがなかなか見つからなかったりして厄介です。 ここでは、最近見つけた質感を加えたいときに重宝するパターン素材をまとめました。
DB Cache ReloadedとHyper ResponseプラグインでWordPressブログ高速化
WordPressプラグイン「DB Cache Reloaded Fix」と「WP Hyper Response」について WordPressの高速化プラグインにはいろんな種類があります。なぜなら高速化とひとことで言っても「データベース」「ブラウザキャッシュ」「オブジェクトキャッシュ」「CSSやJavascriptの圧縮化」など様々です。 「DB Cache Reloaded Fix」はデータベースへのアクセス（クエリ）をキャッシュ（データを記録して使いまわすこと）することにより、パフォーマンスの低下を抑えて高速化させるプラグインです。管理画面も高速化します。 「WP Hyper Response」は日本人が作った簡易高速化プラグインです。PHPのバッファ（表示するもの）を先出しして体感速度だけでなく実速度も上げてくれます。管理画面も高速化します。 2つの高速化プラグイン導入前後の測定結果
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
全部無料！個人ブログ・ポートフォリオからビジネスまで、レスポンシブ対応のWordPressのテーマファイルのまとめ -2013年夏
最近リリースしたもの中心に、個人ブログ、写真やクリエイティブな作品を見せるポートフォリオ、企業・ビジネスサイトなど、レスポンシブ対応のWordPressのテーマファイルのまとめをflashuserから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
すごい無料HTMLテンプレート厳選30個まとめ 2014年5月度PhotoshopVIP |