- 投稿日：2021-07-26T20:17:42+09:00
【HTML】”各セルそれぞれ任意スクロール設定可能”な3×3行列の段組み【CSS】
↑ 昔の HP でよくみたフレーム構造ですが、これはインラインフレームではなく CSS で実現しています。 ２行２列、３行３列を示します。これにより任意行列も可能かと思われます。 https://bit.ly/3i6UCKW (元記事) 2行2列 2行2列CSS /* ####################### 変数 ######################## */ :root { --header-height:5%; --mid-height:70%; /* header, mid の高さを指定すれば, footerの高さはでる. */ --mid-left-width:30%; --mid-lefttop-height:50%; --mid-righttop-height:50%; --footer-top:calc(var(--header-height) + var(--mid-height)); /* calc演算子前後には半角スペースが必要 */ --footer-height:calc(100% - var(--header-height) - var(--mid-height)); --mid-right-width:calc(100% - var(--mid-left-width)); --mid-leftbottom-height:calc(100% - var(--mid-lefttop-height)); --mid-rightbottom-height:calc(100% - var(--mid-righttop-height) ); } /* ############################################### */ body {margin: 0;} .header{position:fixed; top:0%; width:100%;} .header{height:var(--header-height);} .header{overflow:hidden;overflow-y: scroll; } .footer{position:fixed; width:100%; margin:0;} .footer{top:var(--footer-top); height:var(--footer-height);} .footer{overflow:hidden;overflow-y: scroll; } .mid {position:fixed;display: flex; width:100%; overflow:hidden;} .mid{top:var(--header-height);height:var(--mid-height);} .left{overflow: hidden;width:var(--mid-left-width);} .center{overflow: hidden;width:var(--mid-center-width);} .right{ overflow: hidden;width:var(--mid-right-width); } .left-top{ overflow-y: scroll; height:var(--mid-lefttop-height);} .left-bottom{overflow-y:scroll;height:var(--mid-leftbottom-height);} .right-top{ overflow-y: scroll; height:var(--mid-righttop-height); } .right-bottom{overflow-y:scroll;height:var(--mid-rightbottom-height);} /*::-webkit-scrollbar{display: none;}*/ /* スクロールバー非表示 */ /* ##################################### */ 2行2列HTML <body> <div class="header"></div> <div class="footer"></div> <div class="mid"> <div class="left"> <div class="left-top"></div> <div class="left-bottom"></div> </div> <div class="right"> <div class="right-top"></div> <div class="right-bottom"></div> </div> </div> </body> 3行3列 3行3列CSS /* ####################### 変数 ######################## */ :root { --header-height:10%; --mid-height:80%; /* header, mid の高さを指定すれば, footerの高さはでる. */ --mid-left-width:30%; --mid-center-width:30%; --mid-lefttop-height:20%; --mid-leftmid-height:20%; --mid-centertop-height:20%; --mid-centermid-height:20%; --mid-righttop-height:20%; --mid-rightmid-height:20%; --footer-top:calc(var(--header-height) + var(--mid-height)); /* calc演算子前後には半角スペースが必要 */ --footer-height:calc(100% - var(--header-height) - var(--mid-height)); --mid-right-width:calc(100% - var(--mid-center-width) - var(--mid-left-width)); --mid-leftbottom-height:calc(100% - var(--mid-lefttop-height) - var(--mid-leftmid-height)); --mid-centerbottom-height:calc(100% - var(--mid-centertop-height) - var(--mid-centermid-height)); --mid-rightbottom-height:calc(100% - var(--mid-centertop-height) - var(--mid-centermid-height)); } /* ############################################### */ body {margin: 0;} .header{position:fixed; top:0%; width:100%;} .header{height:var(--header-height);} .header{overflow:hidden;overflow-y: scroll; } .footer{position:fixed; width:100%; margin:0;} .footer{top:var(--footer-top); height:var(--footer-height);} .footer{overflow:hidden;overflow-y: scroll; } .mid {position:fixed;display: flex; width:100%; overflow:hidden;} .mid{top:var(--header-height);height:var(--mid-height);} .left{overflow: hidden;width:var(--mid-left-width);} .center{overflow: hidden;width:var(--mid-center-width);} .right{ overflow: hidden;width:var(--mid-right-width); } .left-top{ overflow-y: scroll; height:var(--mid-lefttop-height);} .left-mid{ overflow-y: scroll; height:var(--mid-leftmid-height);} .left-bottom{overflow-y:scroll;height:var(--mid-leftbottom-height);} .center-top{ overflow-y: scroll; height:var(--mid-centertop-height);} .center-mid{ overflow-y: scroll; height:var(--mid-centermid-height);} .center-bottom{overflow-y:scroll;height:var(--mid-centerbottom-height);} .right-top{ overflow-y: scroll; height:var(--mid-righttop-height);} .right-mid{ overflow-y: scroll; height:var(--mid-rightmid-height);} .right-bottom{overflow-y:scroll;height:var(--mid-rightbottom-height);} /*::-webkit-scrollbar{display: none;}*/ /* スクロールバー非表示 */ 3行3列HTML <body> <div class="header"></div> <div class="footer"></div> <div class="mid"> <div class="left"> <div class="left-top"></div> <div class="left-mid"></div> <div class="left-bottom"></div> </div> <div class="center"> <div class="center-top"> </div> <div class="center-mid"> </div> <div class="center-bottom"> </div> </div> <div class="right"> <div class="right-top"></div> <div class="right-mid"></div> <div class="right-bottom"></div> </div> </div> </body>
- 投稿日：2021-07-26T19:50:10+09:00
ポートフォリオ作成の配色に困ったときに使えるアプリ
はじめに ポートフォリオ作成で配色のセンスがありません。。。 そんな時、youtubeで見つけた良いアプリがあったので紹介させていただきます。 Coolors ランダムでベストな配色を決めてもらえるアプリです。 まずはStart the generator!をクリックして始めましょう！ このような色がランダムで表示されます。 気に入った配色が出るまでスペースキーで押しましょう！ いいなと思った色があったら固定することもできます。 また配色を追加したり削除したりする事ができます。 自分の中で入れたい色を最初から入れる事もできますし、人気の配色など表示することができます。 参考
- 投稿日：2021-07-26T16:45:14+09:00
Railsで架空のCafeのHPを作ってみよう!【12日目】『特定のデータの取得(active:hashの属性値)』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 12日目の作業内容 ・ビューの作成(トップページに特定の情報を表示) 12日目の気になった箇所 特定のデータの取得でカラムごとの取得はできたが 属性まで指定できるのだろうか。 仮説 カラム別に取得する場合は (testテーブルのoptionカラムだけ取得したい場合とする) samples_controller.rb @test_option = Test.select('option') このような形で取得することができる。 (取得の仕方は複数存在します) 似たような形で属性まで指定できないか試してみる。 Testテーブルのoption_idカラムのname属性だけを 取得したい場合とする。今回はname属性の属性値2を取得したい。 (_idはactive:hashの使用時の記法です) samples_controller.rb @test_option = Test.select('option.name.2') このように記述してみたがうまくいかなかった。 結論 複数やり方があると思いますが今回は私がうまくいった方法を紹介します。 上記と同じ条件で Testテーブルのoption_idカラムのname属性だけを 取得したい場合とします。今回はname属性の属性値2を取得するとします。 samples_controller.rb @test_option = Test.where(:option_id name='2') 私の場合このような記述の仕方でうまくいきました。 簡単に説明すると 取得したいテーブル(モデル)に対してwhereメソッドを使います。 samples_controller.rb @test_option = Test.where whereメソッドは条件に一致したレコードを配列で取得してくれます。 そして、 whereに取得したい条件を入れていきます。 まずはカラム名です。 samples_controller.rb @test_option = Test.where(:option_id) この状態だとoption_idカラムの全てを取得する条件になります。 なので、さらに属性まで絞りたいので、 samples_controller.rb @test_option = Test.where(:option_id name) このように続けて記述することでその属性まで条件まで絞ることができます。 同じように続けて、 samples_controller.rb @test_option = Test.where(:option_id name='2') と、することで、属性の属性値まで条件を絞ることができました。
- 投稿日：2021-07-26T11:02:06+09:00
Anime.jsをプロダクトで使用する4つの理由
この記事では「Anime.jsをプロダクトで使用する4つの理由」と題して、Anime.jsを実際にプロダクトで使用した中で見えてきたポイントについて、以下の順番でまとめたいきたいと思います。 軽量で扱いやすい（実装したいアニメーションがシンプルなものだったため） 公式ドキュメントが読みやすい チームでの開発/運用がしやすい 変更が容易（突発的な仕様変更にも耐えうる） 一つずつ、詳細に見ていきます。 理由１: 軽量で扱いやすい Anime.jsはシンプルながらもパワフルな、JavaScriptアニメーションライブラリです。 GitHubスター数は39,900（2021年7月現在）と人気で、また、その機能の豊富さ・手軽かさから、はてなブログでも一時期話題となりました。 はてブスター数は996（2021年7月現在） そしてminifyがかかったビルドファイルが総容量は17.3kbと、非常に軽量です。 またその軽量さとは裏腹に、CSSプロパティ、SVG、DOM操作といった多彩なアニメーションが可能です。 Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. 理由２： 公式ドキュメントが読みやすい 個人的な推しポイントとしては、ドキュメントの読みやすさです。 ライブラリの使用方法が直感的にわかる、非常に読みやすいドキュメントとなっています。 ↓公式Documentの一部を画面キャプチャしたもの。画面右側にはコードの記述例が書かれており、その動きを画面左側で実際に確認することができる（マウスオーバーすることでアニメーションが動作する）。 軽量であるだけでなく、ドキュメントも読みやすく、非常に使いやすそうな点が導入の要因となりました。 （実際にプロジェクトで使用してみて、混乱するようなことはとても少なかったように感じます。） 理由３: チームでの開発/運用がしやすい アニメーションライブラリの選定にあたっては、パフォーマンスを重要視した上で、それと同じくらいに、今後もチームで継続的に使用していけそうかという観点を意識していました。 # 意識した優先順位 パフォーマンス（速さ、軽さ） == コードの可読性、メンテナンス性(チーム開発に適しているか) <<< 機能の豊富さ この点に関して、Anime.jsは比較的コードの可読性・メンテナンス性が高いと言えます。 それは一つ一つのアニメーションをJavaScriptのオブジェクトとして管理することができるためです。 アニメーションをオブジェクトとして管理する ここでは例として、Anime.jsを使用した簡単なアニメーションの実装を見てみましょう。 // 下記のようにアニメーションを定義します。 const nankaUgoki = { targets: "#nanka", // DOMを指定. 配列で複数指定することも可能. easing: "linear", // easingの設定値は他にも多数あり duration: 1000, // 動作にかかる時間を設定 translateX: 250, // 加えたいアニメーションを記述. 基本はCSSプロパティを設定する. rotate: 2, // アニメーションは複数指定可能 begin: function () { // アニメーション開始時に実行される処理を記述する }, complete: function () { アニメーション完了時に実行される処理を記述する }, // その他にも多数のプロパティを設定できます。 } // 実行には anime()メソッドを使用します。 anime(nankaUgoki) // 指定したDOMが動く 上記のように、個々の動作をオブジェクト単位で管理することで、コードのメンテナンスが快適になりました。 このようなわかりやすいインターフェースは、初めてコードを見た人にとっても、理解し易いものかと思われます。 また、動作とターゲットを一つのオブジェクトでまとめて管理できるのも面白いポイントであり、コードを通して実際の動作をイメージすることが容易なのも嬉しい点です。 これらの点がチームでの開発・メンテナンスを容易にしてくれると感じました。 理由４: 変更が容易 Anime.jsには、複数のアニメーションを同期的に連結する Timelines という機能があります。これを使用することで、個々のアニメーションの実行順序を制御することができます。 Timelines let you synchronise multiple animations together. 実行の順序を制御するだけの機能ではありますが、これが可能であることにより、複雑なアニメーションを、小さなアニメーションの集合体として分割することができます。 アニメーションを連結する 以下の例では、「小さなアニメーション」を連結して、「連続した複雑なアニメーション」を実装しています。 // timelineを初期化する const renzokuShitaUgoki = Anime.timeline({ easing: "linear", // 初期値を設定可能 duration: "1000", // addした個々の動きは初期値を継承する }); // 小さな動きを作っておく const tiisanaUgoki01 = { targets: '#nanka', duration: 2000, // 初期値が上書かれる translateX: 250, } const tiisanaUgoki02 = { targets: '#nanka', duration: 500, translateY: 100, } // timelineに `add` メソッドを使って動きを追加する. 追加した順番にアニメーションが行われる. renzokuShitaUgoki.add(tiisanaUgoki01).add(tiisanaUgoki02); // この場合は、2000msかけてX方向に250px移動した後、500msかけてY方向に100px移動する。 大きなアニメーションをイチから作り上げるのではなく、小さなアニメーションを組み合わせて一つの大きなアニメーションを組み上げるイメージです。 一つ一つの動作がオブジェクト化されているため、部分的に動作を追加したり、また調整したりといったことが行いやすいため、とても開発者フレンドリーな機能だと言えます。 実装途中に仕様変更が発生しても、該当箇所に対応するオブジェクトを調整することで、柔軟な対応を行うことが可能です。 詰まったところ 開発中に何点か詰まったところがあったため残しておきます。 動きが複雑になってくると実装が難しい 例えば、translateX: ["0", "100%"] のように開始位置と終了位置を定義することはできても、translateX: ["0", "40%", "100%"] のように中間点を追加することができません。 // OK! anime({ targets: '#nanka', translateX: ["0", "100%"], // 開始位置と終了位置を設定可能 }) // NG!! anime({ targets: '#nanka', translateX: ["0", "40%", "100%"], // しかし中間点を追加することはできない }) このように細かく動きを調整する場合は、工夫が必要となってきます（例えば["0", "40%"]のオブジェクトと["40%", "100%"]のオブジェクトの二つに分割して連続で動作させるなど）。 CSSのdisplayプロパティの操作ができない anime({ display: 'none' }) という制御が効きません。 そのため、とあるタイミングでDOMを表示/非表示した...というときには、begin や complete といったプロパティを使用したり、あるいは opacityを使用するといった代替表現をする必要があります。 // NG! anime({ targets: '#nanka', duration: 300, display: 'none', // 300ms後にふわっと要素を消したい => NG! }) // OK!! anime({ targets: '#nanka', duration: 300, opacity: 0, // 300ms後に要素を透明にし、 complete: function () { // 完了後に直接DOMを消す document.querySelector('#nanka').style.display = 'none'; } }) 参考： StackOverFlow おわりに 本記事では「Anime.jsをプロジェクトで使用する4つの理由」として、Anime.jsをプロダクトの中で使用した際によかったと感じた点について記しました。 ライブラリを選定する際には、他のCanvasライブラリやAdobe Animateなど多様なものを比較しましたが、今回はAnime.jsがうまくはまりました。 必ずしも万能なライブラリとは言い切れませんが、使い所にマッチすれば、非常に強い力を発揮するでしょう。
- 投稿日：2021-07-26T10:30:25+09:00
LWCでの共通スタイルシート(CSS)
1.目的 今回LWCでの共通スタイルシート(CSS)の方法を共有します。 2.ソース構成図 lwc ├─commonStyle └─commonStyleChild commonStyle commonStyle.css .commonCss { font-size: 30px; color: #fff; background-color: rgba(128, 129, 56, 0.5); border-radius: 2px; min-width: 100px; /** 真ん中 */ display: flex; justify-content: center; align-items: center; } commonStyle.js-meta.xml <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>false</isExposed> </LightningComponentBundle> commonStyleChild commonStyleChild.css @import 'c/commonStyle';/**ここ共通CSSをインポート*/ commonStyleChild.html <template> <div class="commonCss">TEST</div> </template> commonStyleChild.js import { LightningElement } from 'lwc'; export default class CommonStyleChild extends LightningElement {} commonStyleChild.js-meta.xml <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>false</isExposed> </LightningComponentBundle> 3.ローカルで動作確認 commonStyleChild中に右クリックし、SFDX:Preview Component Locallyを押下する Use Desktop Browserを選択する サーバを立ち上げて、ブラウザを自動的に開く
- 投稿日：2021-07-26T06:36:11+09:00
CSSを書くときは、プロパティや値の意味が自然になるものを選ぼう
これは何 CSSでは同じUIを表現するにしてもたくさんの書き方があります 最終的な見た目は同じになるとしても、プロパティや値の意味が不自然なものを選ぶと後から困りがち…… 自然な書き方の例をいくつかまとめた記事です 中央揃え 何かの要素を左右中央に揃えたいとき、text-align: center;でもdisplay: flex; justify-content: center;でも、どちらでも同じ見た目になる場合が多いです。 しかしtext-alignはあくまで文章の行揃えに関するプロパティ。 そもそもがレイアウトをするために存在するプロパティではありません。 なんとなくでtext-alignを使っていると、子要素にブロック要素を配置したときに上手く中央揃えにならなくて困っている……なんて人もときどき見かけます。 横並び 2021年現在、恐らく横並びを実現するのにfloatを使っている人は多くないと思いますが、display: inline-block;を手癖で書いているであろう人はたまに見かけます。 floatはあくまで後続を回り込ませるためのプロパティ。 display: inline-block;は、あくまで要素の幅ピッタリになるだけで横並びにさせる意図はない。 などなどからdisplay: flex;を使うのが良いでしょう。 横1列ではなく、縦にもレイアウトしたいならdisplay: grid;も便利です。 marginとpadding どちらも和訳すると「余白」になってしまいがちで、混同している人も多い気がします。 marginは「外側の余白」でpaddingは「内側の余白」と考えてください。 2つのボタンが横並びで存在するとして、ボタン同士の余白は外側の余白なのでmarginでとる。 対してボタンの背景色とテキストの距離は内側の余白なのでpaddingでとる。 もちろんマークアップの内容によって変わってくるのですが、自分が関心を寄せている対象の外側に距離をとりたいのか、内側に距離をとりたいのかを考えてください。 全てをmarginでとると相殺が大量に発生して計算が難しくなり、逆に全てをpaddingでとるとマークアップのネストが深くなりすぎます。 マジックナンバーを使わない CSSに限った話ではありませんね。 文章とアイコンの位置を揃えたいとか、ドロップダウンメニューの表示位置を調整したいとかでmargin-top: -14.4px;のような記載になっているのをときどき目にします。 どこから出てきたのか分からない値が入っていると、レビュワーも困りますし、後から変更したいときも大変ですよね。 例えば1文字分ずらしたいならmargin-top: -1em;と書いた方が意図を伝えやすいはず。 また、目視で指定するのではなくちゃんと計算して、式もコメントか何かで書いておきましょう。 /* font-size: 16px * line-height: 1.8 / 2 = 14.4 */とでも書いてあれば後から見ても一目瞭然です。 更に言えばSass VariablesやCSS Custom Propertiesがちゃんと設定されていればmargin-top: calc($font-size * $line-height / 2)のようにコメントを書かずとも内容が分かります。 z-indexの数値 @tokumituさんから質問をいただいたので記載します。 コメントありがとうございます z-indexはいくつか流派があるような気がしますが、私の場合は「数値の大小で重なり順を制御せず、0と1をboolとして扱う」ようにしています。 どういうことかというと、仮にz-index: 9999;が指定された要素があったとしても、親要素の指定やtransform指定などによっては1番上に配置されないのです。 逆にz-indexを指定せずともコードとして後の行に書かれた要素であれば上に配置されます。 そのため、モーダルウィンドウなどをJavaScriptから追加/削除する場合などでも、マークアップの最後に追加すれば割と勝手に1番手前に要素が描画されます。 できるだけマークアップ側で要素の重なりを制御することで、z-indexは0か1だけのboolのようなつもりで扱える……という寸法。 CSSをトレースして重なり順をシミュレートするのは大変なので、私はよくこのような手法をとります。 こういう場面で迷った、があったら コメント頂けたらこの記事に追記するかもしれません。 全てにお答えできる保証はありませんが、もし疑問があればお気軽にどうぞ。