必要に駆られて「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!

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

関連記事

2020.01.05
C97戦利品、ご報告の儀

買ってきたよ タイトルの通りです。ズラーッと書いていきますよ。敬称略ね。 (左上から)群青ミルクティー/カミサマこの恋を!(レスエデ)群青ミルクティー/君が泣かない世界に(レスエデ新刊)碧礫亭/師には魅力がある!(エデレス新刊)狛犬ねこたろう/ベレト先生の学級日誌(オールギャグ)おきし団/師、また手を借りてもいいかしら?(レスエデ)たこおやじ帝国/カップケーキのみるゆめは(レトリシ)雪色金平糖/本日も教師日和なり(黒鷲)Bird Forest/愛しい人の作り方(ヒルマリ)をしろ/導火線 朽ちて道連れ 首のまま(銀雪レスエデ)ゆたこうき/Girl's Talk(黒鷲女子) (左上から)Project After That/Archive-01(コンセプトアートブック)黒井白/冥界ホテル Vol.6 遠足日和(オリジナル)黒井白/冥界ホテル Vol.5 雨やどり(オリジナル)黒井白/ACHERON(オリジナル)masha/後輩の単眼ちゃん 総集編 #1~#6(オリジナル)masha/後輩の単眼ちゃん #7(オリジナル)観城はるか/異世界に転生しませんでした 1(オジリナル)観城はるか/異世界に転生しませんでした 2(オジリナル)観城はるか/異世界に転生しませんでした 3(オジリナル)観城はるか/異世界に転生しませんでした 4 準備号(オジリナル)福岡太郎/聖なる剣とTS願望勇者(オリジナル)福岡太郎/ 女体化スキルとTS勇者(オリジナル)ボンバイエ石田/NOT FOUND(SCPイラスト解説本)Masatoshi Sakai/IDO logo log.(ロゴデザイン集)sion/Wな食卓/満腹に気をつけろ!(仮面ライダーW料理イメージレシピ本) (左上から)春名/あきあかりあむで ラーメン食べよう!(あきあかりあむ)びばえいち/シャニヨノン2(シャニマス)びばえいち/おおむねたのしい4コマ(デレマス)広沢 あさき/例えばこんな艦内専有。(PSO2)リフラケット/Cosplay97(クーナ)Flypaper/RECITER(PSO2)コーヒー飲み過ぎ/ぼくとバソと髭(FGOオールギャグ)とりうどん製麺所/グラブルよろず本(グラブルオールギャグ)珠手箱/ソフトハウスキャラのくせに 原画集 領地貴族(原画集)珠手箱/ソフトハウスキャラのくせに 原画集 悪魔聖女(原画集)Beech forest/Arrange(ロックマンゼロイラスト本)Lovin' You/ジータちゃん(グラブルオールギャグ)七草粥/魔女と踊レ!!(魔女兵器オールギャグ)うぇるきゃ/すきすきレンちゃん(魔女兵器オールギャグ) (左上から)うなハウス/めくーるレーン4(イラスト本)ストロベリータルト/囚われのポートランド(ポートランド)するどいマンのいるところ/ぶるたま(グラブルギャグ)ウモ屋/パワーオッサン(グラブルギャグ)みやぜん/駄目と愚図と嵐と(信天翁航海録クロ本)梅本制作委員会/僕らの心は変拍子(僕ヤバ非公式アンソロ)キメねこ/キメねこ1(オリジナル)キメねこ/キメねこ2(オリジナル)鹿狩人/打ち砕かれた愛を -AMORE INFRANTO-(ドルフロ二次創作小説)ステラメーカー/夜天に光を灯す(リリなの二次創作小説)3 on 10/ファッションコミュ障くんとビジネスボッチちゃん(エロゲ) (左上から)GOLDFISH/9*nove豚乙女/東方猫鍵盤19豚乙女/まじっく・らんたん豚乙女/ゲリラ2GOLDFISH/8*ottoCranky/Rave-SLave 2019Amplified Sound/Strange ArchitectureAdress/reunionC.H.S/リファクタリング・トラベルsakuzyo/Archive:02厨蔵界曼荼羅/パラシトスシンドロームヨナオケイシ/女神の破瓜・オリジナル・サウンドトラック (左上から)スーニャ音楽堂/スーニャ音楽堂スーニャ音楽堂/ワットゥーの巡礼者ProjectHL2/Mechanized Melodiesforest+はなとオニキス/Abelmoschus esculentusBit192/Worlds羊を飼うには/ECHIKA 以上 全部にサークル名(個人名)と頒布物タイトルを入れました。くっそ疲れました、多分もうやりません。ていうかそろそろ、買ったものを上手く写す手段を考えないと…。 こうしてみると、今回は珍しくCD以外も色々買ってるなーと思います。特にドハマリしたFE風花雪月に関してはジャンルごとごそっと買ってきました。序盤で結構人が集まってて、流石だなと…。 今回特に来てるなーと思うのは、明らかに面白い「キメねこ」。それとまさかの信天翁のクロ本を書いたみやぜんさん。クロ本に関しては当日前日くらいに、元々のシナリオライターをした希さんが呟いてて気づいたって感じです。初参加らしく、頒布数も少なかったみたいなので助かりました。 次回のコミケは5月だとか。行けないこともないのですが、3月にはM3もあるんですよね。それを考えると…まあ無理だろうなー!って。 もし行けたら行きます。余裕があれば。

2019.10.01
より良い感じにM3のサークルチェックをするために

場合によっては犯罪行為です M3の季節がやってきました。もうカタログも販売されてるんですが、皆さんはまだ買ってないんですか?遅れてますよ。 1ヶ月を過ぎたということで、そろそろ本格的にサークルチェックをはじめようかと思ったのですが…。 めっちゃめんどい!!! これまで通りでいくと、 ①カタログ買ってパーッと流し見②公式のサークルリストで1件ずつ全サークルをチェック③公式ページにMAPのPDFファイルがあるのでそれを落として画像処理④サークルリストをWordPressに記述⑤当日が楽しみ!!!!!! という何フェーズあるんだよ、という動作を踏む必要があります。これがもう大変面倒。何が面倒って、どこまでサークルチェックしたか忘れてしまって同じページを見始めるのが面倒。 ということで、スクレイピングを上手く活用してみることにしました。(※公式で禁止されている場合もあり、つーか使いようによっては普通に犯罪行為)(スクレイピングで過去にひと悶着あったような件もあるため注意が必要) まあルールを守って楽しくスクレイピングってことで。 今回の案 簡単に説明すると上記みたいな感じにして、もっと簡単にサークルチェックをできるようにしようぜ!ってことです。 使う技術は超絶簡単で、PHPで一回スクレイピングで取ってきたのを上手く整形してHTMLに書き出して、Storageで上手く管理するっていうだけの話。 スクレイピングする理由は、サークル数が膨大すぎて手作業でひとつひとつ持ってくるのは手間すぎてアホらしいっていうことです。なのでクロールして更新情報をどうのとかそういうことはしません。一回バッと引っ張ったらもうスクレイピングはする理由がないので、後はもう良い感じにStorage管理するだけです。 実装したいコンテンツのメインは、チェック機能です。要は「このサークルはもうチェック済みだよ」ってことをチェックボックスで管理します。それと、各サークルが登録してある自分のHPやTwitterなども情報として載せてありますので、それを引っ張ってきてひとまとめにします。現状、公式HPではホバーすることで見える要素となってるので、余計に「読んだかどうか」がわかりづらいということで実装します。 主な実装内容はその2つです。ですので、余計なことは何もしないということからおそらくなにかしらに引っかかるようなことはないと思います。Storage管理なので読んだかどうかなどの情報はユーザーが今見てるブラウザに溜まる関係上、会員システムとかを作る必要もなし。つまり作るのは非常に簡単(なはず)です。 昨日から作り始めてるので、多分今週中ぐらいにはできると思います。できるといいな。 今年もサークルリストをまとめて公開するのでよろしくお願いします。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.07.29
WordPress脱却!Hexo時代へ!

さらばWordpress とうとうWordpressとサヨナラしました。 もう旧URLを指定してもこっちに移動となります。 新ブログのURLは「saikofall.com」です。 つまりドメインを取得したってことなんですよ! 年間約1000円で独自ドメインに変えられるって考えれば強みですよ~。 というわけで、Hexoにしたメリットとデメリットをつらつらと。 まずはメリット 表示速度の向上 セキュリティ面の安心さ 管理が楽 次にデメリット 必要な知識が多い Wordpressと比べるとやりたいことができない場合もある 複雑 といった所でしょうかね。 完成しちゃえばもう後は普通のCMSなんですけどね。 たどり着くまでにどれだけの人が挫折しているのか。 いや単純にぼくが阿呆すぎるだけっていうことも? とにかく表示速度が素晴らしいです。 PHPとかを使っているわけではなく、HTMLファイルを生成しちゃうので表示が速い! PageSpeedにかけてもPC版は89点となかなかのハイスコアを出してくれました。 このブログだとほとんど関係ないんですけど、セキュリティ的にもなにかされる心配がほとんどないんですよね。 ただのHTMLなのでよほどのことがない限りどうこうなるってこともないし。 ブログ自体もローカルで生成してるので別でウイルスに引っかかって流出しない限りは安心。 ただ、Git使って更新してるので、必要な知識が多そうですね。 今ぼくが使ってるだけでも、Gitとかgulpとかnode.jsとか多少は知ってないと何もできないし。 しょうがないことではありますけど、参入障壁が大きいですね。 よほど根気のある人でない限りは手を出そうとすらしないのでは。 それとWordpressのときにしていたことをなんとかワチャワチャして再現してたりもします。 例えばTwitterとの連携。 ローカルなので当然「記事を投稿→Twitterに自動投稿」なんて機能は存在しません。 なので、IFTTTというサービスを使って再現しました。 IFTTTの説明は省くとして、概要としては「RSSが更新されたら更新された記事をTweetする」って感じです。 HexoのプラグインでRSS生成と更新をしてくれるものがあったのでそれを利用しています。 わりと便利。 上にある最新記事5件もプラグインになります。 こっちは特に難しいこともなく、必要な箇所にプラグインで生成されるものを書いてるだけ。 ただ、それと似たような感じで関連記事はちょっと面倒そうです。 日本の方がプラグインを作ったようですが、そのうち試してみたいです。 精度とかどんなものなのでしょうね? そんなこんなで、結構思うようにできなかったりします。 書き方もMarkdown記法だったりで、ガッツリ覚えることがありすぎる…。 それでも非常に便利なことは確かなので、これからはこの方式でブログを更新していく形になります。 Googleさんはページの表示速度とかも考慮しているみたいですし、選択肢の一つとしてHexoとかを活用してほしいところ。 みんなで覚えよう! Wordpressよりも便利かもしれない! いやそれはないか! それでは今日はここらでサヨウナラー