必要に駆られて「grid」の使い方を調べる

CSSプロパティ「grid」について

Gridレイアウト

技術ネタ発表みたいなのがあるので、Gridレイアウトについて話すことにしました。
問題として、ぼくがこれの使い方を完全に忘れてたので、ここでまとめておきます。

CSSプロパティ「grid」は、flexみたいに要素を整列させたりすることができるdisplayの値のひとつです。
flexとは違って、描画サイズを自分で決めて、その中で要素を好きな位置に置いていく変な指定方法を取ります。

親要素に「display:grid」を敷いて、描画サイズを決めます。
その後、子要素に対して「ここに配置する」というプロパティを設定すると、そこに子要素が配置されていきます。

ぼくが使ったことのあるプロパティとしては、

display: gird(基本値:親要素)
grid-template-rows(横列の長さをひとつずつ決める:親要素)
grid-template-columns (縦列の長さをひとつずつ決める:親要素)
grid-row(横列のどこに置くか決める:子要素)
grid-columns(縦列のどこに置くか決める:子要素)

IEはそれ用に別途プロパティが用意されてるのでそれを使う形になります。
詳しい説明とかはW3Cでも見てみりゃ書いてあると思いますよ。

過去に使った案件

こいつを使った案件は、地方のローカルニュースサイトです。
新聞みたいなレイアウトを求められたので普通にflexとかで組んでいたのですが、
システム組み込みで面倒が起きたらしく、「自由に置けるようにしてくれ」と言われたのでgridプロパティを使いました。

使ってみるとそれなりに便利で、同階層のdivを好きな位置にレイアウトできるのでシステム組み込みが必要な場合にもわりと使えるプロパティです。
新聞紙とかの変なレイアウトを求められたら意外と使える便利なヤツ。

ただ、IE用のプロパティはあっても完全には対応できなく、中途半端なレイアウトを実現しようとすると途端に使えなくなったりします。
実際、システム会社から管理画面作成を依頼されたときに使ったら、IEがボロボロになったのでやめました。
普通の表組みとかには、普通にtable使いましょう(という教訓)。
さっきの新聞紙みたいな突き抜けたレイアウトぐらいじゃないと現状使えないと思います。
IEが全部悪い、Chromeなら開発者ツールでも便利に使えるレベルなのに。

明日のネタ用

という話を明日のネタとして使う想定で書きました。
実際、gridレイアウトは使えるヤツだと思います。
ただ、繊細な使い方をしようとすると色々複雑で面倒なので、その辺を許容してくれるデザイナーの元で使ったほうがいいです。
例の案件では、デザイナーが「いやもうそれでいいでしょ十分でしょ」ってなったのでセーフだっただけの話です。

具体的に言うと、一列一列が親要素で指定した横幅、または縦幅になるので細かいレイアウトには向いてないです。
結構ざっぱに、でも変な置き方を指定されてる表組みとかでは使えると思いますよ!!!
そんな機会そうそうないけどな!!!

現状ほとんど使った試しのない値だったりするんですよね、実は(取り扱いは過去の案件ひとつだけ)
まあそのうちまた使いますよ、わりと嫌いじゃなし。
みんなも使おうGrid Layout!

それでは今日はここらでサヨウナラー

関連記事

デフォルト画像
2018.11.24
星翼→せいよく→性欲

星と翼のパラドクス 噂のゲームをプレイしてきました。 ぼくにしては珍しい対人アーケードゲームです。 星と翼のパラドクスですが、今年の初めとかに結構宣伝されてた気がします。 スクエニさんが出すアケゲーですけど、随分と大掛かりだなって感想。 筐体がバカでかすぎて、なんだか懐かしさを覚えます。 昔って妙に大きい筐体が多かった印象があるんですよね。 ゲーム自体は、なんていうかガンスリンガーストラトスとかフィギュアヘッズ的なサムシングだと思います。 まあわりと一般的な対人ゲームってことですね。 個人的にその中で嬉しいなあって思うのは、操作方法が比較的楽なことですかね。 こういうのって大抵FPSとかじゃないですか(勝手なイメージ)。 ああいう細かな操作が求められるのって基本苦手なんですよね。 星翼は大雑把にやっても攻撃を当てられるのが嬉しいかなーって。 照準合わせたりするのできないんですよね、どうしても外れる。 対人戦というのが基本苦手なぼくですが、なんとか楽しんでやってます。 専らやってるのがサポート。 ヒールとかできるやつ。 ほとんどの人がアサルトかヴァンガードなので、一人でシコシコしてるのが現状です。 よくよく考えてみると、あんまり役に立たない職ですよね。 せめて二人はいないと、正直バリア貼るぐらいしかやることない…。 攻撃はメインじゃないから大した火力になりませんし、回復も一人だとおっつかない。 そう考えるとせめて攻撃手段が多いヴァンガードをするべきなのでは?と思わないでもないです。 ルールが陣取り合戦になっているのですが、まだランク下位なので皆バラバラ。 ぼくもいまいち理解できてないので超テキトーです。 運良く強い人が味方に入るとWINになって嬉しいなーって。 今日は5回ほどプレイしてきましたが、暫く遊ばなくてもいいぐらいには遊んだ気がします。 なんていうか、一戦一戦が疲れるんですよね…。 やっぱプレイヤー相手のゲームって改めて苦手に思います。 ぼくみたいなのは音ゲーやってるのが一番なんですよ。 まあそれはともかくとして、なんだかんだ楽しいのでまたやりに行くと思います。 せめてもう五千円分ぐらいは使ってみたい。 回復・防御のどちらかを上手になりたい! 攻撃は知らん!

2019.06.30
「追憶の鍵」を使えるようになるのは何時なの…

「過去の特殊作戦のシナリオ解禁に使う」 魔女兵器の良い所は普通にシナリオが面白いってことです。今回のイベントである「創傷反射」も、短いながらもレンちゃんがかっこかわいくて面白かったです。メイドレンちゃん可愛いんだぁ…。 で、そうなると過去に行われたイベントがあるのでそれも見たくなるわけで。「深潜症」のときなんですけど、行われたのは先々月とかですかね?そのイベントの話も見たいんだ!!! というわけでおそらく使えるであろうアイテムが、これ。 「特殊作戦」というのは、今回の「創傷反射」のようなイベントのことを指していると思います(思いきし特殊作戦って書いてあるし)。なので当然、 CAPHがレベル3になったし買っちゃうわけだ!そしてこれを、使うのを想像してウキウキしながら「深潜症」のページに行くわけだ! ??? なんで使えないねん!!!どうやって過去のイベント見ればええねん!!!いいから見せろや!!! とかいう状況になってるわけですね。困った。 「追憶の鍵」について このアイテムは「ショップ」>「雑貨」にて1日1回買うことができます。CAPHのレベルが3になってないと購入できませんが、2週間デイリーをこなすと到達できるので無課金でも入手可なわけですね。 ちなみにコイツ、バッグの中身にも存在しません。つまり、雑貨コーナーでしか自分がいくつ持っているか判断できないという。運営はどういう扱いにしたいんでしょうか。 ネットで情報を探しても、ドッカンバトルしか出てこないので本当に現状使い道がないのかもしれません。明らかにイベントシナリオを解禁するためのアイテムな感じなんだけどなぁ…。一定数集めないと使えないとかそういうことかな??? 情報求ム。 というわけで追憶の鍵についてなにか知ってる人は教えてください。中国wikiとか見てみるとなにかわかるかもしれないですね。 創傷反射は今週の火曜で終わりと迎えます。ちなみに、今の所中国版と同じ進行でイベントを行っている?みたいですね。そうなってくると次のイベントは「 启示录 」になりますかね(日本語名称だとヨハネの黙示録?)。 wikiを見た感じ、主人公レベル25以上じゃないと参加できなかったみたいすね。まあ回復分のスタミナを全部使ってれば1週間で到達できるレベルです。新キャラとして敵ユニットしか実装されてないぽい執行人と新キャラが実装?執行人ってセレサって名前なんですね…物理特攻枠みたいだしほしいなぁ。 まあもしかしたら日本限定イベとか実装されるかもしれないし?(ライター一人しかいないみたいだから多分ない) そもそも中国版のイベントが今年の2月以降ないっぽいし、色々大丈夫なんでしょうか…?シナリオはかなり面白がってるのでこのまま続けてほしくはあります。 残り二日間、ファビオラはスキンは無理でもせめてアイテムは取るゾ。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.08.23
報酬期間だからEV付き5スロユニット作る(願望)

報酬期間ですぞ アークスの皆様お元気ですか。 ぼくはお元気ではないです。 かねてより計画していた、「EV5スロ計画」を発動する!!! と思い昨日はシコシコ戦ってました。 何が70%だ、他は100%だぞ気合でねじ伏せろ! 今回挑戦するのは ・ジソール ・ステⅣ ・EVパワー ・アクス ・グレースパワー の5スロユニットです。 EVさえ作れれば後はもう流れで完成できるお手軽レシピですね。 盛り度は「中」ぐらいですかね…。 打撃150 HP95 PP13 と、頑張った割になんとも言えないステータス上昇になっております。 まあ今までのに比べると同じぐらいHPPP盛れて打撃もプラスされるし、多少はね? このレシピは、どうやって「レッサースタミナⅤ」「レッサーパワーⅤ」を作るかが鍵になります。 まあどうやってと言っても、気合で作れよとしか言えないんですが。 レッサーといえば、エンドレスが開始してから新たに追加されたOPらしいですね。 ぼくは今年の7月に復帰したので、ちょうど追加されて一ヶ月経った頃に存在に気づきました。 エンドレスはそれなりに実入りもあるので、暇つぶしにちょうどよいコンテンツですね!? そんなレッサーですが、Ⅴを作るためには最短でレッサー○○Ⅰが36個必要になります(確か)。 それでいて、レッサーⅢまで来ると80%、70%と確率と戦う羽目になる鬼OPです。 エーテルとかに比べたら作りやすい部類に入るかもしれませんが、OP的には中級者向けなんですかね? 少なくとも挑戦権を確保することは、エンドレスが常時解放されていることもあってか比較的容易いです。 ただ、確率の壁に阻まれて諦めるアークスは多そうですね。 そんなEVユニは、下記の素材によって構成されています。 素材1 レッサースタミナⅤ ゴミ*4 素材2 レッサーパワーⅤ ゴミ*4 素材3 ミューテーションⅡ ゴミ*4 素材4 トウオウ・ソール ゴミ*4 素材5 パワーⅢ アクス・フィーバー ゴミ*3 素材6 対応ソール パワーⅢ ゴミ*3 お手軽レシピ!!! ガチ勢が見たらなにかを追加で盛りたくてウズウズするような手軽さに富んでいます。 ほとんど合わせがないので序盤の素材が作れれば後はもうどうにでもなるんですよね。 挑戦結果 とまあ、ここまで書いておいてなんですが、ぼくは今回一部位しか作れませんでした。 は? これが限界です…。 素材が足りない誰かタスケテ…。 悲しいことに、二部位作ろうとしたら尽く落とされて沈みました。 流石に無い袖は振れないので、今回の報酬期間はこれにて終了でございます。 こういう、悲しい結果で終わり、ですね…。 次回の報酬期間までにレッサー集めてまた挑戦したいと思います。 それまでになんか面白いOPが出ない限りは頑張れるかな? おまけ ちなみに、ぼくがほしいのはスタミナとパワーだけなので、他は全部売りました。 今日の分の売上は全部EV作成者が頑張るために購入していったみたいですね。 頑張ってください!ってグッジョブしたら頑張ります!って返ってきました。 こんな感じで、レッサーをⅡにして安く放流するだけで皆さん買っていってくれます。 ね?簡単でしょ? さ、皆もEVユニット作ろうな。 それでは今日はここらでサヨウナラー