web制作に関するuedahiroyoshiのブックマーク (236)

  • Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」:phpspot開発日誌

    Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 2011年01月28日- WordPressにソーシャルブックマークボタンを楽々設置:WP Social Bookmarking Light | NINXIT-BLOG Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 インストールして有効にすればすぐさま、次のようなボタンを記事上や記事下に設置できるプラグインです。 管理画面から並びを変えたり、ボタンを追加したりすることが容易にでき、はてぶ・ツイッター・facebookだけ、という感じでチョイス可能。 普通に設置しようと思うと大変ですが、プラ

  • 「クリエイティブな記事」を作るための3つの条件

    「クリエイティブな記事」とは一体なんだろうかと言う事について考えてみましょう。 そもそもクリエイターと呼ばれる人たちが、育み生み出す作品と言うものにはどんな共通点があるかを考えた事はありますか? 私はデザインと同様にテキストも創造されるものだと考えています。 多くのブロガーが多くの記事を作っていると思うのですが、私も毎日大量の記事を見ているなかで、これはクリエイティブだなと感じる記事にたまに出会います。 今回はこうした記事を作るために、何が必要なのかを考えてみたいと思います。 クリエイティブを理解する ブログ記事のクリエイティブ性を問われる場合、真っ先につけられるコメントがあります。 それが 目のつけどころが違う切り口が斬新そこを突っ込むか という言葉です。 特に「切り口が素晴らしい」という言葉は日のブロガーによく使われる褒め言葉だったりします。 切り口が素晴らしいという記事はそれこそが

    「クリエイティブな記事」を作るための3つの条件
  • 日本向けのウェブデザインというのはあるのか? – 秋元

    進出に興味のある海外企業や外国人から質問されることがあるので、まとめてみたいと思います。 僕はウェブデザイナーじゃないので、プロの方から補足や突っ込みがいただければとても嬉しいです。 [更新 2011-02-01] コメント・ツイッター・はてブからの意見を反映させました。 ある程度まとまったら英語にしてAsiajinにも書こうかと思います。 日向けにウェブサイトを作るときに特別しないといけないことはあるのか? 「メニューの文字をGoogle Translateで全部日語に置き換えたけど、これでいいかな? 他にすることある?」 – 機械翻訳は使い物にならない 英語-フランス語、とか英語-スペイン語、のノリで機械翻訳を使っても、あなたが想像するレベルの日語には決してならない # 英語に再機械翻訳してのチェックは必須だが、それでも日語訳のおかしさが見えてこないケースもある – フォン

  • ウェブページを完全に削除したときは404よりも410のHTTPステータスコードを返すといい

    今日は技術的なトピックを扱います。 通常、ウェブページがもう存在しなくなったときは404のHTTPステータスコードを返します。 するとしらばくすれば検索結果からも消えます。 しかしGoogleウェブマスターツールでは、ずっと以前になくなったはずのページが「クロールエラー」セクションで「見つかりませんでした」として表示されることがあります。 理由は、404エラーを返したページが今でもないままなのか確認するためにGooglebotが再訪問するためです。 404は“Not Found”(見つからない)で、ページがなくなったことではなくアクセスできない状態を示します。 アクセスできない理由は、ページを削除したことではなくネットワークの障害やサーバーの不具合による一時的なものかもしれません。 通常のページよりは頻度が低いですが、その404を返したページを再び訪問して相変わらずないままなのかそれとも再

    ウェブページを完全に削除したときは404よりも410のHTTPステータスコードを返すといい
  • スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。

    禁煙してから3ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます

    スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
  • デザイン思考で考える7つのこつ「デザイン思考が世界を変える」

    ナイキはアスリートの行動を分析してiPodで一億キロ以上のランニングを促進した。 appleはモバイル端末のありかたをデザインしてiPhoneで爆発的ヒットを生んだ。 顧客をより深く理解できれば、より効果的にニーズを満たすことができる。 これは、もっとも信頼できる長期的な収益源であり、持続可能な成長源である。 時代は大量生産からサービスや経験へと移行している。 求められているのはデザイン思考。 地図を塗り替える飛躍的な発想が求められている。 「デザイン思考が世界を変える」にその方法が書いてあったので自分なりに書いてみる。 「何を?」ではなく「なぜ?」を問う 問題の枠組みを見直し、制約を定め直し、よりイノベーティブな答えを切り開く機会となる。 車ができる前、人々は車ではなく速く走る馬が欲しかった。 何が欲しいのかではなく、なぜ欲しいのかに注目したから車は生まれた。 目を見開く 優秀なデザイン

    デザイン思考で考える7つのこつ「デザイン思考が世界を変える」
  • 主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com

    ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik

  • エンジニアとデザイナーのコラボレーションの新しいカタチ

    Loading… Flash Player 9 (or above) is needed to view presentations. We have detected that you do not have it on your computer. To install it, go here.

  • すっきり綺麗な汎用デザインのWordPressテーマ10:phpspot開発日誌

    Top 10 Fresh And Best Free Wordpress Themes すっきり綺麗な汎用デザインのWordPressテーマ10。 次のようなすっきりしたデザインで使いやすそうなテーマが紹介されています。 2011年のブログデザインリニューアルを検討している方は参考にできそう。 テーマもうじゃうじゃ出てきますが、wordpress自体、フロントエンドのプラットフォームとなってしまいましたね。 これを変える動きは今後でてくるんでしょうかね。 関連エントリ かなり美麗なフリーのWordPressテーマ60 iPhone等のモバイルデバイス向けWordPressテーマ色々 会社でも使えそうなWordPressテーマ20 スモールビジネス向けのWordPressテーマ10 黒ベースのハイクオリティなWordPressテーマ集20

  • IE6/IE7/IE8/IE9のCSSハック

    IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 1.IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6:プロパティの先頭にアンダースコア「_」を付与 IE7:プロパティの先頭にアスタリスク

  • 新型はてなブックマークボタンを速くする

    遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。 まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。 <a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz" class="hatena-bookmark-button" data-hatena-bookmark-title="さくらたんどっとびーず" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリ

    新型はてなブックマークボタンを速くする
  • 2011年のSEOで、これはもう避けておきたい32のチェックリスト

    Googleをはじめとする検索エンジンに対して、サイトを最適化する際に気をつけるべき32のチェックリストを紹介します。 32 SEO Tactics to Avoid in 2011 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに あなたは2011年を迎え、SEO用の膨大なリストをもっていることでしょう。ここで紹介するものは、あなたがやるべきではない32のチェック項目を知ることで、あなたのリストを少なくすることです。 2011年のタスクに下記のリストが残っているのであれば、どうぞそれらを消してください。 Hiding Stuff On-Page 隠されたテキストやリンクはGoogleが最も嫌う存在です。これらは最悪の場合、ペナルティが与えられることがあるので使用は避けてください。 白い背景に白いテキスト 画像の上に隠したテキスト CSSを使って隠したテキスト 極小サイズ

  • 次のサービスに使えるかもしれないロゴデザイン集22:phpspot開発日誌

    22 Designer Logo that Touch Your Heart | www.allbloggertools.com 次のサービスに使えるかもしれないロゴデザイン集22。 すっきりと美しいロゴデザインが多数紹介されています。2011年はサービスを一発あててやろうと思っている方はこうした印象深いロゴを参考にするのもよいかもしれません。 シンプルでいて、なんとなく覚えてしまうというデザインがそろってますね。 関連エントリ デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 ロゴデザインの参考になる綺麗なロゴ集 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 ロゴデザインが色々あって登録も可能な「LogoSauce」 インスピレーション用ロゴデザイン色々

  • サーバー側コーディング不要のGoogle App Engine開発環境「jsonengine」

    はじめに 稿では、JavaPythonによるサーバー側コーディングを一切必要とせずにGoogle App Engineによる開発を実現するツール「jsonengine」について紹介します。 対象読者 Google App Engineに興味はあるが経験のない方。JavaScriptやActionScriptによるクライアント開発、またはiPhoneAndroidによるスマートフォン開発の経験のある方。JavaPythonの開発経験は不要です。 必要な環境 最低動作環境は次のとおりです。 Java SE 5 jsonengineって何? 「jsonengine」は、JavaPythonによるサーバー側コーディングを一切必要とせずにGoogle App Engineによる開発を実現するオープンソースのツールです。このツールは、昨年開催された「Mashup Awards 6」において「

  • [CSS]背景画像に関する実用的なスタイルシートのテクニック集

    CSS2.1の疑似要素を使用して、背景画像のクロップ、変形、ポジション、不透明度など背景画像に関する実用的なスタイルシートの4つのテクニックを紹介します。 CSS background image hacks [ad#ad-2] 下記は各ポイントを意訳したものです。 背景画像のクロップ 背景画像の変形 背景画像のポジション 背景画像の不透明度 背景画像のクロップ 背景画像をクロップするのは、CSS2.1だけを使用してモダンブラウザにエミュレートできます。 一つ目のデモでは、背景で表示するべき画像をクロップしています。

  • MOONGIFTのホームページリニューアルでデザイン的に考えた事 | ブロックワークス

    MOONGIFTさんが今週頭にリニューアルされました。その中でサイトデザインとWordPressのテーマ制作をやらせていただきました。私がどういう風に感じて、どう考えたのかを書いてみたいなと思います。 はじめに リニューアルは、おおざっぱに以下のような作業分担となっています。 HPに入れたい情報・要望を洗い出し(MOONGIFTさん) 入れたい情報を元にレイアウト案を作成(私) レイアウトがある程度決まったらビジュアル化(私) コーディング、WordPressテーマ化(私) WordPressテーマを元に、課金・プレミアム等のプログラム部分を実装(MOONGIFTさん) レイアウト・情報整頓について 私が担当する作業の中では、この部分の作業時間が一番かかったと思います。 MOONGIFTさんの今後の展開を聞いた上で、 後からでも情報や機能、サービスを付け加えやすいレイアウトの模索 情報の整

  • 細部までしっかりこだわったヴィンテージデザインの6種類のエレメント

    人気のデザイントレンドの一つに、ヴィンテージ・レトロスタイルがあります。デザインにこれらを取り入れるために使いこなしたい6種類のエレメントを紹介します。 The Elements of Retro Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事にはサンプルやチュートリアルなど豊富に掲載されています。 はじめに 1. サークルを使った形状 2. ツートンカラー、限定されたカラースキーム 3. タイポグラフィエレメントとトレンド 4. ブレンディングスタイル 5. テクスチャとノイズ 6. イメージクロップとレイヤーマスク はじめに ヴィンテージ、レトロといったスタイルは今日のデジタルアートワークにおいて、日々人気が高くなっています。社会が完全にデジタル化した後、デザインにおけるヴィンテージ、レトロをテーマにしたものはトレンドの一つと言えるでしょう。 こ

  • ウェブページのサイドバーに生じる空きスペースの活用方法

    ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。

  • マイクロソフト、無償のWeb開発環境「WebMatrix」を公開。HTML/CSS/JavaScriptエディタ機能、PHP対応、FTP機能など手軽で便利な統合ツール

    マイクロソフトは先週、無償のWeb開発環境「WebMatrix」の提供を開始しました。WebMatrixには以下のコンポーネントが含まれており、Windowsで簡単にWebサイトの構築を行うことができます。 Web開発ツール HTML/CSS/JavaScript/PHPなどに対応したテキストエディタを含む開発ツール。FTPによりファイルをホストへボタン1つで転送できる HTTPサーバ IIS Express 7.5により、Webブラウザですぐにブレビューできる。しかも(追加インストールにより)PHPにも対応する。当然ASP.NETにも対応 データベースサーバ SQL Server Compact Edition 4により、データベースを利用するWebアプリケーションもローカルで開発可能。MySQLも追加インストール可能 調べた限りではIIS ExpressはWebMatrixの画面から簡

    マイクロソフト、無償のWeb開発環境「WebMatrix」を公開。HTML/CSS/JavaScriptエディタ機能、PHP対応、FTP機能など手軽で便利な統合ツール
  • Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding

    HTMLタグをいちいち手で入力していると、時間もかかりますし、入力間違いやスペルミスなど、間違いの原因にもなります。それはCSSでも同じです。 DreamweaverなどのWebオーサリングツールには、標準でタグや属性の補完機能や「スニペット」といわれる入力支援機能があります。スニペットは、登録されているよく使うコードを呼び出して、コピー&ペーストの要領で入力します。 Zen Codingでは、このスニペットのようによく使うコードを呼び出して入力するものですが、「省略形」(abbreviation)といわれるコードの略語のようなものを入力するだけで、さらにかんたんにコードを入力することができます。 Zen Codingを使えばコーディングはこう変わる!HTMLコーディングでは、「<h1>見出しタイトル</h1>」のようにテキストを開始タグと終了タグで囲み、見出しを指定します。 Zen Co

    Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding