サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【移設】マネジメント「ロジック構築」 | ステンレス配管のベンカン
執行本部東京営業所開発営業課〒143-8567 東京都大田区山王2-5-13 大森北口ビル TEL : 03-3777-1531 FAX : 03-3777-1500 アクセス 札幌営業所〒060-0042 北海道札幌市中央区大通西12-4 あいおいニッセイ同和損保札幌大通ビル TEL : 011-232-1921 FAX : 011-232-1924 アクセス 仙台営業所〒981-3133 宮城県仙台市泉区泉中央3-27-3 日泉ビル TEL：022-772-8471 FAX：022-772-8472 アクセス 名古屋営業所〒450-0002 愛知県名古屋市中村区名駅3-3-2 志摩ビル TEL：052-571-3270 FAX：052-571-3276 アクセス
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
状態のトランジション — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
Enter/Leave とトランジション一覧 — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用
![SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c0639a571a5571b378855b1f6fd361c9080dbcf/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F02%2F30145102%2F01_ogp.png)
WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ？
このブログでもレスポンシブイメージについて何度か紹介していますが（ココとかココで）、2015年の暮れにリリースされたWordPress 4.4 Clifford からsrcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ（srcsetとsizes）が使われていることになるそうです。 このブログも先日WordPress 4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。 基本的な仕組み 管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入される ポリフィル（Picturefill）は
デザイナーとしての「ゆるやかな死」｜モンブラン｜Designer × VTuber
アダルト業界でデザイナーとして働いていた頃、 あるデザイナーの「ゆるやかな死」を見たことがある。 ここでいう「ゆるやかな死」というのは、 「アウトプットの決定的な低下」のこと。 ▼ 音声で聞きたい方はこちらからお聴きくださいｂ ▼ エースデザイナーの「異変」その人（以後、Nさんとします）は僕が新卒入社する前から、DVDジャケットのデザインを1ヶ月で10点前後作り続けている現役バリバリのグラフィックデザイナーだった。 月で10点は、ジャケット以外の業務も含めれば余裕で週3くらいは残業が必要な量。それをNさんは月に1回くらいの残業で平気にこなす。 言うなればエース、シニアとも言えるデザイナーさんだった。 そんなNさんがある時から変化が生じ始める。 アウトプットのテンプレ化AVは「シリーズもの」が多い。 かの有名な「マジックミラー号」も、様々なシリーズ、企画内容が出ているが、それらをまとめて「マ
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
画像のレスポンシブ化。画面サイズに合わせて読み込む画像を変える方法 | YETI NAVI
レスポンシブサイトを制作する際に気にしたいのが、画像のレスポンシブ化。 画面サイズやディスプレイの画素密度に合わせて最適な画像だけを読み込むことで、無駄に通信が発生させないようにし、ページの表示速度を上げましょう。 CSSのメディアクエリを使用する場合 画像をimg要素で読み込むのではなく、背景画像として読み込ませます。 背景画像はdiv要素に適用します。 そのdiv要素の縦横比が常に一定に保たれるようにします。 横幅がiPad以上の時は”image-large.jpg”を、以下の時は”image-small.jpg”を読み込むようにします。 デモ (ブラウザサイズを変えてみてください。画像が変わります。) //example.html <div class="image"></div> //style.css .image { width: 100%; background-image:
CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」
basicScrollはCSS変数を利用してスクロール時に要素にエフェクトを与える事で実装できるパララックス効果の導入をサポートしてくれるライブラリです。スクリプトはバニラで非依存なので使いやすいと思います。スクリプトで変数に値を入れてCSSで以下のように設定すればclass付与で設定したエフェクトを簡単に与えることができます。 .fadeBox { opacity: var(--o); }従来の方法よりも軽量化出来そうですが、問題はブラウザですね。 以下はCSS変数のブラウザ対応状況です。 IEやOpera mini、昔のAndroid標準ブラウザでは使えません。本ライブラリは一応モバイルもサポートした設計となっているようです。Opera miniの利用率は把握していませんが、問題ないレベルなら導入もありかもしれませんね。Android標準ブラウザはもう無視で良い気がしますが、不安ならU
中国のUIデザインに特化するスタートアップEICOに行ってきた！｜Goodpatch Blog グッドパッチブログ
実は2017年5月に、Mobikeの体験設計を手がけたデザイン会社に直接訪れる機会がにありました。EICOはGoogleやAmazon、Alibabaといった大企業から、MobikeやOnePlusなどのスタートアップまで満遍なく手がけています。また、関わるサービスのフェーズも0→1から1→10までさまざまです。 今回は、彼らの組織編成やデザインプロセス、気になるクリエイティブなプロダクトのデザイン戦略について聞いてきました！ EICOってどんな会社？ EICOは、製品やブランドの真の価値を創造するために、デザインコンサルティング事業に特化したスタートアップです。現CEOである张伟（Rocky）と许士彦（Ricky）が2004年に北京で設立し、現在13年目。社員数は現時点で約60人、そのうちの90%がデザイナーなのだそうです。みんなプロフェッショナルでデザインに熱意のある人ばかり！ 彼らの
Webクリエイター ボックス on Twitter: "ツール：素敵な配色を提案してくれる【Pigment】左のパネルから色相・彩度・明度の調整可能 https://t.co/ObfNwxWPcU"
ツール：素敵な配色を提案してくれる【Pigment】左のパネルから色相・彩度・明度の調整可能 https://t.co/ObfNwxWPcU
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。 CSS Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できます。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。 明るさを使った表現 明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://twitter.com/i/web/status/964472271480893440
360°web ー画像アップでお手軽360° webサイト作成ー
http://twitter.com/i/web/status/964471017644089344