関西のおトクで楽しいおでかけ情報サイト マイ・フェイバリット関西このサイトに掲載されている情報はJR西日本が提供しております。 COPYRIGHT © WEST JAPAN RAILWAY COMPANY ALL RIGHTS RESERVED.
まいにち使える、一生もの。ARAS（エイラス）公式ストア
1決済2万円(税込)以上で箸(ブラック)2膳、3万円以上で箸(ブラック)2膳＆箸置き(グレー)2つをプレゼント！
株式会社メルカリ
「地球資源が限られているなか、より豊かな社会をつくるために何ができるか」。2013年、創業者の山田進太郎が世界一周の旅で抱いた課題意識から、フリマアプリ「メルカリ」は生まれました。私たちは、物理的なモノやお金に限らずあらゆる価値を循環させることで、誰もがやりたいことを実現し、人や社会に貢献するための選択肢を増やすことができると信じています。テクノロジーの力で世界中の人々をつなぎ、あらゆる人の可能性が発揮される世界を実現していきます。 「地球資源が限られているなか、より豊かな社会をつくるために何ができるか」。2013年、創業者の山田進太郎が世界一周の旅で抱いた課題意識から、フリマアプリ「メルカリ」は生まれました。私たちは、物理的なモノやお金に限らずあらゆる価値を循環させることで、誰もがやりたいことを実現し、人や社会に貢献するための選択肢を増やすことができると信じています。テクノロジーの力で世
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
jQueryで作るマウスに合わせて背景が動くパララックス | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
ラジオボタンをおしゃれにするCSSスニペット16選。ポチッ！で感動をお届け。 | KodoCode
フォームのデザインをかっこよくするラジオボタンのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「ラジオボタン」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・サイズのラジオボタンCSSデザイン例。クリックで色が変わるシンプルなラジオボタン。選択中の項目が分かりやすい。See the Pen CSS radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen. オンフォーカスで明度が上がり、クリックでさらに色が変わるタイプのシンプルなラジオボタンです。 クリック時にtransitionが
CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ) | UNORTHODOX WORKBOOK | Blog
jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ
リストを絞り込む処理を実装してみる
リスト表示している要素をJavaScriptを使って動的に絞り込む処理を実装してみます。 サンプルコード 選択項目から1つを選択すると、それに関連するリストのみの表示に絞り込みます。 HTML <ul class="searchList"> <li><a href="#all">全て</a></li> <li><a href="#dog">イヌ</a></li> <li><a href="#cat">ネコ</a></li> <li><a href="#monkey">サル</a></li> <li><a href="#dolphin">イルカ</a></li> <li><a href="#jellyfish">クラゲ</a></li> <li><a href="#penguin">ペンギン</a></li> <li><a href="#turtle">カメ</a></li> <li><a
Vueのライフサイクルを完全に理解した - Qiita
Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。 ここでは、インスタンスのライフサイクルごとに説明したいと思います。 インスタンス作成時 インスタンス作成時には以下の2つのフックを実行されます beforeCreate <script> export default { data(){ return{ hoge:"a" } }, beforeCreate () { console.log('hoge is: ' + this.hoge) } } </script> /
Vue.jsでjQueryと共存させる方法 - Qiita
今回、Vue.jsをなんとか覚えようと思って頑張ってみました。 巷でよく「デザイナーでもとっつきやすいVue.js」とありますが、私の場合、アニメーションなどのDOM操作を中心にjQueryを使用しているので、その場合は全然とっつきやすくはなかったです。 開発側でない為に、開発の基本的概念の知識が乏しく、Vue.jsの概念を理解したり、環境構築したり、というところでつまづいてしまいました。 であるならば、無理してまずはVue.jsで書ききる必要もなく、学習コストを下げるために一旦、Vue.jsとjQueryと併用で使いながらちょっとずつ覚えていけばいいんではないか・・・と思ったので、今回は併用する手段を紹介しようと思います。 1.VueをCDNもしくはローカルで読み込ませるパターン Vue.jsがどのように動いているかを学ぶにあたって、このパターンが一番とっつきやすかったです。 LPなどの
Vueで複数条件(or検索とand検索)での絞り込み検索を行う方法
Vueを使った検索機能を実装中で、or検索（チェックボックス）とand検索(セレクトボタン)を併用した絞り込み方法がわかりません。 尚、or検索（チェックボックス）を使った絞り込みまでは成功しています。 今回やりたいこととしては、その検索結果から絞り込みを行いたいと考えております。 仕様 ・10件の会社データがあり、エリア（東京か大阪）をチェックボックスで選択できる ・上記でチェックをつけた後、さらに徒歩（5分、10分、15分）での絞りこみを行う // まだ未完成の状態 わからないこと ・セレクトボックスを実装する場合の、vueでの記述方法がわかりません ・チェックボックスで選んだ結果を反映させつつ、そこから絞り込みを行う方法がわかりません HTML <div id="app"> <p>件数:{{filteredList.length}}件</p> // 結果件数の表示 <p>エリア<
Vue.js + Vuexでストアの絞り込み検索（フィルター）
Vue.js + Vuexでストアの絞り込み検索（フィルター） LaravelでSPA（タスク管理アプリ）作る日記5回目です。今回はVuexのStateに対して絞り込み検索を実装します。 投稿日2018年11月21日 更新日2018年11月21日 この記事は下記の続きです。 Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 Laravel + Vue.js にVuexを導入する LaravelでCRUD APIを作成する Laravel+Vue.js+VuexでフロントのCRUDを作成 完成イメージはこんな感じです。 ストアの作成 ストアから見ていきます。 tasksステートは実際はサーバーから受け取るデータなので実際は空ですが、データ構造は次のようになっています。 resources/js/store/modules/task.js const state
Vueで複数条件(and,or,フリーワード)の絞り込みを実装する - Qiita
まずはサンプル 機能の違いが多少ありますが、下記記事のVueJS版になります。 jQueryを使った複数条件(and,or入り混じり)の絞り込みを実装する 表示しているのはこちらの記事で使ったお店のリストの改良版です。 今回は管理するデータがより多く複雑になったので、データはjson形式でまとめてaxiosで読み込んでいます。 絞り込みの条件 グループ化されたカテゴリがあり、同グループ内を複数選択した場合はor（和食||洋食）、グループを跨いで選択した場合はand（和食||洋食&&肉）での絞り込みになります。 またフリーワード検索を作り、これもフリーワード&&選択したカテゴリというふうにandで絞り込まれます。 jQuery版との比較 データバインディングの面でVueが圧倒的に優れています。さすが。 そのおかげでjsのソースもシンプルに書くことができました。 必然的にオブジェクト指向に則っ
ユニトラスト - UNITRUST
ユニトラストは、「信頼」と「誠実」、二つの言葉を大切に活動しています。「信頼」とは、「想い」が介在し、期待や理解がある状態のこと、「誠実」とは、ポジティブでクリエイティブな行動のことです。 期待や想いを理解する想像力があってこそ、信頼が生まれます。信頼は自由な発想を生み、本質を捉えたアイディアにつながります。また信頼を得るため、「想い」に挑戦する。ポジティブでクリエイティブな姿こそが、誠実な姿勢であると考えています。 このような活動を続けることで、期待を超え、感動を届けることができると私たちは信じています。
サンワカンパニー40周年記念サイト | サンワカンパニー
2019.12.20 創業40周年記念式典レポートin東京を公開いたしました。 2019.11.29 創業40周年記念式典レポートin大阪を公開いたしました。 2019.10.24 40周年記念式典で発表したサンワカンパニーの会社紹介動画を公開いたしました。 2019.09.11 40周年特設サイトに“サンワカンパニーの歴史”を追加いたしました。 2019.08.22 サンワカンパニーの創業40周年を記念し、特設サイトを開設いたしました。 2019.08.22 オンラインストア限定で≪40％ポイントバックセール≫を開催（9/10終了）。 2019年8月22日でサンワカンパニーは 創業40周年を迎えることができました。 たった一人の若者が始めた企業は、 2013年に東証マザーズへの上場を果たし、 今や200人を超える組織となりました。 これまでの歴史は決して順風満帆ではなく、 ゼネコン不況、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レレブロ
SmartDrive｜移動データプラットフォームで移動の進化を後押しする
Wantedly（ウォンテッドリー）はたらくを面白くするビジネスSNS
絞り込み検索機能について、複数・並列のフィルタをどう処理したらいいのか
Vuex 絞り込み機能を実装したい