Googleは「お決まり」が嫌い
まず、このUS Patent Application（合衆国 特許申請）を見てください。 ⇒ Systems and methods for analyzing boilerplate つい最近、Googleが申請したばかりのパテント（特許）です。 何が書いてあるかというと、「boilerplate（ボイラープレート）」の取り扱いについてです。 boilerplateというのは、僕は初めて聞いた言葉ですが、もともとは活版印刷に使われた鋼板でできた「鋳型（いがた）」のことだそうです。 鋳型ですから、まったく同じものができあがりますよね。 ここから派生して、「お決まりのもの」、さらには「定型文」という意味でも使われるようになりました。 ITの世界でも使われる用語で、「定型書式」、「テンプレート」とを表すときに用いられます。 Googleのボイラープレートに話を戻します。 ウェブページにもボイラ
HTMLのcolspanとrowspanのどっちがどっちか覚える方法
わかります。ものすごくよくわかる。 htmlのcolspanとrowspan、どっちがどっちだかいつもわからなくなって間違える。 — akiyan (@akiyan) 2010年11月12日 ということで迷ったときに思い出す方法の提案を。 ちょっと長い話になるけど、こういうものはイメージで覚えるのが一番なので映像を思い浮かべながらいきましょう。 colspan で覚えると楽そうです。実際よく使うのも colspan だし。個人的には。 colspan の “col” は “column” =「コラム / カラム」の略ですね。 col. コル。コラム。新聞や雑誌の「コラム」もこれです。 もともと column とは円柱のことで、新聞（英字新聞を想像してください）の欄も縦長に区切られていることから column と呼ばれるようになったんだと思いますたぶん。 はいここで英字新聞を想像してください
レスポンシブ化するなら知っておきたいtable-cellの使い方 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
こんにちは、ECプロデュース部の岡本です。 今回は「要素を段落ちさせずに並べること」ができる便利なプロパティ「table-cell」について紹介します。 RWDグローバルナビの課題：段落ち サイトをレスポンシブする際、必ず問題になるのが「グローバルナビの扱い方」です。 floatやinline-blockで作成した場合、全ての要素で単位を「％」に指定しないと「段落ち」が発生します。 段落ちの例 しかし上の画像のように一部のコンテンツの横幅を固定化させたいケースもあります。 こんな時に使いたいのが、「table-cell」です。 tableレイアウトを実現する：table-cell table-cell実装例 「table-cell」は要素を「tdタグ」と同じにするプロパティで、displayにて設定します。 親要素に「display:table」を設定する必要がありますが、この２つだけでほ
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
target=”_blank” の正しい使い方講座 » SEO Japan
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 言われてみると、余り深く考えずに使っていたことってありますよね。この記事タイトルを見て、自分たちが普段やっていることが正しいのかどうか、確かめてみたくなりました。 — SEO Japan リンクにtarget=”_blank”を使用し、そのリンクを新しいウィンドウで表示してサイト上に訪問者をキープしておくようにするサイトはますます多くなっている。 実を言えば、私もこれを使っている。なぜなら、訪問者はそれらのリンクを新しいウィンドウで開くFireFoxブラウザを使用していると想定しているからだ。 しかしこれは本当に賢いやり方なのだろうか？ Target=”_blank” を使っても良い時、使うべき
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
SCRAPBLOG : Jetpack SDK 0.5 の Selection API
Jetpack SDK 0.5 で追加された Selection API を使用すると、選択範囲の取得や変更などが可能となります。 Selection API を使用するためには、はじめに require 関数でモジュールをインポートします。 var selection = require("selection"); 選択範囲の取得 Selection API の text および html プロパティで選択範囲の文字列あるいはHTMLソースを取得・変更することが可能です。また、Ctrlキーを押下しながら複数の範囲を選択した場合、 contigious プロパティが false となります。この時、 Selection API のオブジェクト自体に対して for ～ in ループで個々のサブ選択範囲（Selection オブジェクト）を取得することが可能です。 以下は、選択範囲が複数ある場
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
オンラインでHTMLを編集、リアルタイムにプレビューできる「HTML Instant」
Dreamweaverなどの専用ソフトがあれば事足りますが、そういった環境がない場合に、HTMLソースの出来栄えを確認したいことだってありますよね。 今回はそんなとき、オンラインでHTML編集でき、かつリアルタイムにプレビューできるエディタをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! リアルタイムにプレビューできるオンラインHTMLエディタ「HTML Instant」 「HTML Instant 」は、HTMLタグを記述すると、その場でリアルタイムにプレビューを表示するオンラインHTMLエディタ。 リッチテキストエディタにもなっているので、タイピングすることなくHTMLタグを挿入したり、画像を掲載（URL指定）することもできます。 リアルタイムにHTMLソースをプレビュー ↑画
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
HTML5 Templateのデモページ Easy HTML5 Templateの特徴 汎用性の高いシンプルなつくり HTML5の新しい要素に重点をおいて設計 HTML5対応ブラウザはもちろん、IE6, IE7, IE8も考慮 モバイルデバイスも考慮 jQuery, Google Analyticsなどよく使用されるものを配置済み [ad#ad-2] Easy HTML5 Templateの外部ファイル Easy HTML5 Templateで使用している外部ファイルです。 screen.css Reset CSSには「Eric Meyer's reset」が使用されています。 modernizr-1.6.min.js 「Modernizr」。HTML5やCSS3をサポートしているか調べ、CSSの場合はエレメントにclassを加えます。 html5.js 「html5.js」。IE9未満（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]HTML5/Canvasを手軽に扱えるようになる実用的なスクリプト -gury