ウェブパフォーマンスの基礎と今後の動向について、Web標準周りを中心に解説しています。GREEのMini Tech Talkで発表時の資料です。Read less

CSSで子要素の縦位置をセンタリングしてみます。 その1 position:absolute をつかう。 己を position: absolute に、親要素を position: relative （もしくは absolute、fixed）にして、自らのtopを50%、margin-topを己の高さの半分に設定すれば、なんということでしょう。縦位置のセンタリングのできあがりです。 必要な情報としては、己の高さのみなので非常にお手軽です。 その2 display:table-cell と vertical-align:middle をつかう。 親要素を display: table-cell、 vertical-align:middle に、さらにその親要素を display: table にすることによって、縦位置のセンタリングのできあがりです。 要素がひとつ増えてしまいますが、誰もな

仕事でイラストレータCS2を使っています。 だいたいいつもレイヤーを5,6個作って作業しています。 レイヤーパレットで、レイヤーをロックしたりコピーしたりという作業が多く、通常は基本のレイヤーのみがパレット上に表示されているだけなので、パレットをちょうどいい長さにして全部表示されるようにして、作業しやすくしているのですが、作業中、気づいたらサブレイヤーがすべて表示されているとき（下向きの▼がでている）があり、そうなるとオブジェクトの数の分だけ、ずらーっと表示されてしまいます。 レイヤーパレットがものすごく長くなり、スクロールしないとパレット上のレイヤーを全部見ることが出来ないので、いちいち▼をクリックしてサブレイヤーを隠す、という作業をしないといけません。 とくに大問題というわけではないのですが、非常にうっとおしくて、どうにかならないものかと困っています。 どのようなきっかけでサブレイヤー

CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン

WebマーケターTOMOKO 新規顧客獲得を専門とし、企業の価値や個性を広めていくために日々奮闘中。 Google公認プロフェッショナル認定　Adwords初級・上級認定、Analytics認定 ご相談・メディア掲載依頼等はこちらから→ Google +　｜　Twitter ＜質問＞ スマートフォンが流行っていますが、自社のWEBサイトではまだスマホ対応していません。 スマホ対応すべきでしょうか。またスマホ対応するとしたら、どのように考えるべきでしょうか。 ＜回答＞ スマートフォン（以下スマホ）の普及やグーグルの動向を考えると、遅かれ早かれ対応したほうが良いでしょう。 ただし、スマホ対応と一言で書いても、いくつかの手段があります。 あなたのWEBサイトの目的や使用用途・運営状況などに応じて、あなたにとっての最適な手段は変わります。今日はそれを考えてみましょう。 スマホ利用の現状 年々増える

＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大

僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ

作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ

TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s

TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ

こんにちは、ひろゆきです。 今回は、何かしらに使えそうなAPIを紹介していこうと思います。 Web制作者の方などは、運営されているWebサイトに使えそうなものがあれば利用してみてはいかがでしょうか？ （※各APIの使用条件などは、提供元よりご確認ください。） 1. Yahoo Japan YOLP 気象情報API http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html こちらは、緯度経度を元に、その地域の現在の天候や60分後までの降水強度予測を取得することができます。レジャー系のサイトなどで使えそうですね。 2. clarifai 画像タグ付けAPI http://www.clarifai.com/ 以前、「画像を解析して写真にタグ付けをするAPI『clarifai』のデモを試してみた」でご紹介した