タグ

kouichi1985のブックマーク (251)

  • クオリティの高いWebデザインを見たい時はThe Css Awardsがいいかも

    ハイクオリティ、綺麗なWebデザイン を見たいときはThe Css Awardsが 良いかもしれません。ここは素敵な Webデザインのサイトを毎日紹介 しているギャラリーで、厳しい審査 の元、1日1サイトが選ばれるサイト です。 そんなサイトなので、The Css Awardsに掲載されているWebデザインは基的にクオリティが高そうです。有名なサイトみたいですが、最近知ったので改めてご紹介します。 素敵なデザインばかりですよ。審査してもらうにはお金が掛かるみたいですが、掲載されているサイトを見ると、ちゃんと厳選してくれてるっぽいですね。 The Css Awardsの歩き方簡単では有りますが、特徴をご紹介します。 検索 上部のMENUにマウスオーバーするとメニューが表示されます。そこでカラー検索やタグ検索が可能です。ascendingにチェックを入れると点数の低い順、descending

    クオリティの高いWebデザインを見たい時はThe Css Awardsがいいかも
  • 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」:phpspot開発日誌

    A Zoomable jQuery Image Gallery Called jPhotoGrid 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」が公開されています。 LightBoxのようなものですが、サムネイルから直接、オリジナルの画像へとアニメーション表示されます。背景部分が半透明なのがなかなかクールです。 黒の背景にいい感じにマッチしそうなギャラリーになってます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」 カスタマイズできる多機能LightBox「Lightview」

  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • mixi アプリ watcher - mixiアプリのランキング,おもしろmixiアプリかんたん検索

    アプリデータ 公開アプリ数1,020 携帯アプリ数351 ユーザー数96,964,098 携帯ユーザ数83,485,757 上昇数178,822 開発者数486 SNSアプリ Socialアプリ mixiアプリ Game(Wii,DS,PS3,PSP) iPhoneアプリ モバゲーアプリ Facebookアプリ MySpaceアプリ Friendsterアプリ renren.comアプリ(中国) 51.comアプリ(中国)

  • RGBとCMYKのカラーセオリーの「いろは」を一枚にまとめたチートシート

    RGB用の配色パターン CMYKはシアン、マゼンダ、イエロー、ブラックの四色から構成されたカラーモデルで、紙ベースの印刷・DTPで使用されています。 RGBはレッド、グリーン、ブルーの三色から構成されたカラーモデルで、モニターベースのウェブやデジタルカメラで使用されています。 色の作り方は、CYMKは白から始まって引き算を行い、RGBは黒から始まって加算するものです。 カラーセオリーからカラースキームを簡単作成 ウェブ用にカラーセオリーを元に、簡単にカラースキームを作成できるオンラインサービスもあります。 セオリーに基づいたカラースキームが設計できるオンラインサービス

  • CSSビギナーに気をつけてほしい5つのポイント | コリス

    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

  • Wordpress SEO: これを読めば後は何もいらない! &raquo; SEO Japan

    無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 皆さんもご存知のように、私はワードプレスを愛用している。私はアフィリエイトサイトの大半でこのプラットフォームを利用しており数千ドル/月の収益を手に入れている。また、このブログを含むブログにも利用している。しかし、このCMSを活用しているのは私だけではないはずだ — 実際に無数のサイトがこのソフトウェアをベースにしている。 そのため、ワードプレスを称賛する声は後を絶たない。しかし、デフォルト時のSEOに関してはメリットの一つに挙げることは出来ない。私は、このソフトエウェアを多用し、検索エンジンのトラフィックのおかげで多額の収入を得るなかで、ワードプレスの設定の最適化における最良の方法を編み出した。

    Wordpress SEO: これを読めば後は何もいらない! &raquo; SEO Japan
  • SEO重要要因ランキング(Yahoo! JAPAN版)―日米SEOプロ60人が評価した重要度 | Web担当者Forum

    この特集で挙げた57の要因に関して、Yahoo! JAPANに限定して集計した重要度のランキングを示す。 プラス要因トップ20(Yahoo! JAPAN)titleタグ内でのキーワード使用被リンクのアンカーテキストサイト全体でのリンクポピュラリティ文でのキーワード使用Yahoo!ディレクトリへの登録サイト内部構造としてのリンクポピュラリティリンク元サイトのサイト全体でのリンクポピュラリティサイト開設からの経過時間被リンクの話題関連性サイトの主要テーマと検索の関連性リンク元ページとの話題の関連性被リンク増加率文のコンテンツとキーワードの(トピック分析による)関連性インデックス可能なテキストコンテンツの量h1タグ内でのキーワードの使用話題コミュニティ内でのリンクポピュラリティリンク元サイトとの話題の関連性リンク設置からの経過時間文書公開からの経過時間リンク周辺のテキストマイナス要因トップ5

    SEO重要要因ランキング(Yahoo! JAPAN版)―日米SEOプロ60人が評価した重要度 | Web担当者Forum
  • ダイヤモンド iPad : SEOを意識したソーシャルPRキャンペーン - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    【メールマガジンのご案内】 SEOに役立つ記事の更新やセミナーのご案内をメールマガジンで行っております。 ぜひご登録ください。 メールマガジンに登録する>> 今朝、私は、オフィスに行くのでもなく、ジムに駆け込む時間を確保するのでもなく、普段とは少し異なる時間を過ごした。コーヒーを入れ、ソファーに座り、テレビのニュース番組にチャンネルを回した。普段はMSNBCのモーニング・ジョーを見るのだが、今朝はCNNのヘッドラインニュースを選び、朝一番のニュースを見ながらうとうとしていた。 その「ニュース」で報じられていたアイテムの中に、ダイヤモンドが散りばめられ、$19,999と言う値がつけられたアップルのiPadに関する情報が含まれていた。その時、“アップルがビクトリアズ・シークレット(註:アメリカで有名な派手目のランジェリーブランド)を真似している”のかと私は思ったが、どうやら、ダイヤモンドiPa

    ダイヤモンド iPad : SEOを意識したソーシャルPRキャンペーン - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • Twitter関連ツール・まとめ - かちびと.net

    Twitter関連の便利なツールがかなり 紹介されて来ていて、そろそろ混乱 してきたのでまとめます。 リンク先は日語で解説してくれて いる記事にしています。されていない ツールやサイトは載せていません。 今現在は165個のツールがありましたが、今後追加していく可能性もあります。 TwitterWikiに載ってるサービスは極力載せていないつもりですが、若干被ってるかも。 全てのサービスを試したわけではありません。MacとiPhoneは持って無いですし。。。 また、リンク先を日の記事にしたのは、海外のサービスに直接貼っても 使い方が分からなければ意味が無いと思った為です。 なので、リンク先がかなり偏っていますが重ねてご了承下さい。 ※コメント頂いたので15個追加して180個更に20個追加して200個に育った。 ※8月アップデート>17個増えて217個 ※9月アップデート>30個増えて247

    Twitter関連ツール・まとめ - かちびと.net
  • 「新しいタブ」を素晴らしく便利にするChrome拡張「Incredible StartPage」

    Google Chromeのスタートページにもなる新しいタブ。 各ブラウザとも、ここの機能を年々拡充し始めていますが、サードパーティーによって作られるChrome拡張機能ではその最先端を行っているように感じます。 さて今回は、新しいタブに全く新しいアイデアを盛りこまれた拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 新しいタブを新たな発想で便利にするChrome拡張機能 「Incredible StartPage」は、Google Chromeの新しいタブやスタートページに、ブックマークを表示するだけでなく、Gmailで即座に送ることができる付箋メモを搭載したChrome拡張機能。 「メモするものはどこにでも用意しておきたい。」という人にかなりおススメの拡張機能です。 目

    「新しいタブ」を素晴らしく便利にするChrome拡張「Incredible StartPage」
  • コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル

    ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。 Create Portfolio Website With CSS/jQuery デモページ チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。 ツールチップナビゲーション マウスオーバーで補足情報を表示。 スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。 コンテンツスライダー Automatic Image Slider ツールチップナビゲーション Create A Floating Navigation チュートリアルではそれらのHTML/CSS/JavaScript

  • かなりカッコいいPHP&MySQLなAjax式コンタクトフォーム:phpspot開発日誌

    PHP/MySQL Contact Form with jQuery | Codrops かなりカッコいいPHPMySQLなAjax式コンタクトフォーム。 次のようなレイアウトのコンタクトフォームがダウンロード出来ます。 入力すると文字に影がつき、フォーカスもハイライトされます。 入力必須フィールドのValidationもjavascriptにて制御されます。 送信すると、ふわっ、とメールアイコンがMacっぽくアニメーション表示されて送信を知らせてくれます。 ちょっと個性が強いフォームになってますが、Ajaxなフォームの動きなどの参考にするのはよさそうです。

  • jQueryでテキストリンクのマウスオーバー時に動きをつける

    2014年8月20日 jQuery どのサイトにも必ずあるテキストリンク。それをもう少しおしゃれに表示できないかな?ということでjQueryでアニメーションをつける方法を紹介します。下のアンダーラインからペロッとでてくるので、うるさすぎず、アクセントになると思います! ↑私が10年以上利用している会計ソフト! IE6+, Firefox 3+, Safari4で動作確認済です。 サンプル See the Pen Text link – animation hover effect by Mana (@manabox) on CodePen. 必要ファイルをダウンロードする 必要なJavaScriptファイルを下記よりダウンロードします。 jquery.js jquery.color.js jquery.backgroundPosition.js 背景画像を作る マウスオーバー時に表示したい

    jQueryでテキストリンクのマウスオーバー時に動きをつける
  • ゆーすけべー日記

    サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ

    ゆーすけべー日記
  • サイトにTwitterの機能を組み込むためのjQueryプラグイン集:phpspot開発日誌

    Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか? そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」

  • 「Photoshopでこの人を正面に向かせてください。」と言ってしまう気持ちが分かるくらい凄い加工技術

    Webデザイン写真の加工技術 「Photoshopでこの人を正面に 向かせてください」と言ってし まう気持ちが分からなくもない くらい凄い加工技術をご紹介。 以前話題になった記事でWebクリ エイターボックスさんの「クライアントからの ムチャぶり迷言集」の中にあった 「Photoshopでこの人を正面に向かせ てください」と言ってしまう気持ちが 分からなくもないくらい凄い加工技術 をご紹介。 「Photoshopでこの人を正面に向かせてください」というのはなかなかアレなお願いですが、「Photoshopならなんでも出来るんでしょ?」と、知らない人なら思ってしまうのはそれだけ今の加工技術が高いと認識してるのでしょうね。 たしかにこれ見たら「なんでも出来るんだ」と思ってしまうかもしれません。むしろ何故出来ないかが理解できないのかも。。。 人を正面に、という話題を取り上げたので人を使った加工アー

    「Photoshopでこの人を正面に向かせてください。」と言ってしまう気持ちが分かるくらい凄い加工技術
  • 無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy

    結構便利そうだったのでご紹介。オンライン でWebサイトの簡単な設計図、いわゆる モックアップをドラッグ&ドロップ、直感で作成 出来て、PDFやJPGで保存出来るフリーの Webサービス、lumzyのご紹介。ユーザー 登録不要というのが良いですね。 日語もある程度使えて(ボタンのテキストなどには使えないです)、PDFで保存しても文字化けせず、しかもユーザー登録も不要なので結構重宝しそうな気がします。 「モックアップはきれいに作りすぎてはいけない、という話」という記事でもありますが、手書きのような感覚でスピーディに作れるので件の記事内容に沿ったモックアップの作成が出来そう。 lumzy ユーザー登録不要と言うのが手軽でいいですね。それでいて結構高機能なので侮れません。以下に簡単に使い方を。 プロジェクトを作る まず、プロジェクト名を決めます。決めなくてもモックアップは作成出来ますが、決めな

    無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy
  • 超カッコいい写真加工のPhotoshopチュートリアル集:phpspot開発日誌

    40 Outstanding Photo Manipulation Tutorials | The Best Article Every day 超カッコいい写真加工のPhotoshopチュートリアル集。 次のようなすごいグラフィックをPhotoshopで作成するチュートリアル集がまとまったエントリのご紹介です。 40種類あって色々と勉強になりそうです。 そういえば、Photoshop CS5の発売っていつごろになるんでしょうね 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種 クールなポートフォリオレイアウト作成Photoshopチュートリアル 綺麗なディスプレイアイコンを作成するPhotoshopチュートリアル