目指せ効率化！レスポンシブWebデザインを制作する際に役立つサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのももこです。 直近は、雨の降る鎌倉でアイドルに大量の和菓子を渡す忙しい日々を送っております。 今回はレスポンシブWebデザインのサイトを制作する際に役立つツール、Webサイトを6つご紹介します。 The Responsinator iphone・Android・iPad・Kindleの枠にそれぞれWebサイトを嵌めこんで表示してくれます。シンプルなデザインの枠が素敵です、縦横表示を同時に見れるのも利点ですね。 http://www.responsinator.com/ Responsive Web Design Test Tool モニターの大きさを変えてリアルタイムにレスポンシブの動作確認が出来ます。 画面にメモリがついており、右上に画面サイズも出ているので使いやすいです。 スマートフォンからデスクトップまで各製品の画面サイズも用意されており、お手軽に利用できます
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (3/3)
*1 768ピクセルでは、ネットブックのようなタブレット以外の端末も指定範囲に入ってしまう。しかし、レスポンシブWebデザインのコンセプトはデバイスベースではなく、ウィンドウサイズベースでデザインを調整することだ。あくまでウィンドウサイズを基準に、そのウィンドウサイズに適したレイアウトを提供する。 1. ピクセルでデザインして%に変換する レスポンシブWebデザインは、width, padding, margin を%単位で指定するリキッドデザインの一種だ。 width, padding, marginを%単位で指定してレイアウトを組めればいいのだが、実際には非常に難しい。そこで、一度ピクセル単位でレイアウトを指定してから、width, padding, margin を % に変更していこう。 たとえば、Webページ全体の幅であるbody要素が960px、その子要素であるheader要素
Webサイト内の電話番号が勝手にSkypeの番号ボタンに置換されるのをmetaタグで制御する
少し気になったので調べたんですが、 ブラウザにSkypeのアドオンとかエク ステンションを入れていると、Web サイトやGoogleの検索結果の電話番号 が勝手にSkype用の起動ボタンに置換 されます。 今更な話ですみません。よくわかってないんですけど、SkypeをインストールするとChrome（Firefoxも？）にもエクステンションが追加されるようです。インストール時にチェック項目にあったかどうか覚えてませんけど。 まぁそれ自体はいらなければ削除すればいいのでどうでもいいんですが、Webサイト内まで一方的に変えられるのはあまり好きじゃないのでWebサイト側で制御できないかなとふと思って調べたら出来るみたいなのでメモ書き。 電話番号が置換される これは以前書いたトトロのシュークリームの記事なんですが、このようにSkypeのボタンに置換されています。 [note]キャプチャは表示テストで
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
IE6でhover,active,focus擬似要素を使う為の「csshover」
IE6でhover,active,focus擬似要素を使う為の「csshover」 Check Tweet 配布元：whatever:hover ライセンス：LGPL IE6はa要素以外は:hoverや：active、：focusなどのダイナミック擬似クラスに対応していません。それを解決するのがcsshoverというJavaScriptライブラリです。 csshoverの使い方 配布元よりcsshoverの.htcファイルをダウンロードします。:hover と :activeに対応した1.4系、1.4系に:focusを追加した2.0系がありますので、利用したい擬似クラスに合わせてダウンロードしてきてください。 ダウンロードしたファイルはスタイルシート内でbody要素に対して読み込みます。 body{ behavior:url("csshover2.htc"); } .htcファイルのパスは
共通の「ヘッダ」と「フッタ」を読み込む::streetcar weblog 第二世紀
streetcar weblog 第二世紀 このブログからのお知らせです。 2010-10-04【障害のお知らせ】 Googleマップの仕様(Google Static Maps API)が変わった為、現在迄に貼り付けた地図の、大部分が表示されなくなりました。 2009-07-01【障害のお知らせ】 7月1日・朝7時頃、ドメイン同期(シンボリックリンク)設定の失敗により、サイトの大部分が消失しました。同日・夜20時頃までに、大部分をバックアップファイルから復旧しました。 ◎ 復旧できたサイト「ホームページ」「ブログ」 × 復旧出来なかったサイト「wiki」「試作・新ホームページ」 2008-11-17【保守のお知らせ】 サーバー内・フォームメールcgiの動作が不安定なため、外部無料フォームメールサービスを組込みました。 see more Lolcats and funny pictures
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
