これから (X)HTML をはじめて勉強する方向けのHTML4.01/XHTML1.0,1.1のリファレンスです。
After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests. Because it is technically not possib
URL(Uniform Resource Locator)とURI(Uniform Resource Identifier)の構造の違いはご存知ですか? Webページのアドレスを指す場合はどちらを使うべきなのでしょう。URLを分解して「https:(スキーム)」「#(フラグメント)」「?(クエリ)」「パス(path)」などの名称・意味についても解説します。 今日は、ノウハウというよりは、豆知識を。「URL」という呼び方と「URI」という呼び方がありますが、どう違うのか、あなたはご存じですか? Webページのアドレスを指す場合は、どちらを使うべきなのでしょうか。 URLとURIは何が違うのか結論から言うと、URIとURLは同じものではありません。「URI」のほうが広い概念で、「URL」はURIの部分集合です。同様の仕組みに「URN」というものがあります。 その3つを別のものにたとえてわかりや
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか? ヒートマップツールを使う
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
使えそうなCSS3等を使ったサンプルや各種CSSリソース集をまとめてみました。 CSS3に関しては対応ブラウザはまだ主流ではないとはいえ、CSS3等も徐々に学んでいきたいですね。 Text Blocks Over Image | CSS-Tricks 画像上にかっこよく文字を合成するチュートリアル →デモページ ZURB ? Super Awesome Buttons with CSS3 and RGBA css3の機能を使ってリッチなボタンを作成するチュートリアル Carsonified ? 30 Essential CSS3 Resources CSS3を学ぶのに使えるリソース集 CSS Gradients via Canvas | Weston Ruter Canvasを使ったCSSグラデーション作成 The Definitive Guide to Using Negative Ma
Twitterをサイトに組み込むチュートリアル&サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新&検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示&検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP&AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
About Viewlike Viewlike was a service that helped you check out how your website looked in the most popular resolution formats and screen sizes. In the past the service supported desktop, Laptop, Smartphones and tablets! To use this service you just had to type your URL in the text box above. The service was powered by Ajax & PHP backend and there was no need to download anything! Unfortunately, t
ブラウザのタイトルバーや、検索サイトの結果画面などに表示されるtitle要素内の表記規則のパターンをCSS Tricksから紹介します。 What's The Best Way To Handle Page Titles? title要素内の表記規則:第一階層の場合 [サイトの名前] 例:コリス [サイトの名前] - 短いタグライン 例:コリス - Web制作に関する最新情報をお届け [サイトの名前] - キーワード 例:コリス - ウェブデザイン、HTML、CSS、JavaScript title要素内の表記規則:第二階層の場合 [サイトの名前] - [記事のタイトル] 例:コリス - jQueryのプラグイン33+1選 [記事のタイトル] - [サイトの名前] 例:jQueryのプラグイン33+1選 - コリス [記事のタイトル] 例:jQueryのプラグイン33+1選 [サイトの名前
「商業利用もOK! Google Mapsについて知りたいこと」に続くGoogle Mapsインタビューの後編は、数多く存在するGoogle Maps関連のAPIや機能のうち、あまり知られていないものや新しいものをグーグルのソフトウェアエンジニア、淺川浩紀さんに聞いた。 Code Playgroundでオンライン編集 まずは、即効性のあるものからいこう。 Googleが持つ多くのAPIは、Webブラウザ上からJavaScriptによって呼び出せる。JavaScriptはコンパイルの手順なしに書けば実行できるので手軽である。しかし、だからAPIを試すのも簡単だとは限らない。例えば、Google Maps APIなら正しいGoogle Maps APIキーを用意したり、適切な文書にプログラムを埋め込んだりする作業を行い、それをWebブラウザで開かねばならない。
Cheat Code: a jQuery Plugin サイトにコナミコマンドを超簡単に実装するためのjQueryプラグイン「Cheat Code」。 上上下下左右左右BAでおなじみのコマンド。こうした特殊コマンドをサイトに埋め込みたい場合、結構大変そう、という感じになりますが、Cheat Codeプラグインを使えば、必要なライブラリを読み込んだら、以下のような cheatCode メソッドにオプションを渡してあげることで簡単に実装できます。 <script type="text/javascript"> $(function(){ $(document).cheatCode({ code : '38,40,37,39', // キーコードのカンマ区切り定義 message : 'Up,Down,Left,Right', activated : function(){ // コールバック
RewriteEngine on # tumblr.comに掲載されたリンクからのアクセスに一時的な別ページを表示する RewriteCond %{HTTP_REFERER} tumblr.com [NC] RewriteRule ^.* /notumblr/notumblr.htm [L] #「Tumblr/1.0 RSS syndication (+http://www.tumblr.com/) (support@tumblr.com)」 #tumblrが画像ファイルへアクセスした場合に別の画像を出力する <FilesMatch ".(gif|jpg|png)"> RewriteCond %{HTTP_USER_AGENT} ^Tumblr RewriteRule ^.* /notumblr/notumblr.png [L] </FilesMatch> #tumblrがアクセスしてきた
3月の下旬にIE8がリリースされてから一月以上が経過しましたが、シェアの推移はどうなっているのでしょうか。 Net Applicationsによる4月の統計では、先月より2%ちょっと増加し3.96%となっています。その代わりと言ってよいのかはどうか分かりませんが、IE7が2%減少しています。IE7は1%弱の増減が常だったので、IE8への乗換えが少しずつではあれ起こっているのではないかと推測できます。 さて、統計のとり方にもよるのですが、IE8のシェアは実際の利用者よりも少なく出てしまう可能性が存在します。というのも、IE8では互換表示が有効にされると、User Agentの文字列も変更されてしまうからです。 Internet Explorer 8 の User-Agent 文字列で詳しく触れられていますが、IE8では通常、次のようなUser Agent文字列が送信されます。 Mozilla
かなり釣りエントリーっぽいタイトルですが、企画を作る際に使っているツールについて聞かれたのでまとめてみました。知っている人にとっては当り前の内容ですが、使い方によってはコストをかけずにコンシューマーのニーズと競合のスキを知ることができ、プレゼンテーションに役立つ有益なツール・サービスのリストです。 ・Google キーワードツール キーワードに対するGoogleでのおおよその月間検索数を知る事ができます。関連ワードも表示され、複数ワードが入力できるので有効なキーワードの絞り込みなどに使えます。言語や地域も設定できるので、海外の検索動向も知ることができます。また、特定のURLからページ内に含まれるキーワードを抽出する事も可能です。 https://adwords.google.co.jp/select/KeywordToolExternal ・Ferret-Plus 同様のツールですが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く