最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
jQuery非依存で手軽にパララックス「Rellax.js」 | ブログ - Blog | 佐藤純平 - Jumpei Sato
はじめに jQuery非依存でパララックスエフェクトを実装できる「Rellax.js」をご紹介します。 軽量で、導入も手軽です。 公式DEMOはこちら 使ってみる まずダウンロード こちらから 設置する jsの読み込み パスは適宜変えて下さい。 <script src="assets/js/rellax.min.js"></script> パララックスの要素を設定 パララックスさせたい要素に任意のclass、今回は「rellax」を付与します。 <div class="rellax"></div> jsを実行 <script>var rellax = new Rellax('.rellax');</script> これだけでパララックスが実装できます。 すごい楽。 その他にもオプションが用意されています。 速さやパーセンテージ、要素の重なり順も指定することが出来ます。 <div class
Googleタグマネージャで外部リンクのクリック数を計測する（2017年最新版） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
Webサイトを運営していると、外部サイトリンクのクリック数、PDFのダウンロード数などを計測したい場合があります。Google Analyticsの通常の設定では、これらを計測することができませんが、「イベントトラッキング」を設定することで可能になります。 イベントトラッキングは、計測したいリンクタグ（aタグ）などに「onclick属性」を追加する必要があり、やや手間がかかります。しかし、Googleタグマネージャを使うことで、簡単にイベントトラッキングの設定ができます。 今回は、Googleタグマネージャでイベントトラッキングを設定して、外部リンクのクリック数やPDFのダウンロード数を計測する方法をご紹介します。
Adobeよ、お前もか！ WEBサービスやアプリの「嘘っこCMYK値」には気をつけろ！
忙しい人のためにざっくり要約 WEBサービスやアプリで、ある色のCMYK値を出す実装は単純な計算式によるものが多い。あり得ない値になるから、数値を信用ないほうがいいよ。 ACEを使ってプロファイル変換ではじき出した数値を出せないなら、無理に実装しないほうがいいんじゃないかな？特にAdobeさん、本家でしょ。 WEB版とアプリ版で出力値が違うのもどうにかしようよAdobeさん。 RGB→CMYKへ画像変換するサービスも、ターゲットとなるCMYKは日本国内向けではないものが多いので、思ったよりも色が変わるよ、注意しよう。 と言うわけで出自の分からない野良CMYK値はアタマから疑ってかかろう。特にロゴマークのガイドラインのCMYK値は。 Adobe Color CC、というサービスをご存じでしょうか。いろんな配色ルールを当てて、スウォッチをAdobeソフトウェアで共有できたりします。 『カラーホ
Zurb Foundation 6 を使うとサイト構築がとっても楽ちん - 楽しい！わんわん動植物園
※ 当記事はFoundation 6.2時代に書かれたものです。現在のバージョンではXY-Gridが導入され、そちらを使用することが推奨されます。 本記事はZurb Foundation 6についての解説書です。 筆者はCSSフレームワークを触ったことがない状態から1年間Foundation 6を試行錯誤している状態です。まだ使いこなせていない機能が幾つかありますが、Foundationは作業効率を上げるのに十分な力を持っているフレームワークです。 既存WebサイトにFoundationが使用され困っている人や、Foundationを使用して制作をする人に活用していただけば幸いです。 本記事ではCSSフレームワークについては簡単な説明をしますが、Foundationはバックエンドのフレームワークに比べて簡単なため、Foundation 6の主な記法と、メリットが大きい機能を中心に解説します
Bootstrapだけじゃない！2017年のCSSフレームワークベスト5
WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。 CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。 この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求めるものに応じて使い分けてください。プロジェクトが単純なら、複雑なフレームワークは不要です。また大半はモジュールベースですから、必要なコンポーネントを選んで使うか、別々のフレームワークのコンポーネントを併用することもできます。 紹介するフレームワークはGitHubの評価を基にしているので、最初に紹介するのは、もちろん一番人気のBootstrapです。 注：紹介する情報の一部は翌週ないし翌月には古くなっ
The Best Color Tools For Web Designers
The Best Color Tools For Web Designers Colors are the very basic and important element of any design, you need to be really careful about creating colors for your designs. Today we are talking a little bit about colors in web design and we have collected some good tools and articles to help you master in creating color combinations. Colors considered to be the important factor of any kind of desig
iOS11(GA版)におけるScreen Recording(スクリーンキャプチャ)と動画再生の関係まとめ - Qiita
iOS 11で変わったこと OSのNative機能としてScreen Recording(スクリーンキャプチャ)機能が追加されました。iPhone端末の画面上で表示している映像や音声を、ビデオ(動画)として録画, 保存できます。 ここでは、動画コンテンツを配信している事業者さん向けに、主にコンテンツのセキュリティをどのように担保するのかといった観点で記述します。 既にAndroid で導入されているScreen Recording APIに似ていますが、使い勝手がちょっと違うのでまとめてみました。 AndroidでのScreen Recording制御方法についてはこちら テスト結果と対策方法 音声収録 ふつうに画面中の音声も綺麗に録音できる。Preview 版では「画面中の音は録音できず、外部マイクから録音できる」仕様だった認識だったが、GA版で変わった？ コントロールセンターからキャプ
Brightcove Player(NGP)で音量をデフォルトミュートにする方法 - Qiita
Brightcove Playerとは VideoJSのAPIやプラグインを拡張したプレイヤー http://www.videojs.com/ Developer Docsはこちら http://docs.brightcove.com/en/video-cloud/brightcove-player/index.html やりたいこと プレイヤーロード後に音量をデフォルトミュートにしたい。 <script id="script" type="text/JavaScript"> videojs("PlayerId").ready(function(){ var player = this; player.muted(true); }); </script> Register as a new user and use Qiita more conveniently You get artic
iOS10 Mobile Safariにおけるビデオの自動再生（インライン再生） - Qiita
iOS 10で変わったこと これまでのMobile Safariでは、HTML<video>タグでembedした動画を自動再生させることができませんでした。これはHTML5ではなくApple社による制約事項です。 そのため、アウトストリーム動画広告(インフィード, インバナー等)ではCanvasにレンダリングするなど、<video>タグを使用しないワークアラウンドが一般的でした。 これがiOS10からは、条件付で<video>タグを自動再生できるようになりました。 https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html 記述例 デフォルトの挙動
【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
【iPhone】 「追加日順」のプレイリストを作る方法
こんにちは、さち です。 聴きたいから iPhone に新しく追加したのに、いざ聴こうと思ったらその曲に中々たどり着けない。 何で、iPhone は追加日順で再生できないんだぁー！！！ そんな時は、「スマートプレイリスト」を使えば解決です。 スマートプレイリストを作ろう iPhone(iPod) 内の曲を追加日降順で並び替えるには、「スマートプレイリスト」という機能を使います。 では早速、「スマートプレイリスト」を作っていきましょう。 iPhone を PC に接続。「iTunes」を起動して iPhone を選択します。 「自分のデバイス上」にある項目を適当に選択。 下部にある「＋」アイコンをクリック→「新規スマートプレイリスト」と進みます（上部メニューの「ファイル」→「新規」→「スマートプレイリスト」でも可）。ショートカットは Ctrl + Alt + N キーです。 「次のルールに一
モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」の声が聞こえてきます。 行き過ぎだと思いますか？ 実際のところ、2015年には上位サイトへのすべてのトラフィックが、モバイルで56％を占めていました（2015年 トラフィック レポート）。この割合は上昇し、2016年のデータはまだありませんが、専門家はモバイルのトラフィックが全体の60％を大幅に上回っていると考えています（モバイルのトラフィックは増加し続ける唯一のデバイスです）。 デスクトップユー
UXデザイナーと何が違う？最近話題の新しい職種「UXライター」とは？
2016年後半から、GoogleやAmazon、DropboxやPaypalなど、シリコンバレーに名を連ねるさまざまな企業が新しい職種の求人を出し始めているのを、ご存知でしょうか。 その新しい職種とは、「UXライター」(UX Writer)です。 これまでも、これに近い職種として「UXデザイナー」と呼ばれる人々は確かに存在していました。 UXライターは、UXデザイナーと一体何が違うのでしょうか。 今回は、AmazonやGoogleなどで積極的に採用している「UXライター」とはどんな役割なのかをご紹介します。 新しい職種としての「UXライター」 「UXライター」とは、シリコンバレーのテック系企業を中心に採用が始まった新しい職種です。 もちろんUXとはUser Experience(ユーザー体験)のことなので、UXライターとはユーザー体験を生み出すためのライティング業務を行うことになります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
開放型ヘッドホン顔負け、聴いてみたいイヤホン AZLA AZLA Meteor Gray
http://chibinowa.net/modx/modx.html
Engadget | Technology News & Reviews
「事件」を見る代わりに「構造」を見よう。「今日」を見る代わりに「毎日」を見よう。『デ・コレスポンデント』はニュースをこう変える
基本から変わり種まで！具材バリエーション満載の簡単なみそ汁レシピ集