今回は、スクロールして、レイアウトが表示領域に入ったらフェードインするアレを加えます。 せっかくなので、最近注目のIntersectionObserver APIを使って実装してみましょう。 スクロールイベントの管理はscrollmagicライブラリーが有名ですが、ネイティブで実装できるにこしたことはないですね。 ※現在IE11やsafariで使用できないので、クロスブラウザ対応には専用のpolyfillが必要です。 対応状況はこちら。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い 最低の幅は1280px 写真は、テキストボックスが少し被る余白を残して画面幅一杯に広げる 表示領域（window）に入ったら要素をフェードイン SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び HTML、CSSを変更 トリガーとなるclassを追加し

Vegan cheese isn’t usually anything to write home about, in terms of taste and texture. Dreamfarm, a startup based in Parma, in the Food Valley of Italy, is hoping to change that. It’s coo

新しいプロジェクトをゼロから始めることは、どれくらい経験豊かであっても、新しいことが学べる素晴らしいチャンスです。Bootstrapなどの完成されたフレームワークは使用せずに、Webサイトを実装した際に学んだCSSのテクニックを紹介します。 4 CSS tricks I've learnt the hard way 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 borderの注意点、box-shadowまたはbox-sizingで 要素にユーザーの注意を引き付ける 要素を水平および垂直の中央に配置する 要素を親要素に対して相対的に配置する borderの注意点、box-shadowまたはbox-sizingで 今までに、borderを使用したことがきっとあるでしょう。borderについて知っておきたいことがあります。 bord

画面を大胆に分割することでそれぞれのコンテンツを引き立たせる**スプリットスクリーンレイアウト（分割画面レイアウト）**を採用しているwebデザインのまとめです。 同レベルのコンテンツを並べる、対比をより効果的に見せる、イメージとテキストをはっきりわける、半分を背景のように見せる、スクロール時に半分だけアニメーションを加えるなど、紹介するサイトにもあるように様々な見せ方が可能です。 Renate Rechner 半分が現在のメインコンテンツ、もう半分が次のメインコンテンツという形で分割しており、スクロールした際の動きが特徴的です。

Result アニメーションエフェクトの不要なら結構シンプルなコードになります css.row figure {/*表示されている画像。*/ height: 240px; width: 240px; margin: 0; background-size: cover; background-position: 50% 50%; transition: all 1s ease-in-out; background-repeat: no-repeat; z-index: 2; display: inline-block; position: relative; } .row a {/*拡大画像を表示させる為の要素*/ display: inline-block; text-align: center; margin: 40px; text-decoration: none; color: wh

DataRobot DataRobotは、1000を超える高度な分析アルゴリズムを備え、データを入れるだけで精度が高い順の予測モデルを自動で作成してくれるプラットフォーム。プログラミング、モデルチューニングの必要はなく、ユーザーは生成されたモデルを選択するだけ、それが機械学習自動化プラットフォーム「DataRobot」です。 2018年5月31日、その開発元であるDataRobot Japanと、DataRobotを製造現場へ導入したパナソニックとのトークセッションが、「日本の製造業におけるAI利活用の最前線」というテーマのもとおこなわれました。 昨年の1月に日本にオフィスを構えたばかりということもあり、国内ではこれからという段階のDataRobot。しかし、DataRobotが掲げる「AIの民主化」の波は確実に来ているんだなと、今回のトークセッションで実感させられました。 井上 昭彦（左

WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。

「AIスピーカーに話し掛けるのが恥ずかしい」がもたらす、ちょっとした大問題：“いま”が分かるビジネス塾（1/3 ページ） Google HomeやAmazon EchoといったAIスピーカーの普及が徐々に進んでいるが、思わぬ障壁が顕在化している。それは、恥ずかしくてAIスピーカーに話し掛けられないというものだ。これが後々やっかいな問題を引き起こすかもしれない。 Google HomeやAmazon EchoといったAI（人工知能）スピーカーの普及が徐々に進んでいるが、思わぬ障壁が顕在化している。それは、恥ずかしくてAIスピーカーに話し掛けられないというものだが、どうもこの現象は日本特有らしいのだ。どのインタフェースを好むのかは個人の勝手だが、AIスピーカーの場合、少々やっかいな問題を引き起こす可能性がある。 周囲に人がいなくても操作したくないという人が多い AIスピーカーは基本的に利用者に

Android Bazaar & Conference 2018 Spring 用の発表資料です。 実際は7つの法則について語ってないけど(^_^;;;

他人のパソコンのＣＰＵ（処理装置）を借用して、仮想通貨のマイニング（採掘）を手伝わせる「コインマイナー※」。仮想通貨ブームもあって話題になっているが、そのプログラムをサイトに設置している運営者たちが、不正指令電磁的記録（ウイルス）供用や保管などの容疑で相次いで摘発されている。コインマイナー用のプログラムが「ウイルス」と判断されたからだが、技術者からは疑問や反発の声も出ている。なぜなのか。 【用語解説】コインマイナー 仮想通貨取引の正しさを証明するための計算作業に参加し、対価として仮想通貨を入手することを金の採掘に例えてマイニングと呼ぶが、計算には高性能なコンピューターが必要だ。このため、他人のコンピューターの処理能力を借用して行おうとするのがコインマイナー。今回、捜査対象となっているのは、自分の運営サイトにコインマイナー用のプログラムを設置していたケースだが、このほか、第三者がサイトを改ざ