WebサイトやモバイルアプリなどのUI/UXデザイン、プロトタイプ作成、共有までを1つのアプリで実現する、Adobe XD。このチュートリアルシリーズでは、XDの基本的な使い方をご紹介しながら、デザインとプロトタイプを完成させるまでの手順を動画でわかりやすく解説していきます。まずはワイヤーフレームの作成から始めましょう。
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする Google Analytics (アナリティクス) のトラッキングを、ユーザーの同意有無によって有効にしたり、無効にしたりするための簡単な JavaScript を書いてみましたというお話。 少し前に会社の Web サイトでたまに更新しているコラムで、GDPR (General Data Protection Regulation)」、日本語で言うところの 「EU 一般データ保護規則」 に関連して、Google Analytics に新たに加わった 「データ保持」 の設定についての記事を書きました。 Google Analytics に新たに導入された「データ保持」の設定に関する誤解と対策 - バーンワークス株式会社 私、および私の会社は GDPR 等、法務関連が専門分野ではないため、具体的
「あ、EUからのアクセスを拒否したいな......」と思うこと、ありますよね。私も今日、そう思いました。 私は趣味と実益を兼ねて(いるつもり)、いくつかのしょうもないWebサービスを個人で運用してるのですが、そこに対するEUからのアクセスを遮断したいと思い、それを nginx で対応してみたので、そのメモです。 手順 基本的にはこちら↓の知見の固まりを参考文献としています。 inaba-serverdesign.jp EU加盟国は、外務省のページ(EU加盟国と地図 第5次拡大|外務省)によると以下の28カ国。 アイルランド イタリア 英国 エストニア オーストリア オランダ キプロス ギリシャ クロアチア スウェーデン スペイン スロバキア スロベニア チェコ デンマーク ドイツ(加盟時西ドイツ) ハンガリー フィンランド フランス ブルガリア ベルギー ポーランド ポルトガル マルタ ラ
「買ってよかったもの」という Web サイトをリリースした。リリースしたのは昨年のクリスマスイブだったけど、リリース記事を書きそびれてた。 買ってよかったものをまとめるサイトをつくりました。みなさんの2017年買ってよかったものを教えてください! https://t.co/jOVDhSz67f— もりしん (@morishin127) 2017年12月24日 作ってから少し経ってしまったけど、覚えてるうちに作った経緯とか開発の流れとかリリース後の反応とかを書いておく。 経緯 自分が買ってよかったものを人に紹介したいと思うことが時々あって、ツイートしたり喋ったりしてたけど、そういう情報が集まる場所があれば良いかもと思ったのがきっかけ。年末になると「20XX年買ってよかったものまとめ」みたいなブログ記事がたくさん見られるから、紹介したい or 見たいニーズがありそうで、場があればブログ持ってな
ワークショップ「お問い合わせフォームを作成する」の第1回目はお問い合わせフォームの入力ページのHTMLを作成します。 この記事のポイント お問い合わせフォームの入力ページを作成する フォームの入力データが実際に送信&受信できるか確認する ワークショップ第1回目は、お問い合わせフォームを作成するファイルを作成し、基礎となるHTMLを作成していきます。 早速ですが、実際にファイルを作成してコードを書いていきましょう。 まず、「index.php」というファイルを新しく作成して、以下のHTMLコードを書いてください。 ※今回作成するコードは以下のGithubのページからダウンロードすることができます。 vol.1のサンプルコード – Github index.php <!DOCTYPE> <html lang="ja"> <head> <title>お問い合わせフォーム</title> <sty
!مرحبا アラビア語にようこそ! 今では、世界中の様々な国からユーザーが自分のサイトへ訪れます。 アラビア語を話す人は、420,000,000人です。アラビア語は(ヘブライ語とペルシャ語とモルディブ語も)右から左に記述する言語です。なので国際化 (internationalization/i18n) が難しいです。私は、アラビア語のクラスを受講する前は、普通のウェブのプログラマーでした。クラスの受講後、私は、色々なFOSSのプログラムにアラビア語の国際化の為プルリクを送りました。これは私が初めての日本語で書いたプログラミングの記事です。 アラビア文字 日本語と同じなテクスト/ストリングと、CSSの writing-modeと縦書きか横書きか書くできます。 アラビア語で右から書くのに、ストリングの一番目のchar型が単語の1番目の文字です。 مرحبا「マルハバ(こんにちは)」の中を見
[レベル: 上級] schema.org でマークアップされた構造化データのすべてのプロパティをGoogle はインデックスする 可能な限り多くの構造化データをマークアップした方がいい 2018年4月6日に開催された ISM Spin-off #4 − Google Search Night で Google の Gary Illyes(ゲイリー・イリェーシュ)氏は、このように発言しました。 セッションの合間に僕が 1対1 でゲイリーと話したときのことです。 検索に使っていなくてもインデックスしている schema.org が定義する構造化データには非常に多くのタイプとプロパティが存在します。 リッチリザルトなどで Google が利用しているのは、ほんのごく一部です。 いったい Google はどのタイプのどのプロパティをサポートしているのでしょうか? リッチリザルトで使われない構造化デ
昨日、某蔦屋書店に行き出会って4秒で購入した本をご紹介します。 配色アイデア手帖 本のタイトルの通り「よくある配色アイデアがいっぱい載っている本」だと思って頂いても構わないのですが、とりあえず私が実際に購入までに至ったお気に入りの点を聞いてください。 127セット×25パターン=色見本3175選 本書は「Recipe(レシピ)」という名目で1レシピで9色ずつ使った配色アイデアが紹介されています。 CMYK、RGB、カラーコード レシピに使われる9色はそれぞれ名前と簡単な色のイメージ解説つき。 さらにDTPデザイナーにもWEBデザイナーにも嬉しいCMYK、RGB、カラーコードもしっかりと掲載されています。 豊富な配色例 1レシピには9つの色とその9色を使った配色例が25パターン載っています。 2色配色 2色配色が9パターン。 ちょっとした背景素材のパターンをつくる時なんかに良さそうですね。
要約 2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。 しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。 ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。 本文 Webpack によるモジュール分割 Webpack は JavaScript の バンドル を担う。 たとえば、次のコードを分割することができる: 分割前
Web Components とは何か 簡単に言ってしまえば、オリジナルタグを作れるHTMLの仕様です。 このあたりの記事が詳しいです。 https://html5experts.jp/shumpei-shiraishi/24239/ 良い感じに小さくまとまっている実装が無かったので自作してみました。 Hello, Worldタグを作る こんな感じになります。 https://iwtn.github.io/hello_world_tag/ 後述しますが、ブラウザのサポート状況は微妙でChromeでしか表示できないと思います。 ソースコードはこちら https://github.com/iwtn/hello_world_tag Developer Tools で見ると、オリジナルのタグで出来ていることがわかりやすいと思います。 3つの基本要素(本当は4つ)と基本的な作り方 template
アマナの取り組み 写真で世界をカラフルに! フォトグラファー・AKANE:Creators for Society⑨
CSSアニメーションで円形プログレスバーを作ってみました。JavaScriptやSVG、画像は使っていません。 サンプル(GIF) HTML .circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-origin: right 60px; z-index: 2; ani
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon. To create these animations, I followed the guidelines from
2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く