iPhone・iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone・iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ(本当に)ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は?何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの?」「どれが疑似要素で疑似クラス?」「どういうときに使うの?」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
(株)エアトリ 東証プライム 証券コード : 6191 お気に入り - 件 検索履歴 - 件 Language 日本語 English 読込中です...
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切替時のテキストのパネルはリスト要素です。 「EFFECT」には、それぞれのエフェクトを入れます。 <ul id="[EFFECT]" class="profiles"> <li> <img class="pic" src="images/[PIC].jpg" /> <ul class="info"> <li><a href="[URL]">[NAME
『さあ お仕置きの時間だよ ベイビー』 今日もおなかがスプラッシュ。はじめまして、4月からWP-D戦隊の仲間入りWP-Dエメラルドです。 ビジュアルエディタにCSSを当ててみる WordPressをガッツリCMSとして使ってもらう時にはカスタムフィールドなど使って項目ごとに入力してもらうように構築していくと思いますが、 会社概要の役員の名前を変更したい! プライバシーポリシーが1行変更になった。 新着情報はフリーテキストで入力したい。 なんて要望があるときは、ビジュアルエディタが表のサイトに近いほうがお客さんでも更新しやすい時ってありますよね。 WordPressのビジュアルエディタにCSSを適用するステップは3つ。 1. ビジュアルエディタにclassをつける。 tiny_mce_before_initフックを使ってビジュアルエディタにclassをつけます。 筆者は慣習的に”editor
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5&CSS3なフリーのドロップダウンメニュー25 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
App Showcase with Grid Overlay オーバーレイするグリッドの超クールなデモ。 はじめてこういうのは見た気がしますが、なかなかクールなのでデモだけでも見ておくとよさそう。 見せ方として面白いデモになっていて、ソースも公開されているので応用してみると面白い物ができそう 有り物や流行りを使うだけではなく、こういう物を自分で考えて作れるデザイナーというのは価値が高そうですね 関連エントリ 垂直アイコンメニュー実装デモ&サンプルプログラム「Vertical Icon Menu」 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ PayPalの読込中アイコンをCSSで実現したデモ フルスクリーンでページめくりをするUI実装デモ レスポンシブ&タッチフレンドリなWEBベースの音楽プレイヤー実装デモ これは新しい!パネルレイアウトが美しいスライドショー実装デモ 既にここまで
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 1から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます(デモ)。 こんなことできるんっ、という声が出てしまうかも(Androidはドラッグのみ) jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ&ドロップが可能 Jquery Swipe スワイプイベン
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。(現在のデザインになってからだいぶ経っており、今更な感じですが…)その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字(現在地表示) アイコンと文字(通常表示) ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねw それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook(アプリ) ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
わが社は受託が中心の会社ですが、自分たちでもWebサービスを作ってみたいと考えており、新しいWebサービスを日々模索してたりします。ただ、面白い企画を思いついても、じゃぁどうやってお金を稼ぐの?という段階で止まってしまうことも多いです。 出発点は思い付きでもアリと思うのですが、アイデアを煮詰める段階では、マネタイズに向きあわなければならなくなります。であるならば、Webサービスにおける典型的なビジネスモデルのパターンと特性は、基本知識としてある程度持っておいた方がいいんじゃないかな、などと思うようになりました。 というわけで、Webサービスによく見られるビジネスモデルの分類と特徴を整理してみました。だいたい以下の4種類に大別されるのではないかと思ってます。 アイデアは出しやすいが、膨大なトラフィックを求められる「広告モデル」 新規ビジネスを考える際に思いつきやすいのが、この広告モデルではな
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む(スクロール非対応) Step 2: ページ全体を角丸で囲む(スクロール対応) Step 3: ページ全体を角丸で囲む(スクロールバーを変更) Step 1: ページ全体を角丸で囲む(スクロール非対応) まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
はじめまして。 三度の飯よりオシャレが大好き。ライターの諸藤です。 国内外の街行くおしゃれな人たちのリアルなコーディネートや着こなしがチェックできる、ファッションスナップサイト。 皆さんはチェックしていますか? 連日多く更新されるサイトがほとんどなので、毎日ついつい見ちゃうんですよね。 ファッショントレンドはPCの前でも知ることができる!をモットーに、おすすめファッションスナップサイトをまとめました。 いざ、磨け!オサレ感性。 おすすめファッションスナップ13選 DROP TOKYO http://droptokyo.com/street/ 個性的で感度の高い、有名ファッションスナップサイト。 原宿を中心に男女問わず幅広いくエッジの効いたスタイルが見れますよ。 美人×SNAP http://www.bijin-snap.com/ 原宿・表参道・渋谷エリアで見かけた美女!のファッションスナッ
※検索結果ページから競合調査をおこなったうえでタイトルを付けたところ、タイトルの一部に語弊があったので修正しました。また、比較方法にも誤解を招く、あるいは判断しづらい部分があったので修正を加えました。ご迷惑をおかけします。 PNG画像のファイルサイズ圧縮ならPNG Minimizerがオススメですが、JPEG形式の写真を扱うことも多いので、オンラインで手軽に圧縮できないものかと思っていたら、PNG Minimizerの派生型サービスとしてJPEG版もあったのでご紹介しておきます。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! JPEG画像のファイルサイズを圧縮 「JPEG Minimizer」は、BMPやPNG、JPEGといった形式の画像を、画質をあまり落とさずに、ファイルサイズを圧縮したJPE
エンジニアからプロレスラーに昇格した勝利です。 (首、太いだろ?) 好きな技は蝶野親分の「ケンカキック」です。 さて、 エンジニアの方なら誰しもが通ると思われる、アイディアを思いついた後に実装する際に避けては通れない道、 そう、デザイン部分の構築。 聞いただけでもう蕁麻疹がおさまらないですね。 そんなとっかかりの部分を簡単に実装できるツール。 そう、Twitter Bootstrap。 Twitter BootStrapとは・・・ BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発/提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 ただ、Bootstrapだけではもの足りなくなったあなた。やっぱりバリエーションは多数もっといた方がいいですよね。 そんなあ
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
Free Collection of 300 Metro-Style Icons for Designers and Developers. Metrize Icons is a free icon set, it works perfectly for your apps or web projects. You may use these icons for both commercial and personal projects and customize them any way you like. All Icons, WebFont and Updates are Free. The download includes: PSD (Single Shape Layer) SVG (Single Icon 512 x 512) EPS AI PDF Web Font The b
2013年5月12日 HTML, JavaScript, Webサイト制作, 便利ツール Adobe社のEdge Animateというツールを聞いたことはありますか?クリエイティブ クラウドのメンバー登録をしている人は、「聞いたことあるけど、何するツール?」という方もいるかと思います(私もそうでした…)。Edge AnimateはアニメーションやインタラクティブなコンテンツをFlash感覚で作成できるツールです。簡単な使い方を、サンプルも交えて紹介します! ↑私が10年以上利用している会計ソフト! Adobe Edge Animateとは? Flashで作っていたようなアニメーションを作成し、HTMLとJavaScriptで書きだすツール。タイムラインを使って直感的に動きのあるHTMLコンテンツを作成できます。Adobe クリエイティブクラウドにメンバー登録すると使えます。HTMLの基礎知
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
こんにちは、相変わらずドラクエ10三昧の橋本です。 最近はライノス道場に通っています。 さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います(いつも忘れるので)。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないよ
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね? さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
ツール → FireMobileSimulator → オプション設定を開いて 「全般」→「端末選択」のタブごとに端末を選択する にチェックを入れればOKでした。 以下のサイトにして教えてもらいました。感謝。 FireMobileSimulator でタブ毎に端末選択を有効にする こちらもあわせてどうぞ Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs691953/verygoodtown.com/public_html/blog.verygoodtown.com/wordpress/wp-content/plugins/post-plugin-library/common_functions.php on line 174 None Found
by Russell Heimlich (@kingkool68) 600x400/000/fffSize / Background Color / Foreground Color . Format & Text DocumentationSizewidth x height Height is optional, if no height is specified the image will be a square. Example: https://dummyimage.com/300Must be the first option in the urlYou can specify one dimension and a ratio and dummyimage will calculate the right value. Example: https://dummyimage
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに~みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
こんにちは、ライターのYUKIです。 私が書いた前回の記事、“Amazon”から学ぶ、4つの観点から考察するUXデザインで、簡単にお話したウェブアクセシビリティについて、 今回は更に詳しくご説明したいと思います。また、世界の大企業では、このトピックをどのように考え、取り組んでいるかを知りたい方は、以下のリンクにあるサイトを参照して頂ければと思います。 Appleのアクセシビリティへの取り組み Samsung Electronics のアクセシビリティに関する考え方 ウェブアクセシビリティとは何か ウェブアクセシビリティとは、「年齢や身体的条件に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」ならびにその度合いを意味します。 ここで言う、「年齢や身体的条件」は以下のようなものが含まれます。 全盲 弱視 色覚障害 聴覚障害 肢体不自由 知的障害 高齢者 どうして重
Explanation Enter a foreground and background color in RGB hexadecimal format or choose a color using the Color Picker. Enter an Alpha value to adjust the transparency of the foreground color. Use the Lightness slider to adjust the perceived lightness of the color. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast rat
公開日 : 2012年9月17日 (2018年1月20日 更新) カテゴリー : アクセシビリティ 先の記事「iOS 標準のアクセシビリティ機能 (支援技術)」で、「モバイル機器の中でも、アップルの iOS デバイス (iPhone や iPad) は、アクセシビリティの面で他よりも一歩先んじている」と書きましたが、ライバル OS である Android はどうなのでしょうか。 「スクリーンリーダー利用に関するトレンド : 2012年5月実施の WebAIM 調査より」という記事中の「モバイル機器で音声読み上げをする人が増加している」で、モバイル環境で使用されているスクリーンリーダーの順位を書きましたが、iOS の VoiceOver が48.7%だったのに対し、Android は (TalkBack の5.4%と Mobile Accessibility の3.8%を足して) 9.2%に
視覚に障がいがある方にも、単に大きな文字を好む方にも。ディスプレイをカスタマイズしたり、デバイスをコントロールしたり、周囲の環境を確認するのに役立つ機能を紹介します。 VoiceOverは、デバイス上で起きていることを正確に説明する業界最先端の画面読み上げ機能です。要素の説明を耳で聞くことで、タッチスクリーンやトラックパッド上でのシンプルなジェスチャーやBluetoothキーボードを使って、画面上で簡単に移動できるようにします。タッチスクリーンやトラックパッド上でダイヤルのように機能する独自のロータージェスチャーを使えば、ウェブサイトなどのコンテンツをブラウズするのも思いのまま。人物、オブジェクト、テキスト、グラフも、かつてないほど詳しく説明します。VoiceOverは60以上の言語と地域で利用でき、ニーズに合わせて細かくカスタマイズするオプションもあります。音声フィードバック用の声の中か
こんにちは、メディア事業部のあゆみです。 ここ数日、会社で夜を過ごしているうちに毎日「ネコtime」を設けるようになってしまいました。癒しです、癒し。そんなわけで不思議と元気が出てくる、絶妙なツボを突いてくれるネコ動画を紹介します。 クールすぎる…秀逸ネコ動画15選 1.stereo skifcha ここ数年のネコシーンで一番ホットなのは、やっぱりロシア出身のネコアーティストSKIFCHA。白いサングラスをかけてばっきばきのダブステップのビートにのってる姿が超クールです。編集でいじられまくってるのですが、それでもいいのです。可愛いから。 大人気すぎて3Dバージョンやリミックスなど様々に登場していますが、中でも人間のおばあちゃんでパロッた動画は秀逸。
ざっくり言うと… ・解決したい課題を明確にしよう ・社外のネットワークを持とう ・社外の人材とともにプロジェクトをやろう ITProに3年で辞めないための「新入社員へのアドバイス」という特集コーナーを見つけてしまいました。 反社会的なぼくとしては、そんなアドバイスいらんから、逆に「3年以内で辞めるための」アドバイスが欲しいと思ってしまいます。というわけで、書いてみました。 1. 解決したい課題を明確にしよう 会社を辞めるにせよ続けるにせよ、「解決したい課題」を明確に持つことは重要です。「あなたはこの世界の、どんな課題を解決したいのですか?」という大きな問いに、どう答えるかという話です。 ほとんどの人は、この問いに対して自信のある回答はできないのではないかと思います。「自分が世界の課題を解決するなんて考えたことがない」「上司から与えられた課題は解決しているけど、自分が能動的に解決したいわけで
Webディレクションにおいて、クライアントの持つイメージや要望をWebサイトデザインに落とし込む/反映することは重要なミッションである。この点は多くのディレクターを悩ませる部分でもあるが、成功の秘訣はたったひとつ、イメージを共有することだ【1】。クライアント(発注側)が頭で思い描くデザインイメージをWebディレクターが共有し、さらにそれをWebデザイナー(制作側)と共有する。これにより、デザイン制作はまちがいなくうまくいく。ここではクライアントとのイメージ共有の仕方と、デザインディレクションについて詳しく紹介する。 まず、どのような段取りで進行すれば、クライアントとWebデザイナー双方に効果的なデザインディレクションとなるのかを説明したい。デザイン制作の進行フローは、大きく分けて「(1)要望ヒアリング」→「(2)要望に対してのデザイン案」→「(3)決定デザインの仕様確定」という3段階になっ
デザイナーが嫌がる痛い客のありがちな行動・クレーム デザインというのは、企画段階でその姿カタチが、見えにくいものであり、それゆえに、客はものすごい要求をしてくる。こちらがプロだという意識が過剰になり、何でも出来ると思われていることが間違いではあるが、皆様もこんな問題は無いだろうか。 記事の内容を見るとウェブデザイナーを対称にしている感じ。 ウェブデザイナーには様々なクレームが付きまとうものですが、ちょっとした事で解決できることが多いので一応記事に。 ただ、私は確かに制作はするも、ほとんど下請けにだしたりするので、ウェブプランナーとしての意見となることを先に言っておきます。 クレーム解決マニュアル ◆要求が抽象的 なんか、グレーな感じ、明るい感じ・・・などなど・・・。意味不明の要求仕様を突きつけられるも、当然のごとく意味不明なので、それだけでは判りませんと、反論。挙句の果てに『プロだろ?なん
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 (注:スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。) jarallax.jsとは? パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら: http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
こんにちは、システム部、元々特別なオンリーワン 鳥よしです。 (毎回書いているドラクエ10のレベルUPネタは廃人っぷりを披露しているみたいで恥ずかしいのでやめます) 今日は、Twitterでツイートした際のコールバックを得る方法を書きます。 (今更感が凄いかもしれませんが、ネタがないので書きます。 書かせてください。) まずは準備として以下を読み込みます。 【読み込み】 <script src="//platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script> 次に、実際のコールバックイベントを記述していきます。 「alert(‘つぶやいたよ’);」の所に好きな処理を入れて下さい。 【JS】 <script type="text/javascript" charset="utf-8"> w
こんにちは。代表取締役の岩上です。スマートフォン向けのサービスを紹介する際、メインビジュアルを大きく使いイメージを訴求する手法があります。写真やイラストを大きく使用している印象的なサービスサイトをまとめて見ました。スマートフォンビジネスに携わっている方の参考になれば嬉しいです。 印象的なスマートフォン向けサービスサイト(ランディングページ)25選 1. Square https://squareup.com/ 2. Spotify https://www.spotify.com/int/ 3. MAILBOX http://www.mailboxapp.com/ ※すでにサービス提供を終了しております。 4. feedly https://feedly.com/ 5. pulse https://www.pulse.me/ 6. flipboard https://flipboard.co
ダウンロードできる素材のフォーマットはPhotoshop用のPATで、シームレスに利用できます。色が春っぽくて、いいですね。 PATをPhotoshopで開くとこんな感じ 素材の利用にあたっては個人でも商用でも無料で、素材の再配布や販売は禁止、とのことです。 ダウンロードは、下記よりどうぞ。
2013年春の新作、Illustratorのチュートリアルをvector tuts+から紹介します。 チュートリアルはステップごと詳しいキャプチャ付きで、英語が苦手な人でも雰囲気は伝わると思います。
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く