画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
ロゴのデザインプロセスがわかりやすいGIFアニメーション20パターン - GIGAZINE
シンプルでわかりやすいロゴマークは一見簡単に作れそうですが、企業やお店の特徴を取り入れながら他のロゴマークとの差別化を図らなければならず、その製作過程は試行錯誤の連続となっています。そんなロゴマークが出来上がっていくプロセスを公開したBreno BitencourtさんのGIFアニメーションは見ていて面白いだけでなく、これからロゴデザインを扱う人にとって非常に役立つはずです。 WIP - Biten.me http://biten.me/5440/289469/gallery/wip-bitenme ◆01．Motion Math Logo 数字と子どもたちを組み合わせたロゴマーク。 ◆02．Rivière Club Logo Rivière Clubのロゴは色味押さえることによってラグジュアリーな雰囲気に。 ◆03．UP - Plane Logo 航空学校のUPのロゴは飛行機っぽくなりま
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の２大原理と６つの配色パターン画像を拡大して表示する ※追記：インフォグラフィックの最後のクレジットの部分が途切
最低でも入れておきたい、WordPressプラグイン・リスト
わかったブログをMTからWP化して早一ヶ月。 プラグインをかなり入れました。もはや、プラグインなしではブログが運営できない状況になっています。 当ブログで利用しているWordPressプラグインを紹介します。 モバイル対応 ・ktai style ・WPtouch この二つのプラグインを使いたいから、長年利用してきたMovabletypeからWordPressに移管したといっても、過言ではないくらいです。あっという間に、ガラケー用ページと、スマホ用のページを作れてしまいます。 後で紹介する、WP Super Cacheプラグインと併用すると、表示がおかしくなります。設定が必要です。 ソーシャルメディア対応 ・WordTwit ブログ更新をツイートすることで、ブログ記事を広く伝えることができます。投稿と同時にツイートしてくれるので便利です。 ・WP-OGP OGPタグを入れておくと、記事を「
最近流行のコワーキングスペースとその界隈に渦巻くクリエイティブの気持ち悪さ - ゆるふわ悪態生活。
こんにちは、tsunmatsuです。つんまつと読んでください。 この前、オープンしたばかりの渋谷ヒカリエに行きまして、そこの8階にいわゆるコワーキングスペース？と呼ばれる「MOV」って洒落た場所がありました。 コワーキングスペース、主にフリーランスの方たちが共同で働くためのスペースみたいで、個人的には「家でやれよ、家で」って思うんですけど、まあ流行ってるみたいなので需要はあるのでしょう。 そこで料金見てびっくりしました。月額15,750円（フルタイムメンバー）。 入会金も10,500円。 高っ！ こんなするの？ ちなみにミーティングルームは狭い部屋でも１時間5000円から6000円ぐらいでした。定員10名を超えるようなとこだと1万円超える部屋もありました。キャバクラか。 （ちなみにコピー11円でコンビニより高くてちょっと笑った） これでも日割りすると500円、カフェより安い！とか謳ってて、
HTML5--押さえておくべき10のタグ
HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。 HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。 ＃1：<video>タグと<audio>タグ FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で
6月6日にグーグルがアップルに先駆け、次世代Google マップについての発表を行うことに
6月6日にグーグルがアップルに先駆け、次世代Google マップについての発表を行うことに2012.06.04 20:00 mayumine グーグルとアップルの戦いは続く...。 6月6日（米国時間）、次世代Googleマップについての発表イベントが行われるようです。WWDCでアップルがiOS 6 について発表する数日前ですね。 iOS 6 には恐らくアップル製の地図アプリが含まれる説が濃厚で、アップルはGoogleマップのアプリから、自社製の3Dベースの位置情報サービスに入れ替えようとしているのは周知の事実。 アップルのiPhoneやiPadの地図アプリの発表に先駆けて、グーグルが発表することで、話題を先に集めてしまおうという意図が見え見えですよね。 まあ、お互い切磋琢磨し合ってより使いやすいサービスが使えるようになる事は歓迎したいと思います。 [9to5google] mayumin
Apple、iOSのセキュリティ機構を解説する「iOS セキュリティ」を公開 － ＠IT
2012/06/04 米Appleは、iOS 5のアーキテクチャやセキュリティ機構について解説した文書、「iOS セキュリティ」を公開した。米SANS Internet Storm Centerは、iOSに携わる仕事に就いているすべての人に一読を勧めている。 iOS セキュリティは、サンドボックスをはじめとするiOSの「システムアーキテクチャ」、パスワードを保護するキーチェーンなどについて説明する「暗号化とデータ保護」、SSLやVPNなどについて解説する「ネットワークセキュリティ」、MDMやリモートワイプなどについて説明する「デバイスアクセス」といった項目で構成されている。 SANSは、この文書はiOSの強化（ハードニング）ガイドではないが、iOSのアーキテクチャやサンドボックスをはじめとするセキュリティ機能について、よりよく理解する手助けになるものと評価。どのセキュリティ機能を利用するか
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ソフトバンクのスマートメーター構想 : 池田信夫 blog
2012年06月05日00:55 カテゴリエネルギー ソフトバンクのスマートメーター構想 きのうツイッターで東電のスマートメーターに対するソフトバンクのパブリックコメントを紹介したら大反響だった。電力自由化やスマートメーターがよくわからない人にもわかるようにやさしく書いてあるので、ちょっと紹介しておこう。 前半は家庭用（低圧）の自由化と発送電分離を行なうべきだという電力自由化論で、これは筋論としてはわかるが、今週のGEPRにも書いたように、新規参入がないまま料金を自由化すると、家庭用の電気代は上げ放題になる。発送電分離も、電力品質の厳格な管理の必要な電力は通信よりむずかしい。 後半のスマートメーターの部分は、とてもよく書けている。特に東電が今から検針情報を送るために光ファイバー(!)を引いて「マルチホップ」という東電専用の無線ネットワークをつくろうとしているのは、反競争的であるばかりでなく
無料で使えるUIデザインの基本要素が詰まった32の素材集 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい！という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
jQuery Mobileでスマホサイトを作ろう！国内外で制作されているサイトやjQuery Mobileについて | jQeryMobileでサイトをつくろう
jQuery Mobileとは？ jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏（@je
ポインタの裏話
ポインタの裏話 岡﨑 直観 okazaki at ecei.tohoku.ac.jp http://www.chokkan.org/ @chokkanorg ポインタの裏話 プログラミング演習Ａ 1 このような説明を 覚えていますか？ 知らなくても全く問題ありません ポインタの裏話 プログラミング演習Ａ 2 int x = 0; &xは変数xの「アドレス」 「番地」「住所」を返す 変数x 0 &x メモリ空間， 記憶空間 変数xのアド レス（住所） ポインタの裏話 プログラミング演習Ａ 3 ＿＿＿_ ／ ＼ 何言ってたんだこいつ？ ／ ⌒ ⌒＼ 番地 アドレス ぬるぽ ／ （●） （●） ＼ ＼ ／ | ､“ ﾞ)（__人__）" ） _＿＿＿＿＿＿＿＿_ ＼ ｡｀ ⌒ﾟ:j´ ,／ jﾞ~~| | | | ＿＿／ ＼ |_＿| | | | || / , ＼ｎ||
競合サイト調査・分析に必要なチェック項目と役立つツール達！
たいていの人は何らかの商品を購入する時、似たような商品の中から一番気に入ったものを買うと思います。そのため、自社商品を他社商品よりも多く購入してもらうには、お客様に「これが一番良い！」と思ってもらえる商品でなければなりません。 お客様に自社商品を一番だと思ってもらうには、競合他社の調査・分析は欠かせません。自社と他社の違い(差)を理解することが、より優れた商品やサービスの開発に繋がります。 これはWEBサイト制作でも同じです。競合サイトの調査分析をすることで、どのようにWEBサイトを組み立てたら、競合サイトよりも優れたサイトになるかが見えてきます。 そこで今回は、競合他社のサイト調査・分析に必要なチェック項目と、役立つツール・調査方法を簡単にまとめて紹介したいと思います。 最初にライバルだと思われる会社のターゲットユーザーを調べることが必要です。これを調べると【実際にその企業がライバルと言
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5ゲームをたくさん集めました！ よってらっしゃい！
DropboxやEvernoteなどの複数のサービスを一つのフィードにまとめてくれる便利ツール | ライフハッカー・ジャパン
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP