Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
複数のブラウザで一度にJavaScriptのテストを行う
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第5回目の本稿は、JavaScriptのクロスブラウザのテスト方法をjs-test-driverを使って説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 複数のブラウザでのJavaScriptのテスト 前回までは、主にテストコードの書き方について説明してきました。今回からは、テストの実行環境についての説明をします。 JavaScriptの実行環境は、クライアントサイドはブラウザ
首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察
首相官邸の公式ホームページが2012年4月2日、リニューアルされた。 これが「お金をかけすぎている」とインターネット上で批判の嵐となっている。増税や公務員削減などが実施されようとしている中、無駄使いではないかという声が多くあがっているのだ。 首相官邸HP、リニューアルに4500万円 ネットで怒りの声 「もっと安くできる」 – J-CASTニュース この記事ですが、ネット上での「高い」という声は一般消費者感覚としては理解出来ますが、Web業界で働く私の周囲のリアルな同業者からも、ネット上の一般の方と同じように「高い」「騙されてる」「金のムダ使い」というような意見が出まして、ちょっと違和感を覚えました。 また一方で、同業の方でも実際このクラスの規模の案件を受託しているような受託業者さん界隈からは「これくらいはかかる」「この金額以下だと受けられない」という声も聞かれました。 私は後者の声に同感で
HerokuでWebアプリ開発を始めるなら知っておきたいこと(1) 無料のスペック - アインシュタインの電話番号
「HerokuでWebアプリ開発を始めるなら知っておきたいこと」シリーズの第1回では、無料の範囲で使えるHerokuの基本スペックについて書きます。このシリーズのまとめページはこちら。 Herokuとは まず本題に入る前に、さらっとHerokuについてご紹介します。 Herokuは、ヘロクと読みます。HeroとHaikuを掛け合わせた造語だそうです。私は「ヘ↑ロ→ク↓」と発音してしまいがちですが、他の人の発音を聞いていると「ヘ→ロ→ク→」が多いような気がします。 2011年7月7日に行われた「Heroku-ja meetup #1」というイベントでは「ヘ↑ロ→ク↓」と発音する人が多かったです。 Herokuを誤解を恐れずにものすごく大雑把かつ極端に説明するといまどきのレンタルサーバーやいまどきのホームページスペースです。2010年代のジオシティーズです。年齢がバレますね。 もう少し技術者向
Smarty日本語マニュアル
Table of Contents 序文 I. はじめに 1. Smarty とは? 2. インストール 必要条件 基本的なインストール 拡張セットアップ II. テンプレートデザイナのための Smarty 3. 基本構文 コメント 変数 関数 属性 ダブルクォート内に埋め込まれた変数 演算子 Smarty の構文解析を回避する 4. 変数 PHP から割り当てられた変数 連想配列 配列のインデックス オブジェクト 設定ファイルから読み込まれた変数 予約変数 {$smarty} リクエスト変数 {$smarty.now} {$smarty.const} {$smarty.capture} {$smarty.config} {$smarty.section}、{$smarty.foreach} {$smarty.template} {$smarty.version} {$smarty.lde
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
