macuro250のブックマーク (233)

  • スクロールに応じて動くアニメーションをつくる方法 | Stronghold Archive

    どうもこんばんは! 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え(むしろもう減った?) 目にする機会も増えたかと思います。 基はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents

    macuro250
    macuro250 2014/10/21
  • Web上で最も強い力を持つ色は?

    下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな? ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか? [Colourlovers] Jesus Diaz(原文/あんね)

    Web上で最も強い力を持つ色は?
    macuro250
    macuro250 2014/10/20
  • JPG・PNG・GIFの違いのまとめ

    どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。2010.10.27 18:00169,079 人間がデジタル技術を開発して以来、開発され続けてきた画像の保存形式。 開発過程には、それこそ色々な種類がありました。 しかし、現代のブラウザや、一般的な利用者のニーズに合わせて、現在ではJPG、 PNG、 GIFが3強です。 もちろん、それぞれ長所と短所がありますが、それぞれどこがどう違うのでしょうか。 JPG(Joint Photographic Experts Group) JPGはジョイント・フォトグラフィック・エキスパート・グループ(Joint Photographic Experts Group)がプロのカメラマンの標準となるべく開発したファイルのタイプです。 ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれる

    JPG・PNG・GIFの違いのまとめ
    macuro250
    macuro250 2014/09/28
  • Editey

    Create and publish websites right from Google Drive

    macuro250
    macuro250 2014/09/13
  • ホームページ制作を超えた研究開発型ITコンサルティング企業ペンシル

    インターネットの力で 世界のビジネスを革新する Internet for Infinite Business Evolution ペンシルについて

    ホームページ制作を超えた研究開発型ITコンサルティング企業ペンシル
    macuro250
    macuro250 2014/09/10
  • Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の

    Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    macuro250
    macuro250 2014/09/08
  • [1536×1040] 厳選 iOS 7用 iPhone壁紙 03 – 自然風景 – 61枚

    壮大な「自然風景」をモチーフにした iOS 7 の Parallax Effect(視差効果)に対応した最適サイズ【1536×1040ピクセル】の壁紙(Wallpaper)を収集しました! 気に入った壁紙はリンク先から落としてチョ♪ エントリ時点では、iOS 7 の動いている iPhone 5 / iPhone 5s / iPhone 5c用の壁紙ですww Link: GO 70° NORTH | Lock screen, home screen Link: Parallax Wallpapers

    [1536×1040] 厳選 iOS 7用 iPhone壁紙 03 – 自然風景 – 61枚
    macuro250
    macuro250 2014/09/08
  • jQuery Mobileのリンクが飛ばないー!な人はここ☆ | はおはお

    jQuery Mobileのリンクが飛ばないー!な人はここ☆ 先日から「jQuery Mobile」で、モバイルサイトを作っとります。 困ったん・・・、をメモっていきますので。 困ったんな方は、ぜひ参考にしていただけると管理人よろこびます(o^^o) では、早速作っていきましょー!! リンクボタンがなんでか飛ばないんです。 くるくるしてて飛ばないんですー。 aタグに data-ajax=”false” を追記すればOKです。 <a href=”xxx.html” data-ajax=”false”>XXX</a> 参考サイト:http://www.d-ic.com/blog/203 そんなわけで、無事にうごきましたん♪ はい次。 画像サイズをデバイスで変えたいのん さあさあお次は、デバイスで画像のサイズを変えたいの!という次なるステップへ。 以下のタグで、サイズを決めてあげてくだ

    jQuery Mobileのリンクが飛ばないー!な人はここ☆ | はおはお
    macuro250
    macuro250 2014/09/07
  • アクセス解析ツールの「Pt engine」、ネイティブアプリにおけるヒートマップ計測を実現! ~表示内容が大きく変化するアプリにおけるヒートマップ計測は世界初~

    株式会社Ptmindは2014年8月18日、アクセス解析ツール「Pt engine」において、ネイティブアプリにおけるヒートマップ計測の技術開発に成功したこと、およびアプリ版ヒートマップのクローズドβ版の提供を世界での同時展開を開始したことを発表しました。 株式会社Ptmind(社:東京都渋谷区 代表取締役社長:鄭 遠)は2014年8月18日、アクセス解析ツール「Pt engine」において、ネイティブアプリにおけるヒートマップ計測の技術開発に成功したこと、およびアプリ版ヒートマップのクローズドβ版の提供を世界での同時展開を開始したことを発表しました。 Pt engine は今まで、Webページにアクセスしたユーザーのクリック(スマートフォンではタッチ)や閲覧といった行動をサーモグラフィーで見える化するヒートマップ機能を提供してまいりました。すでに日国内では4,500サイト以上でご利用

    アクセス解析ツールの「Pt engine」、ネイティブアプリにおけるヒートマップ計測を実現! ~表示内容が大きく変化するアプリにおけるヒートマップ計測は世界初~
    macuro250
    macuro250 2014/09/02
    “Pt engine”
  • javaScriptを使用して、 textareaにエラーメッセージを追加する方法について考えているものです。…

    javaScriptを使用して、 textareaにエラーメッセージを追加する方法について考えているものです。 各項目の入力チェック後、 エラーが発生した項目のエラー内容を、 textareaに表示(エラーメッセージの追加)を行う場合、 現状の追加方法のままでも特に問題ないでしょうか? 考えとしては、 textarea のオブジェクトを、各項目の入力チェック関数の引数として渡して、 各入力チェックより、エラーメッセージが発生した場合、メッセージを追加してあげる、といった内容で考えています。 (※ソースをコメントに添付しております。) 私自身、javaScriptは余り触った事がない状態でして、現状としては“ひとまず動作する”といった形なのです。 記述として可笑しな点などがありましたらアドバイスいただけませんでしょうか?

    macuro250
    macuro250 2014/09/01
  • NxWorld

    My weblog space for web development and design.

    NxWorld
  • CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld

    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ

    CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld
    macuro250
    macuro250 2014/08/31
  • 画像の下にできる隙間 - Webtech Walker

    CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。 ソースは以下です。 <div> <img src="/sample/image/sample.gif" alt="sample" />abcdefg </div> div{ background:#F00; width:200px; } この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。 vertical-align-スタイルシートリファレンス つまりgとかjとか下にはみ出るアルファベ

    画像の下にできる隙間 - Webtech Walker
    macuro250
    macuro250 2014/08/30
  • CodePen - Front End Developer Playground & Code Editor in the Browser

    Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.

    CodePen - Front End Developer Playground & Code Editor in the Browser
    macuro250
    macuro250 2014/08/29
  • 更新するのが面倒!サイトの共通部分を簡単に作る様々な方法

    サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>

    更新するのが面倒!サイトの共通部分を簡単に作る様々な方法
  • プロジェクションマッピングで「化粧」する動画がヤバいと話題に | IDEAHACK

    ライブイベントやテーマパークなどでも利用され、一般的にも認知度の高くなってきたプロジェクションマッピング。 実際に見た事のある人も多いかと思います。 当メディアでもこれまで様々な例を紹介してきましたが、今回はなんとプロジェクションマッピングによる「化粧」。 人の顔にプロジェクターで様々な化粧をリアルタイムに施していく動画が公開され、海外で話題を呼んでいます。 化粧、、、どころか顔がものすごい変形しちゃってますね。 「Electronic Makeup(エレクトロニック・メイクアップ)」と呼ばれるこのアートはNobumichi Asai氏がデザイナーやフォトグラファー、プログラマーなど様々なスタッフとコラボレーションして生まれた作品。 最初にモデルの顔をスキャナーで読み取って物理的な特徴を捕え、瞬きや表情の変化に合わせてリアルタイムに「化粧」を描写しています。 通常、私たちが想像する化粧の遥

    プロジェクションマッピングで「化粧」する動画がヤバいと話題に | IDEAHACK
    macuro250
    macuro250 2014/08/20
  • [CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル

    ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..

    [CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
    macuro250
    macuro250 2014/08/20
  • 23年間植物状態と診断されていた男性、「ずっと意識があった」と告白。

    1983年に交通事故に遭い、以来、23年にわたって植物状態と診断されていた男性を最新のスキャンシステムで調べたところ、脳が正常に機能していることが判明。しかも、男性は23年間ずっと意識があった――。そんなベルギー男性の話が欧米メディアで話題を呼んでいる。 この男性は現在46歳のロム・ホウベンさん。1983年の事故によって、ホウベンさんは体が完全に麻痺して動けなくなり、医師は「何も感じないし、何も聞こえていない状態」と考えていた。意識状態は世界的に行われている「グラスゴー・コーマ・スケール」で確認され、患者の目の動きや会話能力、運動機能を医師が見て点数化。この結果をもとに、ホウベンさんには植物状態との診断が下された。 しかし、ホウベンさんの家族はこの判定結果を全く信じていなかったという。それは、母親がホウベンさんに眼を動かすように頼むと、しっかりその方向に動かすといった反応が見られたため。こ

    macuro250
    macuro250 2014/08/18
  • NewsPicksに学ぶ!実名でも投稿の質がよくはならない理由 : けんすう日記

    NewsPicksの質が下がっている? 最近、僕がハマっている「NewsPicks」というアプリがあります。これは、経済ニュースアプリで、竹中平蔵さんや、堀江貴文さん、グロービス堀社長などが実名でコメントしているところが刺激的です。 毎日何回も見ているのですが、コメントをつけるとlikeがついてそれがランキングになったりするので、めっちゃハマっています。これ系では、はてなブックマーク以来かも。NewsPicksとpressoは情報収集の必須アプリになりつつあります。 NewsPicksの特徴は、実名で投稿するのが基になっているところです。はてなブックマークはID文化なので、この差は大きいです。 しかし、最近では「NewsPicksは質が低下したのでは?」という声をちらほら見るようになりました。 ちょっと前からnewspicksっていうアプリ使ってるんだけど人が増えてコメントの平均的な質が

    NewsPicksに学ぶ!実名でも投稿の質がよくはならない理由 : けんすう日記
    macuro250
    macuro250 2014/08/16
  • UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ

    前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい(動き)、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない

    UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
    macuro250
    macuro250 2014/08/15