レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
![[JS]一歩進んだレスポンシブ用の画像配置!見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a809e86259b72db3d0f0346bf48e65e038b82a7d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015113001.png)
例えばメールを読んで、その内容をコピーしてブラウザで検索し、開いたページのリンクをコピーしてLINEで友達に送るなど、複数のアプリを行き来しながら作業する場合、画面下部にある「タブ切り替え」アイコンからアプリを選択して開かないといけないため、作業が非常に面倒に感じることがあります。そんな面倒なタブ切り替えを劇的に効率化できるアプリが「Pintasking」で、タブ切り替えがどれくらい効率化されるのか実際に使って確かめてみました。 Pintasking - Google Play の Android アプリ https://play.google.com/store/apps/details?id=com.phinxapps.pintasking Pintaskingを使うには、上記URLを開いて「インストール」をタップします。 「同意する」をタップ。 インストールが終わると、ホーム画面にP
Font management. Perfected.All platforms. Professional features. Beautiful UI. Totally free. FontBase is the font manager of the new generation, built by designers, for designers. A set of amazing featuresFontBase is built for designers, by designers. We understand what you need and deliever a set of great features to help you find the right font.
FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンの世界ではとにかく表示の高速さが問われています。少し詰まっただけでもユーザは嫌がってしまうでしょう。そのためにはレスポンスを高速に返すのは基本として、他にもできることが幾つかあります。 GoogleやTwitterが考え出したのがAccelerated Mobile Pages(AMP)です。外部サイトのコンテンツをキャッシュして表示する技術で、これによって高速表示を可能にしようというのです。 Accelerated Mobile Pagesの使い方 Accelerated Mobile PagesではAdSenseやGoogle Analyticsのような仕組みはそのまま使えるようです。他にもYouTubeやPinterestのようなところも提供しています。 例えば
ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。 ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。 デモの動き スクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="flowup.js"></script> </body> Step 2: HTML 各パネルは、p, div, articleなどで実装します。 <body>
IE, Chrome, Firefox, Opera, Safariなど、ブラウザのさまざまなバージョンでの表示確認、レスポンシブの確認などが、簡単にブラウザ上でできるオンラインサービスを紹介します。 有料版だと、ローカルでも確認できる優れものです。 Browserling Browserlingは無料版と有料版が提供されており、無料版はセッションは3分、IEは9/Vistaのみ(他は全バージョン可)、解像度は1024x768のみと使用条件は限られますが、なかなか便利だと思います。 セッションはインタラクティブ 単なるスクリーンショットではなく、ブラウザ上のさまざまなインタラクションを実行できます。 本物のブラウザを使用 サーバー上では本物のブラウザを動作させており、エミュレータなどの偽のブラウザではありません。 最新ブラウザへの対応 最新ブラウザがリリースされたら、すぐにインストールを行
ウェブサイトにFacebookページのタイムラインを表示する方法を紹介します。 1.はじめに ウェブサイトを運営している場合、TwitterやFacebookと連動させていることがあると思います。 ここではFacebookのページプラグインを利用して、ウェブサイトにFacebookページのタイムラインを表示させる方法を紹介します。 2.Facebookページのタイムラインを表示させる Facebookのページプラグイン作成ページにアクセスします。 Facebookのページプラグイン作成ページ 設定項目に必要な事項を入力します。 Facebook Page URL:表示したいFacebookのURL Width:表示させる幅(180~500px) Height:表示させる高さ(最低70px) Use Small Header:ヘッダを小さく表示 Adapt to plugin contain
ウェブサイトにTwitterのタイムラインを表示させる方法を紹介します。 1.はじめに ウェブサイトを運営している場合、TwitterやFacebookと連動させていることがあると思います。 ここではTwitterのユーザーウィジェットを利用して、ウェブサイトにTwitterのタイムラインを表示させる方法を紹介します。 2.Twitterのタイムラインを表示させる Twitterのユーザーウィジェット作成ページにアクセスします。 Twitterのユーザーウィジェット作成ページ 「ユーザータイムライン」タブの設定項目に必要な事項を入力します。 ユーザー名:表示させたいユーザー名を入力 オプション取引:@ツイートを除外する場合や画像を自動的に開く場合にチェック 高さ:タイムラインの高さを入力 テーマ:「明るい」「暗い」から選択 リンクの色:タイムラインに表示されるリンクの色を入力 カスタマイズ
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
こんにちは! ディレクターのまさしです。 最近、通販でTシャツを買いました。代表の吉原ゴウがタイで買い付けてきたOUKYというTシャツなんですが、とっても良いです! さて、ECサイトでは「特定商取引法に基づく表記」というページを必ず見かけますね。このページは、消費者の利益を守る「特定商取引法」に対して、通販事業者がどのようなスタンスを取っているかということを明確に記しておくためのページです。 今日は、インターネット通販事業を営む人たちに向けて「特定商取引法」のおさらいとなる情報をまとめてみました。 特にこれから通販サイトを運営する人は、ぜひ参考にしてみてください! なぜ、特定商取引法があるの? 特定商取引法とは通販などで起こりやすいトラブルから消費者を守るための法律です。全ての通販事業者は特定商取引法を守った上でビジネスを展開しなければなりません。 特定商取引法とは 特定商取引法(旧称「訪
Reactでの開発を学ぶ上で、既存のReactを利用しているサイトを見てその内容を把握するのは良い材料になるでしょう。しかし表面上はDOMを出力しただけなのでReactを使っているのかどうかは分かりづらいです。 そこで使ってみたいのがShow me the React!です。Reactを使っているWebサイトがあればアドレスバーで通知してくれるようになります。 Show me the React!の使い方 Reactで作られているサイトを見ると、アドレスバーにReactのアイコンが出るようになります。 さらにクリックするとReactを使っているDOM部分がハイライト表示されます。 こんな感じでどの部分がReactで生成されているのかが視覚的に分かりやすくなります。 React開発時のヘルパーとして入れておくと便利ではないかと思います。今後、増えていくと思われるReactのシェアを知る上でも
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
こんにちは、デザイナーのサリーです。 サイトをデザインするときに当たり前に入れている「Copyright(コピーライト、©️)」の記述ですが、サイトによって年号があったりなかったり、長かったり短かったり、書き方はさまざまですよね。 今回はコピーライトとは何か、正しい書き方や©との関係性について詳しく解説していきます。 コピーライトとは コピーライトとは、英語で「Copyright」と書き、”著作権”のことを指します。著作権とは、作品を創作した人や会社(著作者)が持つ権利であり、著作者は作品がどう使われるか決めることができます。 Webサイトやホームページの下部にコピーライトがあるのは「ここにある記事や画像の著作権は自社が持っているから、無断転載しないでください」という一種の意思表示です。 厳密にいうと著作権法で著作物は「思想又は感情を創作的に表現したものであって、文芸、学術、美術又は音楽の
シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション(見出しとテキスト)をセットに、a要素で括り、全体をdiv要素で内包します。 <div class="tiles"> <a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a> <a href="#" class="tile"><img src="image.j
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
どのタブがメモリをどれだけ消費しているか一目で分かる無料のFirefoxアドオンが「Tab Data (+Memory usage)」です。メモリ消費量上位5位までのタブの表示や、不要になったメモリ領域を解放するガベージコレクションを実行する機能も付いています。 Tab Data (+Memory usage) https://addons.mozilla.org/ja/firefox/addon/tab-data/ 上記サイトの「+ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「Tab Data がインストールされました。」と表示されたらインストールの完了です。 Firefoxのタブにメモリ消費量が表示されます。なお、20MB以上のメモリ消費量のタブは赤色で表示されます。 開いているタブの中で、メモリを多く消費しているタブを確認する場合、ブラウザ右上の
Excelでセルの数式をまとめて表示する方法を紹介します。 1.問題点 Excelに次のような値が設定されています。 B11/C11/D11セルには、それぞれの上のセルにある数字を合計する数式が設定されています。 B11/C11/D11セルの数式を確認したい場合、数式が設定されているいずれかのセルを選択すれば、数式バーに数式が表示されます。 が、これらの数式をまとめて確認したいのですが、まとめて表示させる方法が分かりません。 ということで以下に2つの方法を紹介します。 2.セルの数式をメニューからまとめて表示する セルの数式をまとめて表示するには、メニューの「数式」を選択。 「ワークシート分析」の「数式を表示」をクリック。 これでセルの数式がすべて表示されます。 セルの横幅が広がっていますが、これは数式表示で自動的に調整されるものです。 「数式の表示」をもう一度クリックすれば元の表示に戻り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く