particles.js is a lightweight JavaScript library for creating particles.
particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
デザイナー志望者は必見！ 採用されるポートフォリオを作る「た行」の法則 - イーアイデム「ジモコロ」
こんにちは、株式会社バーグハンバーグバーグでデザインのアルバイトをしている、お高菜と申します。普段は美術系の大学でデザインを学んでいます。 来年には大学を卒業するので、そろそろ就活の準備をしようかなと思っているのですが……皆さん、こういったものをご存知でしょうか？ こちらは「ポートフォリオ」と呼ばれる作品集。 デザイナーが自分の作品をファイルし、就職先に「私はこういう作品を作っていました」「こんなこともできます」とアピールするための作品集です。 デザイン系の職種の場合、企業はこのポートフォリオを見て学生の力量を判断します。つまり、ポートフォリオの出来が一生を左右すると言っても過言ではありません。 でも…… ・ページ数は多い方がいいの？ ・作品はどのくらい説明すればいいの？ ・そもそも企業は何を知りたくてポートフォリオを見ているの？ など、あまりにも疑問点が多すぎて困っています。 というわけ
デザインの基本日記 「レイアウト編 」｜Design Beginner
写真やイラスト、図、テキストなどデザインする要素をどのようにレイアウト（配置）するかがデザインの仕上がりの肝になる。 同じような情報を連続して並べる場合、リズムをつけると心地よくみせることができる。リズムが崩れると不安定に見え、安心感がなくなってしまうため、同じような情報は制限を作り、リズムよく見せることを意識するのが大切だ。 一方で、リズムを作ることができれば、そのリズムを崩すことで目立たせることができる。同じような情報でも強調したいものとそうでないものの差をつけることで、ユーザーへのメッセージが明確になる。また、その差がないと何を伝えたいのかが、分からなくなりやすい。 ユーザーがどのように目線を動かすか配慮してレイアウトすると、読みやすくなる。一般的には、横書きの場合はZ型、F型と呼ばれ、左上から右下に向かって目を動かすと言われている。 デザイン要素の中に人の目線を使うと、見ているユー
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
シネマグラフをPhotoshopで作成したら意外と簡単だった【考察と作り方/練習素材の提供】
シネマグラフの作成方法について シネマグラフという表現技法をご存知ですか？ 一見すると静止画に見えて、写真全体像の一部がループされた動画になっているGIFアニメーションです。 どのようなものかを実際に紹介します。 以下の画像はcinemagraphs.comの中から引用。 参考1 参考2 参考3 情報源：http://cinemagraphs.com このように、一部が動いてて面白いですよね。 考察 GIFならではのカラーノイズが、静止画っぽさを際立たせています。 動画の中から繰り返しのポイントを発見し、ループの繋ぎ目が自然なほど不思議さが増します。 また、画像内に人物が入っていると、動いている物との対比が分かりやすい。 人物の他にも、風になびく木々や海岸の波、群衆の中の一つ、動くはずのものの一部、炎や液体など発想次第でいろんな組み合わせがあるはずです。 「動かすもの」と「動かさないもの」
デザイナーを伸ばす過程で大切にしたこと｜Nobuo Suzuki
1年目のデザイナーに教えたほうがいいことや、デザイナーを育てるとはどういうことなのか。 自分のことはどうにかなってきた20代中盤。「デザイナー育ててね」と突然言われても何から始めればいいのかもよく分からなかったですし、どうやってアドバイスしたらいいかも分からなかった当時、デザイナーの育成に関する記事があまりに少ない印象だったので、同じような境遇の方の役にたてば嬉しいです。 ※この記事は、2017年4月にMediumで公開した記事を加筆・転載したものです。*** 本人が課題を感じて初めて成長するWe don't know what we don't know. （分からないことが分からない。）突然ですが、他人に言われた時よりも自分で課題を認識できた方時の方が腹落ちしませんか？ 教える側は、相手が分かっていないところが分かるのですが、当の本人は「分からないことが分からない」状態なのです。でも、
HTML5でのアウトラインの書き方について考えてみた。 | Adlib
【セマンティックSEO】という言葉がかなり認知されたのではないでしょうか？ サイト上の文章に意味を持たせることで、これまでクローラーがただのテキストとして認識していたものを、より正確に認識しそのコンテンツが何を表しているのかを知れるようになりました。 セマンティックWEBとは？ セマンティックWebとは、Webページおよびその中に記述された内容について、それが何を意味するかを表す情報（メタデータ）を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。 IT用語辞典 セマンティックSEOと聞いて最近よく取り上げられるのが、schema.orgなどの構造化データだと思います。 Search Consoleでも構造化データマークアップが正しく行え
もうタグ付けで悩まない！HTML5再入門 | MONSTER DIVE
アウトライン、意識してますか？ section、article、悩んでますか？ この記事は、HTML5に対してまだ若干のモヤモヤが残る人のために、スッキリ分かりやすくまとめようと努力してみる『HTML5再入門』です。 すべての内容を網羅するわけではなく、ツボをイイ感じに抑えることが目的です。 アウトラインがなくては始まらない アウトラインとは何か 日本語に訳すなら文書構造。意味はそのまんま文書の構造です。 HTML5に限らず、文章で表現された資料には構造があります。 上図では、言うまでも無く枠で囲ったブロックの構造がアウトラインです。 このアウトラインをHTMLで表現することで、検索ロボットなどの機械が読んでも文書の流れや展開を理解してもらえるようなHTMLが出来上がります。 アウトラインを作る下準備 理屈で分かっていても、実際にその通りにアウトラインが組めているか、確認する手段が無ければ
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita
こんなsectionは○○だ 1.見出しが無い 見出しが無い/用意できない = 章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃない セマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。 多くても３つくらい たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃない セマンティ
![[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f6ba61007b09f1271e822cee8fb7e128662ea29/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSFRNTDUlNUQlMjAlRTYlOTYlQjAlRTglQTYlODElRTclQjQlQTAlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODAlOTAyMDE0JTJGMiUyRjE0JUU3JTg5JTg4JUU1JThCJUE3JUU1JTkxJThBJUU1JTgwJTk5JUU4JUEzJTlDJUUzJTgwJTkxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hMGNiNDNiNTFiMmJjNjM4OGU3NDk5NTgwNmQwNWJjZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWNjb3RzYW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWViNjJjNjg5M2Q4ZTFkMDM5MmVjZmFjZWRlZGY5NTM5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db46bffda810eba3e8a47f4348b4cad12)
MdN Design｜総合情報サイト
Webデザイン 1-02 HTML5による文章構造の厳密化 HTMLはもともと見た目も文書構造も一緒に扱っていたが、そこからCSSという形で見た目を分離し、本来の理念に則った文章の構造を表現する言語になった。しかしHTML4まではそのためのタグが明確に存在せず、HTML5でようやく状況が整った。 制作・文／藤沢立也（Suika Cube Inc.） Browser IE 9over Firefox 4over Safari 5over Chrome 9over HTML5はマークアップを整理し、新たにAPIのWeb標準化を進めることで、これまでのブラウズに関する主だった問題を解消した。またアウトライン・アルゴリズムが新たに導入され、文書構造が非常に明快になった。従来のHTML（及びXHTML）では構造的にあやふやなルール（暗黙的アウトライン）であった見出し要素のレベルによる階層化に対して、
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
jQuery Selectric
// Cache the target element var $selectValue = $('#select_value').find('strong'); // Get initial value $selectValue.text($('#get_value').val()); // Initialize Selectric and bind to 'change' event $('#get_value').selectric().on('change', function() { $selectValue.text($(this).val()); }); $('#set_value').selectric(); $('#set_first_option').on('click', function() { $('#set_value').prop('selectedIndex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
WebEgg.net is for sale | HugeDomains
アイヌとして生きる若者たち――薄れゆく民族意識の中で - Yahoo!ニュース
1日で100個以上のフリーフォントを調べたわたしがおすすめする、おしゃれな日本語フリーフォントサイトまとめ｜あいまいみーのきたろぐ
