垂直に伸びた時間軸にポイントを配置し、そのポイントにコンテンツを紐付かせるタイムラインを簡単に実装できるスタイルシートを紹介します。
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう! ↑私が10年以上利用している会計ソフト! サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
生きてます。ナナメウエのはっちです。 お仕事で、mp4の動画からサムネイル(アニメーションGIF)を生成したいんだけどという場面に遭遇しました。 色々調べたところ、Webアプリでもあるっぽいのですが、そのアプリを試したところ正常に動いておらず、ぐぬぬ…どうしようかな、と。 そういえば?Photoshopで動画編集ができるという噂を以前聞いたことがあったので調べてみました。 意外とまだ需要のあるアニメーションGIF。 お役に立てれば幸いです。 Photoshopでmp4動画を開く 使用しているのはPhotoshopCS5です。 どのバージョンから動画が取り込めるのかは知りません。だってわたしFireworks派だもの…! ファイルから「開く」でもいけます。今回はドラッグ&ドロップで。 タイムラインを表示 読み込みに少々時間がかかりますが気になるような時間でもありません。 とりこま
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない(一部再生できるブラウザアプリはありますが)ので、困った困ったなのです。 そこで次代を担う(であろう)コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる! 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
わき続けるアイデア、生まれ続ける思い出、あなたの思いをワンタッチでデザイン。読み飛ばすだけのタイムライン。丸暗記するだけの学校のテスト。右から左に流していくだけの仕事。世の中どんどん受け身になって、自分で考えることをしなくなってきたんじゃない? じっくり寝かせて考えていた、自分の考えをシェアしてみると、意外と共感してくれる人が多かったりして嬉しい。そうやって自分の考えが生まれていく。 わき続けるアイデア、生まれ続ける思い出、あなたの思いをワンタッチでデザイン。単なる記録が、あなたの想像力を刺激するノートに生まれ変わる。シェアしてうれしい、読み返して楽しい美しいノート。そんなあなたのノートをiPadで。 使い方はいろいろ。旅行の思い出をまとめたり、おいしかった食事のリスト、ワインリスト、あなたのコレクションノート、アイデアメモ、などなど。davinci noteは、言葉と感性を大切にする人の
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。 jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。 ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。 最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分(<body>内)に以下の2行を挿入するだけです。 (1行目のスクリプトタグは<he
Facebookのタイムラインとニュースフィードをピクセル単位で忠実に再現したテンプレートのPSD素材を紹介します。 PSDは制作に利用できるようすべて編集可能な状態です。
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ&ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい! この
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
前回のエントリー、めちゃくちゃアクセスがあって(合計9万アクセスくらい)、知らないうちにYahoo!のトップニュースまで出るわ、で大変面白かった。が、この3日でGoogleのアドセンスの売り上げが428円。Amazonのアフリエイト970円。笑えます。まっとうなアフリエイトって本当に儲かりません。特に新しい仕事の打診もないので単に自己満足で終了。 Twitterのタイムラインを見ていると、これで新しい仕事がまたできるかも的な、前向きな(になろうとしてる)方もけっこういらっしゃいました。ですが、とっても残念ですが正直言って今後は「いいね」自体が簡単には押して貰えなくなります。ホントですよ。Facebookは「小細工しないでだったら広告やれ」という趣旨ですが、広告してもいままでのように簡単にいいねは押してもらえないのは確実です。ファン1人の獲得単価は確実にかなり上がりますので、業者に投げっぱな
Facebookページのタイムライン化で大騒ぎですが、アプリをウェルカムページに設定していた人は困っているんじゃないでしょうか? 僕もバンドのFacebookページを動画や音源を再生するアプリにしていたんですが、強制的に解除されてました。 そしたら、今日 BandPage というアーティスト用アプリを作っている ROOTMUSIC から、 「Facebookページの全タイムライン化が決まったけど、バンドマンの坊やは何をしたらいいかわからずお困りなんだろ?おれが教えてやるよ!」 っと言わんばかりの熱いメールがスライド付で届きました! Timeline for Facebook Pages 要約すると 1、ヘッダー画像をお前がどんなジャンルのどんな音楽性なのかわかるやつにしろ! 2、プッシュしたいタブを出るようにしろ! 3、「基本データ」の「情報」に聴かせたい音があるページのURLを書いてリン
エステとか美容整形のクリニックではよく「医療ローン」と聞くことがありますが、これらの医療ローンって正規のものなのでしょうか?私は歯並びを治したいと思っていて、審美歯科でインプラントをしようと思っています。やっぱりお金がかなりかかりますので、医療ローンを利用できるなら利用したい、と思っているのですが、医療ローンってこのようなインプラントにでも利用することって出来るんでしょうか?あまり一般的には聞かないローンですので、いまいちわかりかねています。 銀行の多目的ローンや医療ローンの場合はOKな可能性があります 質問者さんが言っているような、エステやクリニックなんかで言われている医療ローンっていうのは、その病院やエステが信販会社と提携して作っているローンね。クレジットカードと同じようなローンと思ってくれたらいいわ。一括払い、2回払い、分割払いが出来るようなイメージね。その場合は、そのエステだったり
いよいよFacebookページにも「タイムライン」が導入されます!全体的なデザインがより視覚的になるため、ブランドイメージを直感的に伝える効果が期待される「タイムライン」を、いち早く取り入れるための準備をしておきましょう。 こんにちは、SMMLabの藤田です。 来る2月29日、Facebookは初めてのマーケティング・カンファレンス「fMC」を開催します。マーケティング用ソリューションや成功事例の紹介を行うそうですが、そこで新しいFacebookの機能として、Facebookページ専用のタイムラインが公開されるのではと言われています。そこで今回は、Facebookページをタイムラインに対応させる為に考えておきたい4つのポイントをご紹介します。 参照記事: How to Prepare for Facebook Timeline for Brand Pages HOW TO: Get the
Facebook Timeline Hack Template (update) Facebookのタイムラインを作る際に便利なPhotoshopテンプレート。 PSDを開くと次のようなfacebookのタイムラインに型どられたセットが開きます。 zipファイルに atn というPhotoshopアクションファイルも入っているのでインストールしておきます。 レイヤーに分かれており、マスクがかかっているので、マスクフォルダ以下に好きな画像を配置してデザインします。 アバター画像、背景画像をデザインしましょう。最初にインストールしたPhotoshopアクションを実行すれば、ファイルを保存というところまでウィザードでやってくれるので後はfacebookに画像をアップするだけでカッコいいタイムラインの出来上がり facebook上でも画像を移動したりできるわけなのですが、Photoshopの自由度
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5&CSS3をフルに活用したスライドショー実装ライ
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く