Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman(ジョナサン・コールマン)氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
皆さんはWEB制作の過程で何かジェネレーターの類とか使ってますか?使う派使わない派と別れるところかもしれませんが、僕はかなりヘビーに使う派。それも一個のジェネレーターに留まったことはほぼ無く、毎月、下手すりゃ毎週のように新しいジェネレーター試しては便利そうなら周りと共有してといったことを繰り返してきました。 飽きっぽいと言えば飽きっぽい、他にももっと良いのあるんじゃないかとあっちへ行き、もっと良いのあるよと言われればそっちへ行き、こっちの方がおいしいよと言われればホイホイ試してみる・・・・・なんか駄目な人間みたいですが気にしない方向で行きます! というわけで、僕が最近使ってみたり、教えてもらったりしたジェネレーター関連。ボチボチごちゃついて来たのと、このブログでまだ紹介してない物も色々あったし、2012年5月現在使っているジェネレーターの類を一度振り返りながらまとめてみようと思います! 良
概要 ▶ 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
パネル右:グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる(可能性を秘めた)、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
まぁ、「これ以上大きくてもおk」とは書いてありますが、iPhoneに表示されるアイコンのサイズは決まっておりますので114×114pxで作成するのが無難でしょう。 画像が用意できたらアップロード、そしてheadタグ内に [html]<link rel="apple-touch-icon" href="画像パス" /> [/html] を追加します。 これだけ。 ちなみに、「apple-touch-icon」の部分を「apple-touch-icon-precomposed」とすると、iPhoneアイコン特有のつや出し効果を拒否することもできます。(角丸効果は防げません) Webサイトのホーム画面への追加方法 さて、早速アイコンを設定した自分のブログをiPhoneでホーム画面に設定してみました。 ホーム画面にショートカットを追加したいページをSafariで開いて下部真ん中のアイコンをタップ。
Webフォントでアイコンをつくろう! ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 (以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。) jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ! 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
環境が整ってきたWeb Fontsサービス Web Fontsを利用する環境は整ってきました。前々回(インストールせずに、好きなWeb Fontsを使おう ─ @IT)はWeb Fontsの歴史を、前回(好みのWeb Fontsが使えるツールを探そう ─ @IT)はフォント提供サービスと、Web Fontsを利用する上で便利なツールをご紹介しました。 今回はGoogle Web Fontsの使い方をご紹介します。 Google Web Fontsは他のフォント提供サービスと比較して、とても簡単に利用できます。アカウント登録も不要で、すべてのフォントがオープンソースとして提供されています。第1回の記事では簡単な紹介だけでしたが、今回はWeb Fontsの使い方や、多くのフォントから気に入ったフォントを選ぶ方法など詳しく解説します。 基本的な使い方 Google Web Fontsは以下の3つ
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権(見よ! コレジャナーイアプリの数々を!)」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く