Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
【ケータイ】画像のファイルサイズを50%削減するひと手間
こんにちわ。最近ソーシャルアプリやるようになったやしこです ソーシャルゲームはいま一番アツい分野！いろいろなゲームが群雄割拠です。 でも画像が重くてさくさく連打できないとゲームの爽快感が半減してしまいます。悲しいけどこれ携帯なのよね。 なるべくストレスフリーのみんなに優しいデザインをした〜い！ そんなユーザーにもエンジニアにもモテる爆軽画像への研究・発見報告です 基本の基本 画像の重さは１画面合計100k以内 PNGは使えないとおもっておk 画像にwidthとheightを指定しないのは死亡フラグ 元画像が複雑な場合ライブトレースで爆軽に 私が現在担当している英雄になりたい！は魅力的なキャラクターたちが登場する戦争ゲームです 繊細なキャラクターデザインでそれが重厚な世界観を作り出す大事なキーになっています ところがアニメ塗りと違って色数が多すぎて減量に不向きです。どうしても重くなってしまい
東京のWeb制作会社・ホームページ制作会社 | フライング・ハイ・ワークス
「フライング・ハイ・ワークス」はWeb制作・ホームページ制作会社【東京都 渋谷区】です。企業サイトやスマホサイト、ポータルサイトなど様々なホームページの制作、デザイン制作を行っており、「売上」に繋がる質の高いサービス提供を心がけています。
ルートパスで書かれたhtmlファイルをローカルで確認するには。
8月は働くよー！お盆休みってなぁに？おいしーの？ ボーナスってなぁに？それっておいしーの？ さて、Webサイトを作成するときに、ルートパス（絶対パスとまとめられる事もありますが）で記載されてたり、SSIによるインクルードをしてたり、デフォルトインデックスのファイル名（index.htmlとか）を省略してたりすると、そのままローカルで確認するには不便があったり、場合によってはそもそも確認できない訳です。 そういう場合に、じゃあどうやって確認するか。となる訳ですが、毎回テストサーバとかにアップロードして確認していたら効率が悪いので、自分のPC（Windowsとして）で確認できたら嬉しいですよね！ じゃあ、どうしたら良いかって言うと、やっぱりWebサーバをローカルで構築するのが一番良いのかなと。 そうすると、自分のPCでちゃんと見れちゃう訳です。ンマーなんて素敵！ で、Webサーバって聞くと、サ
画像のサイズを動的に指定する際の理屈を忘れがちなので備忘録 | バシャログ。
梅雨明け！バンザイ！nakamura です。 例えばユーザがアップロードした画像を決まったサイズのエリアに表示するような処理。よくあると思います。（画像を動的に生成するのではなく、img タグの height と width を動的に生成するやつです。）よくある割にいまいち理屈を忘れがちなので今日は個人的な備忘録も兼ねてエントリーします。 まぁよくよく考えてみれば何てことはないのですが、、、一応順を追って整理してみましょう。 いくつかのパターンで考えてみる 仮に横 320px、縦 240px の表示エリアがあるとして、色んなサイズの画像をその中にちょうどいい感じで表示する理屈を考えてみましょう。 縦も横も表示エリアより小さい場合 赤の点線が表示エリアで、黒の実線が実画像とします。 図のように横長の画像を表示エリア内にぴったりフィットさせる場合。直感的に分かると思いますが、横辺の長さが表示エ
Webページ内の画像を保存させない方法
ブログを始めtumblrなどのサービスがある中で、考え方自体が古いのかもしれませんが、見ては欲しいがコピーしてほしくはない、大事な写真、作品というのはあるものです。今日紹介するのはWEBページ内の画像を保存させない方法です。 あくまで簡易的なので、本当に保存しようと思えばいくらでも方法はあるのですが、参考までに記していきたいと思います。 詳しくは以下 原理から先にお話しすると、イメージタグでは無く、スタイルシートでその背景に画像を指定するという方法です。実際どうなるかと言うと以下の通り。 ドラッグまたは保存してもダウンロードされるのはダミー画像ファイルとなります。 実際のソースコードは以下の通り <p style=”background: transparent url(https://design-develop.net/wp-content/uploads/2007/12/nocopy
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
.htaccess実践活用術
現在、WEBサーバのシェアとしてはApacheが過半数を占めています。英国Netcraft社の調査によると2016年4月におけるApacheのシェアは49.15％である（active sitesにおけるシェア。参照：Netcraft: April 2016 Web Server Surveyy）。 2位のnginxを大きく引き離しています。このような世界的に人気の高いApacheをウェブマスターとして使いこなす方法として、このホームページでは.htaccessの利用法について解説します。httpd.confに触ることのできない一般のウェブマスターさんを対象に、「アクセス制限」「カスタムエラーページの設定」「MIMEタイプの設定」など実用度の高い利用法に絞って紹介します。「何をしたいか」のかを中心に、.htaccessの利用法を説明する構成になっています。
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする（変更点を日付と一緒にメモしていく）XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり／なしの統一を指定するサイトリンクの表示をチェックして調整（以降随時）Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste
URLとURIの違いとは？ パーツの構造・名称・意味も大解説！ | 初代編集長ブログ―安田英久
URL（Uniform Resource Locator）とURI（Uniform Resource Identifier）の構造の違いはご存知ですか？ Webページのアドレスを指す場合はどちらを使うべきなのでしょう。URLを分解して「https:（スキーム）」「#（フラグメント）」「?（クエリ）」「パス（path）」などの名称・意味についても解説します。 今日は、ノウハウというよりは、豆知識を。「URL」という呼び方と「URI」という呼び方がありますが、どう違うのか、あなたはご存じですか？ Webページのアドレスを指す場合は、どちらを使うべきなのでしょうか。 URLとURIは何が違うのか結論から言うと、URIとURLは同じものではありません。「URI」のほうが広い概念で、「URL」はURIの部分集合です。同様の仕組みに「URN」というものがあります。 その3つを別のものにたとえてわかりや
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
今年は「表示速度最適化(RSO:(Web Page)Rendering Speed Optimization)」の元年になると思う | Webディレクションやってます blog
Webディレクターとして名村晋治がプロジェクトマネージメントやディレクション業務に当たっている時に感じている問題解決の手法やセミナー等で話をしている内容、自身が使っているプロマネにおけるツールなどWebディレクションに関する情報の紹介しています。 2年ぐらい前からじょじょにだと思うのですが、サイトの「表示速度」について言及される事がネットの中で増えてきているかと思ってます。 もちろん、「○秒以内に表示しないとユーザーは逃げる」的な表示速度論ってのは大昔からあって、別のそれ自体は目新しい事でもなんでもありません。 ただ、その表示速度に関するレベルが冒頭の2年ぐらい前から結構高いレベルで争われるようになってきている感覚があります。 それは海外の方とチャット等で技術トークを結構しているのですが、その場でもやっぱり表示速度の向上に関する話題が増えてきている事でも実感がありました。 といった事から、
［書き方］ホームページやブログにコピーライトを表記
ホームページやブログを運営する時、コピーライト（copyright）の正しい書き方が気になりますよね。 他の人のサイトを見ると「Copyright (C) 2002-2008 ○○○○ All Rights Reserved.」と言った感じの文字が、大抵の場合でページの一番下に表記されていると思います。 [コピーライトマーク](C)とマルCの違いと書き方でご説明したいと思います。 次に「2002-2008」の部分は、2002年にそのページが初めて公開されて、最新の更新は2008年ということになります。 次の「○○○○」の部分には、作者または企業名を記入します。 誰が作者であるか分かるように記述すればよいので、そのホームページのタイトルやドメインを表記する方法でも良いと思います。 また、更に分かりやすくするために、この文字部分を使ってリンクする方法がよく使われているようです。 最後に「All
[CSS]テキストを画像の下に回り込ませないようにするスタイルシート
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法
<textarea name="code" class="css" cols="60" rows="5"> selector { opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */ } </textarea>
![[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
Web標準化Tips - Web標準普及プロジェクト
特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Design Archives
AndroidのNFC機能でFeliCaの読み書きをする | −ゆめログ− | ゆめみスタッフブログ
http://blog.e-riverstyle.com/2010/01/web10webtips.html
