2022/1/13をもって お客様がご利用中のブラウザ (Internet Explorer) のサポートを終了いたしました。 (詳細はこちら) クックパッドが推奨する環境ではないため、正しく表示されないことがあります。 Microsoft Edge や Google Chrome をご利用ください。 (Microsoft Edgeでクックパッドにログインできない場合はこちら)
最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール(ダウン)してそれぞれのコン
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…!?今回はSVGのアウトライン(線)の装飾に注目!オブジェクトを徐々に描いていくラインエフェクトにも挑戦します!SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」をご覧ください! ↑私が10年以上利用している会計ソフト! SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合: <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう! ↑私が10年以上利用している会計ソフト! SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか?SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト! 2014年7月3日 追記:SVGスプライトの書き方について修正&追記しました。 SVGってなに? SVG(Scalable Vector Graphics)はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
みなさんスタバでドヤ顔キメてますか? 実はビットエーのインターンをしながら、スタバでもバイトをしている、とろあかぶぅです。こんにちは。 今回はみんな大好きスターバックスで、さらにいい感じにキメるための裏メニュー、マル秘メニューを15種類ご紹介します! ぜひチェックしてスタバ通を気取っちゃってください♪ 1.トロピカルなフラペチーノで夏を乗り切れ! 白桃フラペチーノ Tall size ¥594(Tax in) 白桃フラペチーノやってみた!!!! めっちゃマンゴー😋笑 pic.twitter.com/o5xRDGcexZ — mikoto (@MikoDolce) 2015, 5月 15 名前の通り、飲んでみると白桃の味がします。が、どういうわけか桃は一切入っていません。 マンゴーとホワイトモカの生み出す奇跡のハーモニーは、1度飲んだら(多分)虜になります。 とりあえず最初に試してほしい超
どうも、やな☆ぎさわです。 先日ビットエーブログにて、弊社のインターン生とろあかぶぅが書いた「スタバ店員がこっそり教えるマル秘メニュー&裏ワザ15選」という記事を見てどうしても、どうしても飲みたくなり、というか実際に頼めるの?てのを知りたくて、健康診断の後に行ってきました。 裏メニューのオレオフラペチーノをドキドキで頼んでみた スターバックスに着くないなや早速、美味しそうな看板がお出迎えしてくれます。 いやぁ〜楽しみですね〜。ワクワクしてきましたよ。本当に裏メニュー頼めるのかよ〜。 それでは店内に入り注文してみましょう。 どうです。この緊張感伝わりますか?何が緊張って?大体どうやって注文すりゃいいんだ…。 ちなみに僕は、とろあかぶぅの記事にある5番の[オレオフラペチーノ トールサイズ ¥540]を頼もうと思っています。 メニューの名前を言って、もし店員さんに「はぁ!?」って言われたらどうす
❗貸切のお知らせ❗ 4月19日 (金)16:00~20:00 4月22日 (月)08:00~19:00 上記日時はドロップインのご利用ができません。 ご理解の程よろしくお願いいたします。 📱アプリから予約できます📱 会議室/テレカンブースがアプリからできるようになりました! アプリ上部タブの「予約(会議室など)」からご利用ください! 通常のコワーキング利用は引き続き予約不要ですので直接お越しください。 =================== 毎週土曜日/日曜日は受付無人のためセルフチェックインです。 必ず1名ずつアプリをダウンロードしてご利用ください。 代表者がまとめて払う場合はアプリ内の「いいPAY」でQRを読込みその他の方の利用時間分お支払いください。 🔰デビッドカードでドロップインのお支払いは推奨いたしません。 ドロップインのお支払いはクレジットカードのご利用をお願いいたします
3家族合同誕生会レポート(前編)100均素材でデコレーション! リビングが撮影スタジオに変身! 2014.09.08 ACO 子どもが生まれると、毎年訪れる「スペシャルなイベント」。 それが、バースデー! 娘は、今年、3歳になります。 そこで、赤ちゃんのときから仲良くしている3人の友人家族といっしょに、我が家で合同バースデーパーティーをすることにしました。 せっかくなら、いろいろイベントをしたり、デコレーションをしたり、特別な日にしたいな~と、ホストとしていろいろ試行錯誤した「3家族合同誕生会」を前後編に分けてレポートします。 やっぱり見た目は大事!…ということで、前編では、お部屋のデコレーションについてご紹介! かわいいものはたくさん売っていますが、できるだけ予算を抑え、かつ写真映えさせたい!…ということで、こんなものを買ってきました。 ■ペーバーバナー ▲100円ショップの「セリア」で
ファッションから、グラフィック、Web, 建築、UXまで、さまざまな異なる職種のデザイナーが存在する。 実際の仕事内容はそれぞれのフィールドによって異なるが、”デザイナー”という人達の仕事は根本的には共通してる点が多い。 その一方で、デザイナーに対しての世の中の一般的なイメージはかなり現実と異なる事も少なくは無い。 そんなデザイナーと呼ばれる人達の本当の仕事、求められるスキル、そして日米でのデザイナーを取り巻く環境はどのように異なるかを考えてみたい。 デザイナーは絵を描く以上の仕事デザイナーというと、絵を描いて形だけを決める仕事だと勘違いしている人が多いのだが、実はそれらは最終アウトプットのごく一部であり、本来デザイナーの仕事というのは、与えられた制限の中で、求められる最大限の結果を生み出すプロセスのその全てに関わる職業である。 その仕事の中には、ターゲット層の設定や、どのように売るか、そ
オッス!オライクメン!いっちょやってみっか! で、やってみた結果嫁に目ん玉とび出るくらい怒られました。 昨日のはてな村奇譚の下の方(はてな村奇譚7 - orangestarの日記)に書いた育児話について「お前のウェットな育児じゃ人手がどんだけあってもたりねーんだよ!」(意訳)って言う感じで。 ただ、なんかいま一つピンと来ないというか、納得できないというか…。 うまく説明できないので嫁の育児垢から貼ります。(許諾済み) 朝からうちのイクメンに激おこっすわ ご飯も食べないなら30分過ぎたら切り上げるっていっても、絶対足りてないって言って平気で二時間とか食べさせ続けようとしたり、夜中に機嫌悪くてもう寝ないなら一回ちゃんと起こしてからもう一回寝かしつけるとかいって明るい部屋でDVD見せようとしたらそりゃ手も足りないっすわ…… 手がかかるんじゃなくて、手をかけてるという自覚がない 散歩に連れ出してく
アーユルヴェーダといえばマッサージやエステ、お化粧品・・”美容”が真っ先に浮かんできますが、インド・スリランカにおける伝統医学で、病気になりにくい心身をつくること、健康を維持し病気を予防するというインド5,000年の歴史を誇る予防医学。 そして、崩れたバランスをもとに戻す方法として食事が重要視されています。 それを”アーユルヴェーダ料理”と呼んでおり、ハーブやスパイスをたくさん用いて作られます。辛味のあるスパイスを多めに使用するため、食べた後にじわじわ~っと辛さが伝わってきます。 スリランカ料理に欠かせないのがココナッツミルクとモルディブフィッシュ。モルディブフィッシュとはかつお節のようなもの。 それほど主張するわけではないけれど、風味が豊かになります。もちろんかつお節で代用可能です! 今回ご紹介するレシピでは手軽なスパイスで作っていますので、是非試してみて下さいね♪ 『茄子のスリランカカ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く