![Loading...](https://cdn-ak-scissors.b.st-hatena.com/image/square/7765d0418865a4f053197b9d3b520b185f3d72c3/height=288;version=1;width=512/https%3A%2F%2Fxn--web-oi9du9bc8tgu2a.com%2Fwp%2Fwp-content%2Fuploads%2F2017%2F08%2Fswiper02_thumbnail_03.jpg)
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ`)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs(スケーラブル・ベクター・グラフィックス)の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。 休日は仕事しないって決めてるんだけど、ちょっと空いた時間とかにこうやってブログ書けるのが良い。 iOSではbackground-attachment:fixed;が効かない!? ちょっとおしゃれなホームページを作ってくれと言われたら、 簡単にできるものとして背景固定のパララックス風のページデザインがあります。 こんなやつです。 Frankie's Sports Bar & Grill よくあるこんな感じの背景を固定して前面の要素だけが動くようなデザインですね。 シンプ
z-indexをつかって要素の順番を変えていたのですが、どうにも思った通りにいかないことがありました。 今回はそんなハマったパターンになります。 親子関係になっているタグで親要素に z-index: auto 以外の値を指定した場合 <html> <head> <title></title> <style type="text/css"> .parent { padding-top: 20px; padding-left: 20px; width: 100px; height: 100px; background-color: #ff0000; position: relative; z-index: 2; } .child { width: 100px; height: 100px; background-color: #ff9999; position: absolute; top:
初めに よし、ヘッダーを画面上に固定してやろ(^ω^) って時に え、ヘッダーの上に文字が来るんですけど( ‘д‘⊂彡☆))Д´) パーン とか スクロールして、動的におしゃれに上部メニューを表示させたいのにスクロール中に表示されない( ‘д‘⊂彡☆))Д´) パーン とかそんな事件の対処法をテンションに任せて書いていこうと思います。 事件1「z-index」 概要 ヘッダーにposition:fixedを指定してtop:0,left:0で画面上部に固定しているのに なんで他の要素が上に来ているの!?という事件。 DEMO DEMO キャプチャ code html <body> <div class="div_elm"> hoge </div> <div class="fixed_elm"> hoge </div> <div class="div_elm"> hoge </div> <
今回起きた事象をシンプルなコードで再現してみました。 See the Pen z-index3Dver by BICOxxx (@BICOxxx) on CodePen. サンプルでは赤と青の大きなdiv要素が並列の関係になっており、青divの子に緑のdiv要素があります。 A(赤色)…position:absolute; z-index:2 を指定。(見やすくするためやや透過) B(青色)…position:absolute; z-index:1 を指定。 C(緑色)…青divの子要素。transform: translate3d(0,0,150px); を指定。 という感じ。 おおよそのブラウザでは下の図のように、上からA → C → Bの順で重なって表示されます。 ほとんどのブラウザの表示 しかし、Safariで先ほどのcodepenを見るとわかるかと思いますが、iOSとMacのSa
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD](92MB) 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
スマホ(iOS)でも動画を自動再生させよう!(iFrame Player API、videoタグ対応) こんにちは、やまだです。 ここ数年、メインビジュアルに動画を入れるサイトが増えてきています。 しかし、iOS10のsafari、つまりiPhoneでは自動再生がされないため、スマホの時は静止画で対応しているサイトも多く見受けられます。 やっぱり動画にしたい!という人のお悩み解決! スマホでも自動再生させましょう!! まず結論から サイト内に動画入れる方法として、 iframe APIを使ってyoutubeから呼び出す videoタグを使用する というのが一般的かと思います。 最初に結論を述べると、 どちらの方法でもスマホでは無音でインライン再生なら自動再生することができます!! どういうことかは、つべこべ言わずにやってみましょう! iframe APIの場合 まずは、通常の手順で動画を埋
webサイトで動画を扱いたい場合にはHTML5から導入されたvideoタグを使用するのが一般的です。今回はvideoタグの基本〜応用的な使い方までを丁寧に解説し、HTMLで動画を使いこなせるようにしていきます。 記事の最後ではおまけで「背景全体に動画を表示する方法」も紹介していますよ。 webサイトに動画を埋め込む方法 webサイトに動画を表示させる方法は iframeタグを使用する(youtubeなどの動画サイトから読み込む)videoタグを使用する(動画ファイルをアップロードして読み込む) という2つの方法があります。今回はスタンダードな「video」を使った動画の埋め込み方法を解説します。 後ほど「iframe」を使った動画の埋め込み方法の紹介します。
やりたいこと 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。 16:9のレスポンシブ対応をする。 サムネイル画像と埋め込みiframeで表示位置がズレないようにする。 サンプル https://hi3103.net/study/1902-loadytlater/ 用意するもの 埋め込みたいYouTube動画のID 再生ページのURLのパラメータにある文字列を控える https://www.youtube.com/watch?v=【動画ID】 ソース HTML imgタグのソースに指定しているYouTubeサムネイル画像は、以下のエントリーを参考にURLを取得。 YouTubeの動画のサムネイル取得が思った以上に簡単だった件 | EMiAC-Works <div class="embed-res
最近では鮮やかなグラデーションを背景などに採用するというのが1つのトレンドになっていますよね。単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。 CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。 それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう! 背景グラデーションをCSSで実装する方法 背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。 background: linear-gradient(#FFB3E7,#FF54C
こんにちは、Ryohei(@ityryohei)です! スクロールして要素が表示されたら何らかの処理をさせる手法は、色々なサイトで見かけますね!画面をスクロールしていくと要素がふわっと表示されたり、横からスライド表示されたり、文字がどん!と大きくなったり、バリエーションは様々です。特に最近は、ユーザーが視覚的に楽しめるようにサイト全体に動きをつけることが多くなっているため、スクロールしてアニメーションを実行する処理の需要は高まっているように感じます。jQueryではプラグインも数多く存在し、それぞれ独自の動きをつけることが可能です。が、今回は簡単な処理を実装するだけになりますので、プラグインを利用せずに、スクロール中に指定した要素が出現したら処理を実行する方法をご紹介したいと思います! スクロール位置を取得するのに必要な情報 目的の処理を実行するためには下記の情報が必要になります。 スクロ
ハンバーガーメニューの実装方法 それでは実装方法を解説していきます。 HTML <header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul>
Webデザインをする上で欠かせなくなってきているアニメーション。PCやスマホなど対応デバイスが増えたことで、クリエイティブに対しての重要度も高まってきています。実例を元にどんなWebアニメーションが良いのか紹介しています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。 機能的で楽し
\月刊!/ソーシャルトレンド #26 キャッチーすぎるタイトルで話題! 「チンアナゴ顔見せ祭り」 ほか【2020年6月】 田中 雄一郎 デジタルで遊ぼう! #3 Webアニメーションの種類と実装方法 2017/02/03西田 慎吾 クロスコミュニケーションUXM本部 クリエイティブ TIPS デザイン html5 Flash JavaScript UI エンジニア UX(ユーザーエクスペリエンス)を高める手法のごく一部ですが、Webサイトにインタラクション性を持たせたり、アニメーション演出を加えたり、動的なWebサイトを作るには、HTML以外の技術を使う必要があります。その技術には、はやり廃りがあり、また用途に応じても、選択されるものが変わってきます。今回は、Webアニメーションを実現するための仕組み、を解説したいと思います。
こんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く