フリービー(Freebie)コンテンツの紹介とまとめ！WEB屋がフリービーコンテンツから学べること色々！ | バンクーバーのうぇぶ屋
Typography Basics: Understand the Language of Letters - Designmodo
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates The distinction is often ignored by most designers (both for web and print) and the terms font and typeface are often used interchangeably. Stroke: The weig
Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts
Googleにホスティングされて いるWebフォントにCSS3等で 3Dやレタープレスなどのエ フェクトをかけた状態をサク サク確認できる、というWeb サービスのご紹介です。 Google Web Fontの使用頻度が高いなら結構役立つかもしれません。装飾したCSSの発行もしてくれます。 右カラムでGoogle Web Fontを選択、左カラムの上部にエフェクトを選択するボタンがあります。選択すれば即座にプレビューに反映されます。上記はLeandeというエフェクト。 下部でCSSのソースやWebフォント用のコードをコピー出来ます。 フォントはGoogle Web Fontにあるもの全てが揃っているわけでは無さそうですが、増えていくんじゃないでしょうか。ご利用は以下よりどうぞ。 Best Google Web Fonts
スマートフォン向けサイトはページ分割したほうがいいのだろうか？ - F.Ko-Jiの「一秒後は未来」
ケータイ向けのサイトは、ケータイのブラウザで読み込める容量に制限(100KBとか500KBとか)があったりしたために、テキストや画像の多いページはページ分割するのが当たり前な感じでした。が、ページ分割したとしても次ページへのリンクに数字キーを割り当てることができたため、操作は容易でした。 その流れをくんでいるのか、単にページビューを上げたいのか、スマートフォン向けのサイトでもページ分割をしているサイトがちらほらあります。 しかし、スマートフォンのブラウザは、調べてみると Mobile Safari で1ファイルあたり 10MB までという制限があるみたいですが、HTMLファイルでそんなにサイズのあるページなどほとんどありませんし、ページ分割を意識する理由にはなりません。 どちらかというと1ページ内の画像が多い場合に読み込みに時間がかかるという問題があれば、ページ分割の理由になるかもしれませ
ほんとうは怖いWP Super Cacheの話 | 高橋文樹.com | プログラミング
この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 WordPressで一般ユーザーのログインを伴うサイト（ECサイト、SNSなど）を作っている方も多いと思いますし、そういった依頼を受けることも多いのですが、最近「バグです！」という報告を受けてよくよく調べたらWP Super Cacheというキャッシュプラグインのせいだったということがなんどかありました。毎回説明するのが大変なので、書いておきます。 そもそもWP Super Cacheはどういう仕組みか 通常のWebサイトというのは、ユーザーから求められたリクエストからPHPなりRubyなりPythonなりが求められるデータを推測し、データベースに対して適切な操作を行い、最終的にHTMLを書き出します。 動的なサイトがリクエストを受け取って処理する仕組み で、Webサイトが重
4年半の英語学習でした事・しなかった事
2013年6月9日 英語 前々から「Manaさんはどうやって英語の勉強をしたんですか？」と聞かれる事が多いのですが、前回の「海外在住Web屋の私のまわりで最近話題の5つのWebサービス」という記事を書いてさらに増えてしまい、もう記事にしてしまえ！という事で今までしてきた英語の勉強方法をまとめてみました。Web関連の記事以外は書くつもりはなかったのですが、今回はお許しくださいまし。 ↑私が10年以上利用している会計ソフト！ まずはここから！身の回りの物を英語環境に まず、iPodやiPhone、携帯電話、できればPC・Macなど、英語に設定変更できるものは全て英語にしてしまいます。これで英語が覚えれる！というわけではありませんが、だんだんと身の回りに英語があるという環境に慣れてきます。突然分厚い本を読み始めてもすぐあきちゃいます。習うより慣れろ！方針で。私の場合はiPodの中身も洋楽のみ（大
Web業界でよく使う用語の英語辞典
2014年8月22日 Web関連記事, 英語 英語のサイトにはたくさんの素敵情報が溢れていますが、なんだかハードルが高く感じていませんか？頑張って読んでみたけどわからない単語につまづいたり。という事でWeb業界でよく使う英単語を、過去のメールのやり取りを読み返したりして思いつく限り書いてしました（そのままカタカナになっている単語は省きます）。ポイントをおさえれば「「英語だから…」なんて拒否っちゃ駄目なWEB屋が知っておくべき厳選ブログ、WEBマガジン色々」で紹介されているようなサイトもスラスラ読めるようになるかも！？ ↑私が10年以上利用している会計ソフト！ 目次 あ行 か行 さ行 た行 は行 ま行 や行 ら行 あ行 値 – Value HTML、CSS、JavaScriptなどなど、いろんな場面で出てきますね。 You can get the value of a form elemen
さようなら、ページビュー ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
古くはFlashやAjax、そして今日のアプリにHTML5全盛時代、、、ページビューでウェブサイトの価値を考える時代はとうに過ぎ去ったはずなのに、ネット広告の世界では何故か未だ幅を利かしているページビュー換算の広告指標。日本に限らず最先端のアドテクノロジーが次から次に生まれているアメリカでも意外と状況は似ているようです。とはいえ、そろそろそんな時代も終わりに来ているかも、、、ということで、今回はページビューの今後を考えてみた記事をカリスママーケッター、ミッチ・ジョエルのブログから。 — SEO Japan ページビューを広告効果想定の指標としていた日々はゆっくりと（もしくは迅速に）終わりに近づいているのだろうか？ バナー広告（今は“ディスプレイ広告”と呼んでいる）がインターネットに初めて登場した時、私は、“これが私たちにできる最良のことなのだろうか？”とひそかに考えたことを覚えている。私は
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
最新版クレジットカードおすすめランキング！すぐに使えるのはこれ！
この記事では、最新版クレジットカードおすすめランキング10選について解説します。 クレジットカードは、商品を購入する際に所持金がなくても後から代金が支払えるカードです。 ポイント還元などさまざまな特典があるクレジットカードですが、カードによって特徴が異なるため、あなたに合うクレジットカードを選択するのは容易ではありません。 この記事で分かること オススメクレジットカードを口コミや年会費、ポイント還元率で選出 ポイント還元率が0.5％以上は還元率がよい ポイントアップがあるクレジットカードはポイントが貯まりやすい クレジットカードを初めて発行する人は年会費やポイント還元率に注目する 旅行や出張が多い人は旅行傷害保険が手厚いクレジットカードを選択する セキュリティを重要視する人はナンバーレスカードを選択する 2枚目のクレジットカードを作成する際は1枚目にない特典があるカードを選択する それぞれ
仰天の続編付き!! ピンチにさらに油を注いで大炎上の実例をAUからお届け
わたしはサラリーマンには向いていませんでしたが、新卒で入ったリクルートでひとつだけ座右の銘となる言葉をゲットしました。どの上司が言ったのかまでは覚えてません。すいません。 「ピンチの時こそチャンス」 深い。深すぎる。これが発展して「崖っぷち愛好会会長」となったわけでありますが、一般のサラリーマンの場合、ピンチはミスのことを指す場合が多い。このミスをいかに誠意を持って切り抜け、逆に信頼を得ることがプロの仕事。それほどミスは出したことは無いが、昔々、リクルート時代に正規輸入ディーラーの仕事を受注して数千万いただいたけど、車が全く売れなかった時があった。死ぬ気でリクルートで社内営業して15台くらい売って担当者のクビをつなぎました。Facebookで先日、このときに車を買ってくれた同僚から友達申請が来たときに思い出しました。汗かきました。 が。しかし・・・ このピンチの時の初動を誤ると顧客の激怒を
H2O Blog., Adobe Edge Codeがリリース
Coda 2や Sublime Text 2など、最近は「軽量エディタ」が人気。私も、Adobe Dreamweaverや Eclipseのような「重量級ソフト」はなかなか立ち上げる機会が減ってしまいました。 そんななか、Adobeがいよいよ軽量エディタ市場に参入。Edge Codeというエディタソフトを登場させました。 Adobe Edge Code 現在「プレビュー版」として、無償で配布されています。 このソフトのユニークな部分は「Brackets」という、同じAdobeのオープンソースプロダクトから構成されていること。エディタ自体が、HTML+JavaScriptで作られており、誰でも中身を改造して使うことができます。 Adobeという大企業が、こうしてオープンソースに乗り出し、「みんなで育てよう」という姿勢を見せたことは、非常に大きな意味を持っているのではないかと思います。今後の展
CSS Flexbox Please!
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
jQueryのanimateで自由にアニメーションできるようになろう
jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 投稿日2011年12月27日 更新日2011年12月27日 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
ウェブマスター・制作者は必読！ユーザーがサイトから離脱してしまう8つの要因
ナビゲーションが分かりにくい ナビゲートすることが難しいサイトは、ユーザーを失望させます。複雑だったり、一貫してなかったり、そういったナビゲーションはユーザーを困惑させ、苛立ちを感じさせるものです。
the 12-step landing page rehab program
NP Digital offers: Data & Analytics Earned Media Paid Media Creative Technology Customers expect a personal connection to the brands they prefer. Our DAI team uses data, technology, and analytics to better define customer audiences and the journeys that they take. Those insights make our marketing more addressable and the customer touch-points more personalized. CMO’s expect more from their digita
｢自分でやったほうが早い病｣への15の処方箋 | ライフハッカー［日本版］
「自分でやったほうが早い病」と聞いて、「ああ......」と思い当たる人は少なくないはず。基本的に「できる人」だけれど、完璧を求めすぎるせいか人にまかせることができない。だから結局は自分ひとりで抱え込み、ときには自滅してしまう。そんなタイプ。 『自分でやった方が早い病』（小倉広著、星海社新書）が取り上げているのがまさにそういう人ですが、本書の見るべき点は、この病を乗り越えることで得られるものの大きさをきちんと示している点です。たとえばわかりやすいのが、「自分でやったほうが早い病」への15の処方箋。これらをクリアすれば、かなりの問題点を改善できるのではないでしょうか？ 1．まず痛い目に遭う（114ページ） 「自分でやったほうが早い病」の原因は利己主義であるため、徹底的に利己を貪り尽くし、痛い目に遭ってとことん問いつめられれば利己主義から利他主義に変われると著者は言います。 2．体質を改善しな
Adobe のフォント 「Source Code Pro」 試してみた
Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も 「Source Code Pro」 というフォントを発表したとのことで、早速ですがこのブログでも使ってみました。Google Web Fonts からの使用方法を簡単に解説。 Publickey さん経由で知ったんですが、Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も 「Source Code Pro」 というフォントを発表したとのこと。 そこで、早速ですがこの Blog でも使ってみました。Google Web Fonts 等でも使用できるようになっていますので、試すのは簡単です。 実際にこの記事のソースコード部分も 「Source Code Pro」 で表示されていると思いますので確認してみてください。確かに見やすいかも。 ［速報］ソースコードを表示するためのフォント「Sou
プリントアウトした方が間違いに気づきやすいワケ - A Successful Failure
2012年09月24日 プリントアウトした方が間違いに気づきやすいワケ Tweet もう随分前の話になるが、モニタ上で見るよりも、紙で確認したほうが間違いに気づきやすいのはなぜかという議論が盛り上がった。 どうして紙にプリントアウトした方が圧倒的に間違いに気付きやすいのか なぜ｢画面｣より｢紙｣のほうが間違いに気づきやすいのか? 考えうる理由についてはおおよそ挙げられているようだ。既出の論点の中では、身体性に関する指摘が重要であるように思われる。身体性とは、認知科学において近年注目されている概念で、身体という物理的存在が周囲の環境とインタラクションすることによって、学習や知識構築を行うことを指す。物理的な紙にプリントアウトされた情報を読むときには、本を持つ、ページをめくる、文字をなぞるなどの物理的なインタラクションを行なっており、ページの厚みや重さといった電子情報には無い要素が間違い発見の
取引先は見た！ サムスンマンと日本企業社員の決定的な“差”：日経ビジネスオンライン
山崎 良兵 日経ビジネス副編集長 日経ビジネス編集部、ニューヨーク支局、日本経済新聞証券部などを経て、2017年1月から日経ビジネス副編集長。 この著者の記事を見る
［速報］アドビが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
モバイル、モバイル、モバイル・・・だよ！
［ポスト PC 時代の到来：image］ iPhone 5 の発表を踏まえて書かれた興味深い文章がある。 ギーク転身ベンチャーキャピタリスト MG Siegler の「私の製品フィードバック」だ。 massive greatness: “My Product Feedback” by MG Siegler: 20 September 2012 ＊ ＊ ＊ モバイル、モバイル、モバイル モバイル、モバイル、モバイル・・・だよ！ ［モバイルを計 740 回繰り返す］ Mobile Mobile Mobile … [740 words] ＊ ＊ ＊ 開発の実態は 分かりきったことだろ？ 自分が初めていってるんじゃないよ。なのに、たくさんのスタートアップ企業が「デスクトップ/ラップトップベースのウェブ」をまず念頭に置いているのに出くわすんだ。確かにその方が、開発やア
Adobeアカデミックストア
Get 20+ {{creative-cloud}} for less than the price of 3 apps. The All Apps plan includes 20+ apps and services plus 20,000 fonts, storage, templates, and tutorials for less than the price of {{acrobat}}, {{photoshop}}, and {{premiere-pro}} sold separately. https://main--cc--adobecom.hlx.page/cc-shared/fragments/merch/products/catalog/marquee/includes {{free-trial}} {{buy-now}}
プロトタイピングからはじめよう
パソコン向けにだけ Web サイトを作っていた頃はあまり必要性を感じられなかったプロトタイピングも、Webへアクセスする方法が増えてきたころから、その必要性も高まりつつあります。パソコン向けに絞ったとしても複雑なインタラクションを絵だけで共有するのが難しくなってきました。余計な書類を減らし、課題が具体的に見えてくるプロトタイプの魅力と活用を紹介。今回はプロトタイプの中でもペーパープロトタイピングにスポットを当てて、メリット・デメリットを解説します。Read less
Why icon fonts are awesome
I’ve been using icon fonts for a few projects lately instead of graphical icons. There are several advantages to using icon fonts. Scale them with CSS Color them with CSS Add shadows with CSS Change opacity with CSS Rotate with CSS Basically make any changes without opening Photoshop and editing a sprite They automatically scale for retina displays See for yourself. Chris Coyier put together a fan
A List Apart: Articles: Creating Liquid Layouts with Negative Margins
I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar. Starting out simple#sec
35+ awesome and free @font-face kits
With the right fonts, we can do anything, and create anything. Fonts help portray a mood or emotion. Your font choice can make or break your designs, so you must careful in choosing the right one. Typography matters not just because it looks good, but because what's being said is extremely important. Typography in web design is becoming huge. We can now embed and show all sorts of fonts on our web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe "Create the Web"
CSS 20 stunning examples of CSS 3D transforms
100円ショップのワイヤーフレームとフックで電源ケーブルをテーブルの裏面に格納！
BLOGOS サービス終了のお知らせ
ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 － Publickey
http://zoomzum.com/10-useful-cheat-sheet-for-wordpress-users/
Andy Clarke at Smashing Conference
CSS 20 stunning examples of CSS 3D transforms