HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
Google、ドメイン間の rel=”canonical” タグのサポート開始
Googleは、かねてからアナウンスしていたように、ドメインをまたぐrel=”canonical”タグのサポートを開始したことを公式アナウンスしました。 ※ rel=”canonical”タグって何？、何のために使うの？ という読者さんは、まずこちらからお読みください。 「重複コンテンツ・重複URL」のおさらい rel=”canonical”の正規化で、重複コンテンツを撃退 Google, Matt Cuttsによるrel=”canonical”タグの解説ビデオ もともと、rel=”canonical”タグは、同一ドメインまたはサブドメインの中だけで有効でした。 ”www.example.com”と”example.com”を正規化することはできましたが、 ”www.example.com”と”www.example123.com”を正規化することは、できなかったのです。 301リダイレク
モバイルサイトを作るときに参考になるサイト – creamu
Mashableで、モバイルサイトを作るときに参考になるサイトが紹介されています。 いくつかご紹介しますね。 Mippin RSSを使ってサイトのモバイル版が作れるサービス WPtouch WordPressをiPhoneやAndroid携帯に対応させてくれるプラグイン Mobify デバイスごとの表示をリアルタイムに確認しながらCSSを編集できる。A List Apartがこれで作られた iPhone Compatible CSS Layouts iPhoneに対応したCSSレイアウトを配布 Smashing Magazines’s Mobile Design Showcase 9月にSmashing Magazineがまとめた、iPhoneデザインまとめ CSSiPhone iPhoneサイトのCSSギャラリー A List Apartの例はとてもいいですね。 一度見てみてください。
Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト - かちびと.net
題名の通りですが、これから Webデザインに手を出そう、 という方の為に日本語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp（Photoshop代替ソフト）とInkscape（Illustrator代替ソフト）で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1，2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを
WordPressでWebサイトを構築するまでの手順リスト - かちびと.net
私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので本当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストール DB作成 WP最新版をダウンロード wp-config.phpをDBに合わせて変更 接頭語も変える（wp_ → example_） FTPソフトでサーバーにインストール ログインして管理者権限のユーザーを作成 作成したユーザー名で再ログイン adminユーザーを削除 ダッシュボードの不要なコンテン
ウノウラボ Unoh Labs: iモードブラウザ 2.0まとめ
こんばんは、五十川です。 ご存知の通り、5月以降に発売開始されたNTTドコモの携帯電話の殆どには、新しいiモードブラウザ 2.0が搭載されています。iモードブラウザの大幅な仕様の拡張はi-XHTMLの登場以来ということになりますが、iモードの登場から10年経って登場した新しいブラウザは、i-XHTMLのときよりも遥かに大きな、過去最大の変化を遂げています。 iモードブラウザ 2.0の詳細は、ドコモ公式のiモードブラウザ 2.0にまとめられています。以下では主要な変更点を確認していこうと思います。 キャッシュ容量拡大 1画面あたり読み込めるデータの最大量が、従来の100Kバイトから500Kバイトに、大幅に拡大されました。ご存知の通りiモードの場合この値は、画像などの外部リソースもすべてひっくるめた値ですが、iモードブラウザ 2.0では、新たにCSSファイルやJavaScriptファイルも外部
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
.htaccessで使える16の技:phpspot開発日誌
16 Useful .htaccess Tricks and Hacks For Web Developers : Online Marketing Blog - Website Development & Website Marketing tips and Strategies .htaccessで使える16の技が色々と紹介されていました。 1. ErrorDocumentでエラーページ指定の方法 ErrorDocument 401 /error/401.php ErrorDocument 403 /error/403.php ErrorDocument 404 /error/404.php ErrorDocument 500 /error/500.php 2. Timezone設定 SetEnv TZ America/Houston 3. IPブロッキング allow from al
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
キーワード使用の要因 - グーグル&ヤフーのSEO 57要因 日米プロの重要度&コメント付き | Web担当者Forum
SEOで効く! 検索エンジンが順位を決定する57個の要因 日米SEOプロ60人のグーグル&ヤフー対応版キーワード使用の要因 - グーグル&ヤフーのSEO 57要因 日米プロの重要度&コメント付き [特集] グーグル&ヤフーに完全対応 SEOで効く順位決定57個の要因―保存版 日米のSEOプロ60人が重要度を評価 検索エンジンで上位を獲得するポイント SEOするなら手放せない、SEOmozの「検索エンジンが順位を決定する53の要因」。あの大人気記事に日本のSEOプロがYahoo! JAPAN向け評価を加えた日本のSEO要因リストが完成！ さらに、雑誌版の記事では省略されていた、SEOプロ全員分のコメントがウェブ版記事では読める！ 検索エンジンが検索結果にページを表示する順位を決定する仕組みは非常に複雑になっており、200個以上の要因が使われているといわれている。 この特集では、日米のSEOプ
ケータイ端末プロファイルデータ（無償版） | インターネットメディア総合生活研究所
SERVICE インプレスR&Dは、電子書籍とプリント・オンデマンド（POD）技術を利用することで、デジタルファーストの次世代型電子出版プラットフォーム「NextPublishing」を開発。電子書籍と印刷書籍（紙の本）の同時制作、過剰在庫の解消を実現し、「持続可能な出版」をさまざまな形で提供しています。 一般には、専門的な書籍の発行や新しいテーマの企画は販売部数が限られ、収益を上げることが難しくなります。しかしインプレスR&Dでは、NextPublishingを使用することによりこのハードルを越えることが可能になりました。弊社は、優れた個人や組織が持つ貴重な知識・知見をもっと早く、もっとたくさん世に出したいと願い、積極的に企画・原稿を募集しております。
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
カスタム検索でオリジナル検索エンジンを作って広告収入も得る方法 | Google Mania - グーグルの便利な使い方
カスタム検索でオリジナル検索エンジンを作って広告収入も得る方法 管理人 @ 3月 5日 01:11pm AdSense, 検索Tips 今日は、グーグルのカスタム検索エンジン（Google Custom Search Engine）の作り方をご紹介します。 カスタム検索は、よくブログやホームページのサイト内検索に利用されているので、知っている人も多いと思います。 カスタム検索は、ただサイト内検索を作るだけではなく、例えば地域のウェブサイトのみを検索対象にして、ニッチ検索を創ったり、よく訪れる掲示板のみを検索対象にしたりと、利用の仕方によっては、かなり活用することができます。 また、アドセンスアカウントを持っている場合は、カスタム検索結果に表示される広告から収入を得ることもできます。 便利なオリジナル検索エンジンが無料で作れて、しかも広告収入まで得ることができるのです！ 当ブログに設置してい
これだけは押さえておきたいSEO対策 - livedoor ディレクター Blog
こんにちは、livedoor Blog担当の坪田です。 以前に「HTMLタグを使わないSEOの話」というエントリーがありましたが、今回は新規ウェブサイト立ち上げ時や、リニューアル時に押さえておきたいSEO対策をまとめてみました。 「SEO」は、多くのマーケティング担当者を魅了し、盲目にさせてきました。 私も何か有効な手段はないものかと、ティッカーに「SEO」の文字が表示される度にクリックしては、とりつかれた様にブックマークしていました。 経験のある方も多いと思いますが、SEO について調べると情報が膨大すぎて正しい答えが見つかりません。というよりもその時・サイトに応じてケースが異なるため、「どうすれば順位があがるのか？」という知りたいことの結論がでないのです。 私は、基本的な施策を忠実に行い地道な効果測定の繰り返しを行うことが、上位表示の秘訣だと考えています。ただ、SEO 対策は長期的な運
コンテンツと内部リンク用にキーワードを適切に配分するための図表メソッド | Moz - SEOとインバウンドマーケティングの実践情報
先月から取りかかった新しい仕事では、サイトの全ページとアーキテクチャについて知っておく必要があった。そのほかに、各ページの最適化で用いるキーワードも選ぶ必要もあった。そこで私は、サイトの各ページで内部リンク、アンカーテキスト、metaタグ、本文それぞれに、一貫性を保ってキーワードを当てはめていくのに役立つ図表を作った。 内部リンク、アンカーテキストおよびキーワードの作業で一貫性が重要なことを理解するのに、以前Randが書いた記事が役に立ったわ。「検索順位の90％を決定付ける4つの要素（個人的見解だけどね）」と、「ビッグキーワード／スモールキーワードを狙うベストプラクティス」（英文）の2本。まだ読んでいない人は、読んでみることを強くお薦めする。 図解サンプルここでは、サブページが3つあるウェブサイトの最適化に取り組んでいると仮定しましょう（3ページより多くなるとPowerPointで作る図が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パスワード認証
HTML5, きちんと。
実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips (単行本)
