Transition

はじめに こんにちは。レバレジーズ株式会社の松本です。普段はHRテック事業部で主にフロントエンドの開発を担当しております。 今回の記事では、入社2ヶ月の私がテックフェス全体のレポートと、弊社フロントエンジニアの小林がReact18について発表した「Parce que j’aime la React.」を受けて、追加で調べたり試したりしたことをご紹介したいと思います！ テックフェスとは？ レバレジーズグループに所属するエンジニアを対象に社内で半年に一度行われている技術の祭典です。エンジニアが新しい技術に興味を持ち、勉強をするきっかけを作ることを目的とし、グループ全体の技術力向上を目指します。 1…

今日はCSSで動きをつけるtransitionについて、まとめていきます。 CSSで動きをつけるってどういうこと？ 早速やっていきましょう。 transitionプロパティとは そもそも「transition」ってどんな意味なんでしょうか。 調べると「遷移」とか「移り変わり」とか出てきますね。 そう、遷移に関するプロパティです。 と言われても全然わからないので、かみ砕いて書いていきます。 transitionは、プロパティの値が適用されるときの移り変わり方について指定できるのです。 ？？？ プロパティの値が移り変わる時っていつでしょうか。 プロパティの値が変化する時を「連続して」「徐々に」変化…

どうも！LSSです！！ CSSには、様々な「フィルター」が用意されています。 以前にも、 little-strange.hatenablog.com で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^ 白トビ→通常の写真に変化 セピア色の思い出がよみがえる transitionについて にじんだ景色も目を凝らすと… コントラストの鼓動 あとがき 白トビ→通常の写真に変化 .anmfb1{transition:1s;filter:brightness(…

どうも！LSSです！！ 【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software のコメント欄にて、 421miyako(id:m421miyako) いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。 とのコメントをいただきました^^ パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shadow効果をつけて、それをアニメーションで位置変化させれば出来るかな？と。 それって出来るんだっけ？？と思ったので、…

どうも！LSSです！！ 昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。 「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使える？そして、その方法だとすり抜けて（？）アニメーションしたりして！？」 …と。 と、いうわけで、試してみたのですが…結論から言うと失敗です^^; グラデーションがアニメーションしない 半分は成功…？ transitionが効いてない 他のプロパティなら、CSS変数を使っていてもアニメーションします！ グラデーション…

どうも！LSSです！！ なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈？なんかに使えるかもですね。 丸から四角に変形するボックス コード 解説 あとがき 丸から四角に変形するボックス 右にある、ピンク色の丸にマウスカーソルをあわせてみてください^^（スマホの方はタップ） ここに適当に文章を書きます。brタグによる改行もできます。この部分の文章は好きに変更できます！ コード <style><!--.hamb{position:absolute;z-inde…

どうも！LSSです！！ 昨日の記事は、左右に配置した黒が分れていく、というものでしたが、ちょっと色を変えて試してみます。 フランス国旗風サンプル フランス国旗風 グラデなし 失敗例 あとがき フランス国旗風サンプル フランス国旗風 コード <style><!--.fr1{border:5px inset gray;background-color:white;background-repeat:no-repeat;background-image:linear-gradient(150deg,blue 50%,transparent 60%),linear-gradient(150deg,tr…

details要素自体をアニメーションさせる場合 details要素自体にtransitionを設定し、open属性の有無でプロパティを変化させたときはアニメーションします。 ※ Google Chrome（123.0.6312.124）でしか確認していません。 DEMO SCSS details { background: rgba(255, 0, 0, .2); transition: background .2s ease-in-out; // 効果あり &[open] { background: rgba(0, 255, 0, .2); } } details要素の子要素をアニメーショ…

読者は「ダーク・パターン」すなわち、悪意のあるインタフェース・デザイン・パターンの一種で、エンドユーザーをだまし、本人の意図または期待とは異なる行動を取らせ、インタフェースの提供者に利益を与えるものを十分理解されてあろうか。 筆者は、最近のブログの(注4)で簡単にこの問題を取り上げた。その趣旨は違法なマーケティング規制のあり方の実態およびわが国の法規制のあり方を論じたいと考えたからである。 改めて考えると、この問題の重要性から見て問題を整理すべく、今回のブログは、(1)「ダーク・パターン」の実態と技術面からみた本質的な違法性問題、(2)米連邦取引委員会(FTC)のダーク・パターン・レポートの内…

愛知県名古屋市の菅原国際特許事務所に所属している所員Xです。初めての投稿です。よろしくお願いします。 今回は、米国特許出願のOAで１１２条（ｆ）のミーンズプラスファンクションの指摘を受けた場合に、どのようにクレームを補正すれば１１２条（ｆ）を回避できるかについて解説します。 sugapat.com [目次] １．ミーンズプラスファンクションについて ２．事例１：ソフトウェアのクレームにおいてミーンズプラスファンクションを回避する方法 ３．事例２：構造のクレームにおいてミーンズプラスファンクションを回避する方法 ４．まとめ １．ミーンズプラスファンクションについて 米国特許法35U.S.Cの11…

チタン酸カルシウム (CaTiO3) 19世紀にロシアのウラル山脈で発見された鉱物は、ロシアの鉱物学者 Lev Perovskiの名前からペロブスカイトと呼ばれるようになり、今日ではその結晶構造を指してペロブスカイト構造と呼びます．鉱物ペロブスカイトはとを含む酸化物です．すなわち、最初に報告されたペロブスカイトがチタン酸カルシウム()です． ペロブスカイト構造といえば様々な組成を持つ化合物が属し、機能の宝庫と呼ばれるほど多様な物性、例えば超伝導、強誘電性、巨大磁気抵抗、触媒作用、イオン伝導を示すことで有名です．であるならば、元祖ペロブスカイトであるも負けないほど多彩な物性の宝庫になっているはず…

CSS Hooks and the state of CSS-in-JS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 フロントエンドアプリケーションとコンポーネントベースのアーキテクチャが範囲と複雑さを増すにつれ、モジュラーで保守しやすいスタイルシートを書くことが大きな課題となってきています。従来のCSSのカスケード特性のため、セレクター名の衝突、不要なコードの蓄積、スタイルのカプセル化の困難さが生じやすく、これにより多くの開発者がインラインスタイルに頼るようになってきています。 インラインスタイルは、コンポーネントのマークアップ、CSS…

4/19(Fri.) Connected Underground with My Secret Playground (Sincopat, Jeahmon!, Melopee/ from Berlin) at 京都METRO Open/ 22:00- Entrance/ 2200yen(inc.1drink ticket) Students・International Students/ 1800yen (inc.1drink ticket) HP: www.metro.ne.jpRA: ja.ra.co 今回の『Connected Underground』は、ウィーン発、現在はベルリンに拠点…

ガードレールの解体 WPATHの注意に対する嫌悪感と精神医学のゲートキーピング（監視・制御）への嫌悪は、ファイルの中で明らかです。日付のないスレッドでは、ある心理療法士が、17歳の少女の健康な乳房を切断する前に、外科医が彼女からの２通の紹介状を要求したことについて、不満を表明しました。この心理療法士にとってこれは「余計な、余計なゲートキーピング」なのです。 紹介状の要求は保険の手続きに過ぎないように見えるが、その返信の中でひとりのセラピストは、保険会社が「クライアントの状態」が時間の経過とともに変化していないという証拠を求めているのではないかと述べました。 しかしながら、残りのフォーラムの参加…

脇ノ沢駅舎とJR大船渡線ワンマンカー (63) 建物名：脇ノ沢駅舎路線名：JR東日本大船渡線ホーム：単線式場所 ：陸前高田市米崎町字脇ノ沢123 高田市内駅舎での有人駅は、小友駅舎(委託)と陸前高田駅舎だけとなり脇ノ沢駅、竹駒駅、陸前矢作駅は、無人駅となっていますIn Takata City, the manned stations with staffed station buildings are only Otomo Station (outsourced) and Rikuzentakata Station. Wakinosawa Station, Takekoma Station, …

WEBデザインを学ぶ際、CSSは欠かせない要素の一つです。CSSを使いこなすことで、見栄えの良いウェブサイトを構築したり、ユーザビリティを向上させたりすることが可能です。 このガイドでは、WEBデザイナーのためのCSSコーディングに関する基本から最新のトレンド、効果的なテクニック、そしてレスポンシブデザインへの対応まで、7つのステップで詳しく解説します。CSSに関する疑問や質問に対する回答も含んでおり、初心者から上級者まで幅広く役立つ情報を提供しています。 さあ、一緒にCSSの世界を探索してみましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール！ 副業・フリーランス…

スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています（以下リンク）。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。

CHRISTABEL. Samuel Taylor Coleridge (1816)萩原 學（訳） CHRISTABEL. 前書き。PREFACE. 第一部 PART 1 第1部への結びTHE CONCLUSION TO PART THE FIRST. 第二部。PART II. 第二部への結びTHE CONCLUSION ΤΟ PART THE SECOND. 前書き。PREFACE. 次の詩の第1部はサマセット郡のストーウィで1797年に、第2部はドイツから帰国した後、1800年にカンバーランドのケズウィックで書かれました。以来、私の詩の力は、ごく最近まで、水を差された状態にありました。しか…

4月13日 13日の夕食は、ナポリタンっぽいスパゲッティ定食です。ウインナーや玉ねぎではなく、鶏つくねやキャベツなどを具材に使ったナンチャッテ・ナポリタンです。 大切な人から頂いた業務用タバスコをかけて、それではいただきます😌 味付けはいつも通りのケチャップ、ウスターソース、コンソメ、バターでございます。ナポリタンに豪華な食材や調味料は不要です。 ところで今日は体調が悪いです。というか、肋間神経痛か帯状疱疹か分かりませんが赤い湿疹がまた出始めました。昨秋の時よりも痛みが強く、少し動くだけでズキズキとしてなにもする気が起きません。おまけに怠い、今日は1日寝ていよう😞 使用しているパスタは当然、古…