画面サイズによって読み込むイメージを切り替えてくれる「Responsive Images」

2011/07/29 12:10 | レスポンシブWebデザイン

レスポンシブ・デザインでサイト制作をする際に困るのが画像のサイズ。今とりかかっているサイトでも、対応策に悩んでいるところです。

PC画面向けの大きなイメージはモバイルには大き過ぎる。
逆に、モバイル画面向けの小さな画像はPC向けには小さすぎる。

そんな問題を解決してくるのがFilament Groupという制作会社が使った「Responsive Images 」という、JavaScriptとApacheの.htaccessを使った仕組です。まだ実験的なものでプロダクションレベルのものではないかも知れませんが、Github でソースが提供されているので、ここから改善したものをフォークするのもありですね。

「Responsive Images」の仕組

実際に試したわけではないですが、説明によると以下のような仕組だそうです。

.htaccessとJavaScriptを利用して、スクリーンサイズによって読み込む画像を切替える
画像は、大・小２つを用意して<img>タグに指定する
デフォルトでは480pxをブレイクポイントとして画像の読み込みが切り替わる

HTMLの記述は以下のようになります。

<img src="small.r.jpg" data-fullsrc="large.jpg">

小さいほうの画像に.rを追加して記述する
大きい方の画像をdata-fullsrcで指定する

必須条件

.htaccessを指定する必要あり (RewriteEngineとやらを使っている)
1.294kbほどのJavaScriptの読み込みが必要
大、小、２つの画像を準備する必要あり

ブラウザ・サポート

Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4でサポート
Firefox 3.6-, IE 6/7, etcでは完璧ではないが動く

※Androidでの対応は不明

ライセンス

ちなみに、ライセンスはMIT とGPL Version 2 のデュアルライセンスだそうです。なので、商用利用も問題ありません。ライセンスについてはこんなまとめページもありました。

参照

レスポンシブ・デザインのテストに使えそうなウェブアプリ「responsivepx」

2011/07/23 18:03 | レスポンシブWebデザイン

レスポンシブ・デザインで作ったウェブサイトのテストをできる便利なウェブアプリをご紹介。実機テストの前段階のちょっとしたテストには便利そうです。

「responsivepx」というウェブアプリで、ブラウザのウィンドウサイズを変更しなくても、いろいろなサイズでウェブサイトをテストできます。サイズの数値を1px単位でインタラクティブに変更できるので、どこでレイアウトが崩れるかなど細かいチェックができるのが嬉しいです。続きを読む

穴埋め形式のオンラインフォームがいい感じ

2011/07/20 22:14 | ウェブについての考察など

ぜひ導入してみたいと思えるオンラインフォームの新しい形に遭遇したのでご紹介します。ウェブを見ていて久々に「おぉ〜、これは！！」というものに出会いました。

上の画像がそのフォームのキャプチャなのですが、テストなどによくある「穴埋め形式」のオンラインフォームで、文章の穴を埋めていく形で内容を入力していくというものです。キャプチャはHuffdufferというオーディオ共有サイトの登録フォームで、実在するものです。続きを読む

ソーシャルボタンの仕様とリンク集

2011/07/16 14:08 | ソーシャルメディア

ウェブサイトやブログにTwitterやFacebookの「いいね！」ボタンなどのソーシャルボタンを設置するのは当たり前になるつつある昨今。仕様をいつも忘れてしまって、毎回検索しているので覚え書き。とりあえず、Twitter、はてなブックマーク、Google+ボタンの仕様をまとめてみました。

※2011年7月16日時点での仕様です。

では、まずはTwitterから。

Twitter

JavaScript版のTweetボタンのアンカータグ

<a href >内に記述することで、個別に各要素を指定できます。

アンカータグ	説明
data-url	TweetするURL
data-text	ページタイトル、記事のタイトルなどのTweetするテキスト
data-count	Tweetボタンの種類。none (横・カウント数なし)、horizontal (横・カウント数あり)、vertical (縦・カウント数あり)の3つから選べる
data-via	指定したTwitterユーザが”via @rriver”のようにTweetテキストに追加されます。

仕様詳細ページ

例

WordPressに設置するときのコードサンプル。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="rriver" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>">Tweet</a>

はてなブックマーク

タグの種類

Twitterと同様に、<a href >内に記述することで、個別に各要素を指定できます。

アンカータグ	説明
リンクURL	はてブの場合、リンクURLはhref=”http://b.hatena.ne.jp/entry/”のスラッシュのあとに入れます。
data-hatena-bookmark-title	ページタイトル、記事のタイトルなどのTweetするテキスト
data-hatena-bookmark-layout	ボタンの種類。simple (B!アイコンのみ)、standard (横・カウント数あり)、vertical (縦・カウント数あり)の3つから選べる

仕様

例

WordPressに設置するときのコードサンプル。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php the_title(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" /></a>

Google+ボタン

Googleが提供しているコードにhref=””でリンクURLを追加すれば良いようです。

仕様

以下、WordPressに導入する際のコードのサンプルです。

<g:plusone size="medium" href="<?php the_permalink() ?>"></g:plusone>

iPad + Wireless Keyboard vs MacBook Airの重量比較

2011/06/26 21:53 | IT・ガジェット

iPad用にWireless Keyboardとキーボード用のケースも買ったので、試しに総重量を計ってみた。笑

MacBook Airの11インチモデルの重量は1.06kg。
13インチモデルだと1.32kg。

では、iPad (第1世代)とApple Wireless Keyboard + Incase Workstation for Apple Wireless Keyboardの総重量と比較すると？

iPad用にApple Wireless Keyboardを買ってみた

2011/06/25 23:25 | IT・ガジェット

いまさらながら、iPad用にApple Wireless Keyboardを買ってみた。

結論から言うとなかなか良い！

第1世代のiPadで使うと「通信速度が遅くてタイピングがもたついてしまう」といったようなレビューがあったりして、ちょっと心配でしたが、いまのところ快適に使えています。この記事もWireless Keyboardで書いているのですが、特にストレスなく、サクサクとタイピングできています。続きを読む

アイコン画像などをCSSスプライトにまとめる方法

2011/06/19 23:27 | ウェブ制作・運営ノウハウ

現在作業中のサイトでは「CSSスプライト」という手法を使って、アイコンやロゴなどの画像表示の最適化を試みようと思っています。アイコンなどの小さな画像が数多くあると、その分ダウンロードする際にサーバへの接続回数（HTTPリクエスト）が多くなってしまい、ページ表示速度を遅くさせてしまう可能性があります。そこで、CSSスプライトを使った方法では、それら複数の画像を一つにまとめて必要な部分のみをCSSで表示させます。

CSSスプライトの方法にもいろいろあるようですが、ここではGoogleやFacebookが採用しているアイコン画像を縦と横に並べた、よりコンパクトなスプライト画像を使う方法についてまとめてみます。※現段階ではIE6、IE7未対応

SVGスプライトについての記事

参考までに、こちらもどうぞ

レスポンシブ・ウェブを実装する際の画面幅のサイズ一覧とテスト

2011/06/17 0:22 | レスポンシブWebデザイン

レスポンシブ・ウェブを実装する際にテストすべき画面サイズ（幅）の一覧をまとめてみました。この一覧をベースに、既存サイトのアクセス解析と見比べてテストの比重を調整するのが良いかと思います。

画面サイズ幅のブレイクポイント一覧

320px	スマートフォン縦
480px	スマートフォン横
600px	タブレットPC（小）縦
768px	タブレットPC縦
1024px	タブレットPC横・一部ネットブックなどのデスクトップPC
1280px	デスクトップPC

※先日読んだ「Responsive Web Design」という本では、Media Queriesを設定する際にレイアウト調整の起点となるサイズを「Breakpoint」と読んでいたので、ここでもその名称をそのまま使います。続きを読む

「モバイルファースト」という考え方についてまとめてみた

2011/06/15 13:59 | レスポンシブWebデザイン

去年の終わり頃からアメリカで話題の「モバイルファースト」について、自分なりの考えをまとめてみた。

僕が考える「モバイルファースト」とは「サイト構築の起点をモバイル向けにする」という「レスポンシブ・ウェブ・デザイン（RWD）」を前提とした考え方で、そうすることで「自然とデスクトップ向けの制作にも良い効果が生まれる」ということ。それぞれの接続デバイスに最適化されたユーザ体験を提供する「レスポンシブ・ウェブ・デザイン」を採用した制作には、大きく分けると2つの進め方があります：

デスクトップ向けの制作からはじめて、モバイル向けに最適化していく方法
モバイル向けの制作からはじめて、デスクトップ向けに最適化していく方法

この方法のうち、モバイル向けの制作からはじめることを「モバイルファースト」と言っているようです。最近RWDで実際に制作をしてみているのですが、「モバイルファースト」は理にかなっていると実感しています。※ここでいうモバイルにはガラケーは含まれませんが… 続きを読む

Chrome版「Web Developer」でリサイズの選択肢を追加する方法

2011/06/13 23:06 | 制作・効率化ツール

レスポンシブ・ウェブ・デザイン（RWD）を取り入れた制作を試みている昨今。ブラウザ・ウィンドウを指定したサイズに変更する拡張機能が必須になっています。そんな拡張機能の一つ「Web Developer」のFirefox版では自分の好きなサイズを設定できるんですが、Chrome版の現行バージョンではカスタム・サイズの設定がまだできません。続きを読む

CSS3のremという単位が便利そう

2011/05/26 22:31 | ウェブ制作・運営ノウハウ

Photo by Dunechaser : CC BY-NC-SA 2.0

CSSで指定できる単位にはいろいろありますが、CSS3で新しく導入された「rem」という単位が便利そうです。これは、root emの意味で、ルート（つまり<html>）のサイズを継承するemとのこと。たとえば、リスト要素を入れ子にした際に文字サイズが大きくなってしまうなんていう問題は、この「rem」を使えば解決できます。

emの場合

html { font-size: 62.5%; } /* 1.0em ≒ 10px */
li { font-size: 1.4em; } /* ≒ 14px */

上記のようにスタイルを指定すると、以下のようなHTMLの場合入れ子にしたli要素のフォントサイズが掛け算で1.4 x 1.4 = 1.96 (約19px)になってしまいます。

<ul>
  <li>メニュー1
  <ul>
    <li>サブメニュー1</li>
    <li>サブメニュー2</li>
  </ul>
  </li>
  <li>メニュー2</li>
</ul>

これだと「サブメニュー」が「メニュー」より大きく表示されてしまいます。

remの場合

以下のようにremでフォントサイズを指定すると、入れ子にしたli要素も1.96emではなく1.4emになる。

html { font-size: 62.5%; }
li { font-size: 1.4rem; }

たしかに、これは便利！

というか、そもそも仕様がそうあるべきだったんではないか？と思ってしまいます。

で、ブラウザサポートは？

以下のような感じだそうです：

IE9
Safari 5
Chrome
Firefox 3.6+

※Operaは11.10でまだサポートされていないそうです。
※こちら（英語）を参考にさせていただきました。

ということで、remをサポートしないブラウザ対策ようのコードは以下のとおり：

html { font-size: 62.5%; }
li { font-size: 14px; font-size: 1.4rem; }

remをサポートしないブラウザには14pxを指定。
サポートするブラウザには1.4remで上書きさせる。

なるほどCSSも進化してるんですね〜。
これで入れ子のフォントサイズの問題を心配しないでスタイルを書けますね。

AirPlay経由でiPhoneからMacに映像と画像をストリーミングできるAirmac

2011/05/26 0:44 | IT・ガジェット

家のWiFiを使ってAirPlay経由でiPhoneの動画や写真をMacにストリーミングできるソフト「Airmac」が面白い。まだ音楽のストリーミングには対応していないみたいですが、次のリリースで音楽ストリーミング機能も追加されるとのこと。
続きを読む

ユーザは好きでIE6を使っているわけではない

2011/05/25 9:15 | ウェブ制作・運営ノウハウ

Microsoft自身が「The Internet Explorer 6 Countdown」というサイトでIE6の使用を辞めるように促している昨今、IE6のサポートをストップしているウェブサイトが増えています。WordPress.com (Mashableの英語記事)でも先日サポートをストップしたそうです。

が、しかし！続きを読む

HTML5のアニメーションが作れるMacアプリ「Hype」

2011/05/24 0:28 | IT・ガジェット

やっと出た！という感じですが、HTML5のアニメーションがオーサリングできるMacアプリがついに出ました！

その名も「Hype」。

チュートリアルの映像やギャラリーを見たところ、まだまだシンプルなアニメーションしか作れない印象ですが、これからに期待したいツールです。現在、Mac App Storeで期間限定の価格で3,500円で販売中です。

→ チュートリアル映像（英語）
→ サンプルギャラリー（英語）

う〜ん、買って試してみる価値はあるのか。。。ないのか。。。迷うところです。プロダクションには、まだ使えなさそうだしなぁ。。。

ちなみに、このHypeを作った会社は元アップル社員の2人が創設者だそうです。名前のようにHype（誇大な宣伝）で終わらないといいですね。

「ピタゴラスイッチ」の装置が作れるiPadアプリが楽しそう

2011/05/21 11:43 | ウェブについての考察など

NHKの「ピタゴラスイッチ」に出てくるような装置が作れるiPadアプリ「Casey’s Contraptions」が楽しそう。ああいう装置、作るの楽しいだろうなぁと思っていたら、iPadで実現できました。笑

日本のiTunes Appストアで、350円で売ってました。

「CSS制作のワークフロー」のスライドショー

2011/05/18 7:55 | ウェブ制作・運営ノウハウ

以前「CSS制作のワークフローについて」このブログでも紹介したCSSワークフローのスライドショーがあったのでメモ。もう一度読み返すと、頭のなかが整理できそうです。

CSS Workflow with Sass

View more presentations from Jina Bolton

センスのいい動画で見る「家やオフィスでノートPCを使うときの注意点」

2011/05/18 0:34 | ウェブについての考察など

すごくセンスの良いビデオだったので備忘録的にご紹介。音楽もいいし、ちょっとした動きのセンスが抜群です。

スマートフォンサイトのギャラリーを探してみた

2011/05/17 0:17 | レスポンシブWebデザイン

レスポンシブ・ウェブ導入のためにスマートフォンのUIを研究。なにはともあれ、サイトを見て使って感じてみるのが一番かと思い、まずはギャラリーサイトを探してみました。

Mobile Awesomeness

海外iPhoneサイトのギャラリー。各サイトにスクリーンショットが4枚あるのでPC版ブラウザからアイディア集めに使えそうです。ここも数が多そうです。
http://www.mobileawesomeness.com/

Media Queries – 使うべき？使わないべき？そもそも使えるのか？

2011/05/14 23:12 | レスポンシブWebデザイン

どうやらアメリカでMedia QueriesやResponsive Webについての議論がヒートアップしているようなので、Media Queriesについてじっくり考えてみた。

Media Queriesが必要なわけ (理由)
スマフォ対応に使うべき？
そんなに簡単ではない
もっともな異論
まとめ

小さいQRコードも読み込める無料のiPhoneアプリ「ポメラQRコードリーダー」がいい！

2011/05/14 19:23 | IT・ガジェット

1.5 x 1.5 cm程度の小さいQRコードでも読み込めるiPhone向けQRコードリーダーアプリを発見！

iPhoneでこんなにしっかりQRコードを読み込んでくれるアプリは初めてです。
しかも、無料でApp Storeでの評判もかなりいいです。

ちょっと嬉しかったのでご紹介。
→ ポメラQRコードリーダー (App Storeへのリンク)

iPhone、iPod touch、iPadのiOS 4.0以上で動くようです。ちなみに、試した環境はiPhone 4 / iOS 4.3.3 (8J2)です。
続きを読む

Macを簡単にハイバーネート状態にするウィジェット「DeepSleep」

2011/05/11 1:28 | IT・ガジェット

Macを簡単にハイバーネート（冬眠状態）にするウィジェット「DeepSleep」。節電にもなりそうなので、入れてみました。導入は簡単で、DeepSleepのウェブサイトからウィジェットをダウンロードしてインストールするだけ。

MacBookを閉じた時やメニューからスリープを選んだ際の「Regular Sleep mode」とWidgetをクリックしたときの「Widget Sleep mode」に、それぞれのスリープモードを設定することができます。続きを読む

Media Queriesの基本についてまとめてみた

2011/05/09 23:00 | レスポンシブWebデザイン

Media Queriesを活用したサイト制作を始めようと思っているので、ざざっと調べたことからまとめてみました。まずは基本から…

Media Queriesってなに？

簡単に言うと、デバイスのスクリーンサイズなどの条件によって、読み込むスタイルが切り替えられるCSS3の機能です。

<link rel="stylesheet" href="nanchara.css" type="text/css" media="print" />

CSS2では上記のように、「print」や「screen」などを指定して印刷向け、スクリーン表示向けといった「media types (媒体型)」を指定して、それぞれのメディア向けにCSSを書くことができました。Media Queriesはこれが拡張されたもので、「media types (媒体型)」にくわえ「width」、「height」、「color」などの「media features (媒体特性)」を指定することで、指定に当てはまる機器に対応したCSSを書けるようにするものです。

指定できる条件

代表的な「media type (媒体型)」

screen
print
projection
handheld
tv

代表的な「media feature (媒体特性)」

width / height

max/minの接頭辞が付けられる。例: max-width
出力デバイスの対象表示域の幅・高さを指定
スクロールバーがある場合その幅も含まれる ※Webkitのバグで、SafariやChromeでは幅が含まれない模様…

device-width / device-height

max/minの接頭辞が付けられる。例: max-width
出力デバイスの描画面の幅・高さを指定
スクロールバーの幅は含まれない (?)

orientation

portrait/landscapeを指定できる
接頭辞はつけられない
出力デバイスのheightがwidth以上の場合 portrait、逆の場合 landscape になる

指定の例

以下の3つの方法で指定できますが、サイト最適化も考えて、ファイルの読み込み数をできるだけ少なくするために、はじめの@mediaをオススメします。

@media screen and (max-width: 800px) { ... }
@media all and (orientation: portrait) { ... }

@import url(example.css) screen and (max-width: 800px);

<link rel="stylesheet" media="screen and (max-width: 800px)" href="example.css" />

Media Queriesのブラウザサポート

Media Queriesは古いブラウザだとサポートされいないので、それらのブラウザをサポートしたい場合は注意が必要です。

Media Queriesがサポートされていないブラウザ

IE 5+
Firefox 1+
Safari 2

Media Queriesがサポートされているブラウザ

IE9
Firefox 3.5+
Opera 7+
Safari 3+
Chrome

上記のMedia Queriesがサポートされていないブラウザでは、css3-mediaqueries.jsというJavaScriptのライブラリを読み込むことで、その他のブラウザと同じようにMedia Queriesを指定して使うことができるようになります。ちなみに、このJavaScriptだと@importを使えないそうなので、やはり@mediaを使ったCSSの指定が一番良さそうです。

まとめと参考

たとえばMedia QueriesでPC向けサイトをスマートフォンに対応させるのは邪道だ！みたいな意見もあるようですが、それについては次回まとめてみたいと思います。個人的には、ケースバイケースでベストな選択をしていくのが良いとは思っていますが。。。

参考サイト

電子書籍が図書館で借りられる時代は日本にはやってくるのだろうか？

2011/05/06 23:38 | ウェブ制作・運営ノウハウ

AmazonのKindleアプリを使って図書館の本を電子書籍で借りて読むことができる「Kindle Library Lending」というサービスが年内に公開されるらしい。これによりアメリカでは11,000以上の国内の図書館から本を借りて読めるようになるらしい。借りた本では、Kindle Booksで使える機能がそのまま使えるようになるとのことで、「図書館」の存在意義や「本」の読み方や価値観が変わっていきそうです。

このサービスはOverDriveというデジタルコンテンツのプロバイダーが提携している図書館から借りられるようになるとのことで、OverDriveのウェブサイトを観てみたら、すでにOverDrive独自のアプリもあって13,000の図書館で電子書籍が借りられるようになっているとのこと。

さすが、アメリカ。こういうのは早いですね〜。
日本でも同じことが起こったら、どんなに楽しいか。。。想像するだけで、ちょっとワクワクしませんか？
続きを読む

これくらいは知っておきたい。テキスト画像の文字詰めの基本

2011/05/05 10:00 | ウェブ制作・運営ノウハウ

先日「[Webデザイン] 文字組みについて本気出して考えてみた — Stocker.jp」という記事を読んで、すごく同感したのでご紹介。

Webデザインでは、テキストで書かれた本文は文字間の調整が難しいので致し方ないかなと思うのですが、見出し画像などの文字詰めは、ベタ組みよりもきちんと文字詰めをした方が絶対美しいと私は思います。

本当に、その通りだと思います。
続きを読む

意外と使えそう？iPhoneを埋め込んで使えるキーボード

2011/05/03 10:00 | IT・ガジェット

iPhoneやiPodをドックできる面白いキーボードがありました。見た目は新しいんだか古いんだか分からないような微妙な感じな気もしますが、機能を見たら、意外と使えるかもと思ったのでご紹介。

機能は以下のとおり

PC/Mac対応で充電、iTunesと同期が可能
iPhoneをPC/Macのマルチタッチ入力用に使える
iPhoneのキーボードとしても使える
12個のホットキーとして使用 (検索、音楽操作などのボタン)

英語ですが、詳細は以下のウェブサイトからどうぞ：
→ WOW-Keys Keyboard

人と人をつなぐ手助けをする。それが、Webデザイナーの役割

2011/04/27 1:46 | ウェブについての考察など

前回の「Webデザイナーに必要な知識とは？」に引き続き、Webデザイナーの仕事についてもう少しだけ考えてみた。

「Webデザインの仕事ってなんだろうなぁ？」と、改めて考えていたら、
ふと、そいうえばWebデザイナーって「人と人をつなげる手助けをする仕事」だよなと、思いました。

「なにか」を人に伝えたい、「なにか」を人に届けたいと思う人がいる。
そして、その「なにか」を求めている、必要としている人がいる。

Webデザイナーがやっている仕事というのは、そんな人たちをうまくマッチングさせ、繋げる役割を果たすWebサイトを作ること。

言葉やビジュアル、「ウェブサイトを使う」体験を通して、伝えるべきことを表現する
発信側が伝えたことに対して、受信側が行動を取れる仕組みを提供する
発信側と受信側のコミュニケーションにブレがないか確認する仕組を提供する

これらの仕事は、すべて「人をつなぐ」ための創意工夫です。
伝えたい側の意志や目的を正確に汲み取り、それを受け取る人により分かりやすく、より効果的にお届けする。
Webデザイナーとは、人と人との間に立って橋渡しをする役割をになっているのだと思います。

だからこそ、前回の記事で書いたようにWebデザイナーは「セルフレス」で「透明な存在」でなければならないと思ったのでした。

Webデザイナーに必要な知識とは？

2011/04/26 10:15 | ウェブについての考察など

「これからのWebデザイン教育 – could」という記事を読んで思うところがあったので簡単にメモ。

人のためにウェブサイトを作るWebデザイナーは、セルフレスでなくてはならないと最近思っている。制作をお願いする側から見たら、ある意味透明な存在。その反面、誰かの心に残るものを作るという意味で、色も出せないといけない。透明てありながら色を持つ。相半することをバランスよくできないといけない職種だと思う。

また、Webデザインとは体験をデザインすることだと考えると、人の行動や心理、また人の生活の場である自然や物理についても知っている必要がある。それに加え、ビジネス全般、マーケティング、統計などの知識も持ち合わせている必要があると思う。

Webデザイナーをどういう定義で語るかにもよると思うけど、Webサイトを作るにはそういう知識が必要だと思う。そして、たくさんの知識と経験が必要な職業だなぁと思わせれる今日この頃でした。

メールの返信は3行で – メールのやりとりが多い人のための3行ルール

2011/04/25 10:00 | ウェブについての考察など

1日に何十件ものメールのやりとりをしていると、返信は短く端的にしないと受信箱にメールがたまってしまいます。ただ、短いとそっけなくなってしまって相手にちょっと申し訳なく思う時もあります。そんなときに使えそうなサービス（？）を見つけたのでご紹介。

「短いメールはわたしのポリシーなんです」ということをお知らせするためのちょっと面白いサイトです。
→ http://three.sentenc.es/

やり方は簡単。
続きを読む

たしかに、MacのControlキーは便利だった

2011/04/23 13:53 | IT・ガジェット

「Controlキーを使いこなせばMacの作業効率は恐ろしく上がる! 覚えるべき7つのショートカットキー」という記事で便利なショートカットが紹介されていたので覚え書き。コーディングをしている際などに結構使うので便利です。

特に気に入ったショートカット

Control + K	カーソルの右側の文字から行／段落の末尾までを削除
Control + Y	Control + Kで削除した文字を戻す

Control + A	現在の行／段落の先頭に移動
Control + Y	現在の行／段落の末尾に移動

緊急時のウェブサイト運営についてまとめてみた

2011/04/19 0:16 | ウェブ制作・運営ノウハウ

3月11日に起こった地震のあと、企業のウェブ担当者や運営を請け負っている制作会社の方々は、緊急対応に追われた方も多かったのではないでしょうか？電話やメールが通じないため、お問い合わせはできない。でも、ウェブサイトは見られる。そんな状況のなか、ウェブサイトで発信する情報が重要な役割を果たした企業も多かったと思います。
続きを読む

Pages: 1 2 ... 10 11 12 13 14 15 16 17

「Responsive Images」の仕組

必須条件

ブラウザ・サポート

ライセンス

参照

Twitter

JavaScript版のTweetボタンのアンカータグ

仕様詳細ページ

例

はてなブックマーク

タグの種類

仕様

例

Google+ボタン

仕様

目次

CSSスプライトのしくみ

有名サイトのスプライト画像の例

Google

YouTube

Facebook

CSSスプライトのメリット・デメリット

メリット

デメリット

スプライト画像の作り方

スプライト画像を表示するためのHTMLとCSS

サンプル

スプライト画像

HTML

CSS

最後に…

SVGスプライトについての記事

画面サイズ幅のブレイクポイント一覧

emの場合

remの場合

で、ブラウザサポートは？

Mobile Awesomeness

Media Queriesってなに？

指定できる条件

代表的な「media feature (媒体特性)」

width / height

device-width / device-height

orientation

指定の例

Media Queriesのブラウザサポート

Media Queriesがサポートされていないブラウザ

Media Queriesがサポートされているブラウザ

まとめと参考

参考サイト

機能は以下のとおり

特に気に入ったショートカット