30代男子。ガンプラで遊んでます！ 最近、自分の部屋ができたこともあり、久しぶりにガンプラを作っています。 作ったガンプラは部屋に飾ったり写真を撮ったりしているのですが、ガンプラ自体のクオリティが昔より上がっていたり、スマホのカメラ自体もすごく高性能になっていることで、簡単にカッコイイ写真が撮れるのでテンション上がります。 （バンダイ様のおかげです。私のようなパチ組専門でもすごくカッコイイです。） 実は今度クラファンにブンドド※用のカメラデバイスを出そうとしているのですが、最近AR.jsなるもので手軽にWebでARアプリができることを知ったので、これを使って超プロトタイプ的にブンドドを更に楽しくするARアプリを作ってみました。 ※ブンドドっていうのはプラモデルやフィギュアを使ってやる所謂「ごっこ遊び」的なものです。 コックピット視点でブンドドしたいなーということで 作ってみました。 仕組みは単純でカメラ映像にAR.jsでコックピットの3Dモデルを重ねただけです。 ↓ここから遊べます。 先日WEBアプリでもARできるって知ったんで、コックピット視点でガンプラ眺めるアプリ作ってみた。（スクショも撮れるよ。）コックピット作りこんだり、カメラをリモートにしたりできると面白くなるかな。#ガンプラ#拡張現実 pic.twitter.com/BCEgMROtDc— shoito66 (@shoito66) June 12, 2021 動画はスマホで撮ったもので、PCで見るとこんな感じ。 （Webカメラのピントが上手く合わず・・・） 仕組みと作り方 今回のアプリは冒頭でも触れている通り、AR.jsというライブラリを活用したWebアプリケーションになっています。 PCやスマホのカメラで移した映像にAR.jsでコックピットの3Dモデルを重ねて表示しています。 ↓イメージ的にはこんな感じ 3Dモデルの準備 コックピットの3Dモデルはこちらのサイトで無料のものをダウンロードして使用しました。 少しブレンダーで弄りました。 ブレンダーで書き出したモデルをAR.jsで使用する方法は以下の記事にまとめてあります。 Webアプリケーションの作成 今回作成したアプリケーションのコードはこちらです。 See the Pen コックピット視点を楽しもう！ by shoito66 (@shoito66) on CodePen. スタイルやスクリプトにも色々書いてありますが、これはスクリーンショットを取ったり保存したりする部分ですので、ARについてはHTMLだけで完結しています。 スクリーンショットを取る部分はこちらの記事を参考にさせていただきました。 周りの人に使ってもらってみた 今回はクラファンに向けたプロトタイプという意味も強いので、折角ならと身近な人に使ってもらいました。 使ってもらった相手は私の奥さん。 頼む前は勝手に以下の様な想像をしていました。 ・ガンダムはあまり知らないからこれを使ってブンドドの世界が楽しくなるかはあまり気にしなさそう ・エンジニアなので、起動時間やスクショ部分の使い勝手等についての意見ならもらえるかな とか思っていたら、実際に使ってもらって返ってきたフィードバックは以下のようなものでした。 曰く「コックピットに3D感が薄いので視点に合わせてコックピットの中が見えたりすると良い」 曰く「コックピットからの眺めってこんなにクリアなの？もっと薄暗かったりしないの？」 曰く「このままだとプリクラのフレームと変わらんな」 はい。ガッツリ本質を突いてきてくれました。 ガンダムを知らない奥さんからしてもこれではコックピットに居る気分は味わえないようです。 プロダクトの本質に関わる部分なので、ここは早急に改善していかなければ！ とりあえず、今回の改善案としては3つほど ①コックピットの3D感を高める　 ⇒　Blender使ってもっとリアルなコックピットを作る ②コックピット内で視点を動かせるようにする　 ⇒　マウスや画面タッチで3Dモデルの確度が変わるようにすればできるか ③コックピットからの景色をリアルに　 ⇒　コックピットの窓部分に半透明のオブジェクトを置く 今後も色んな人からフィードバックをもらいながら自分の作りたいものに近づけていけたら良いなと思っています。

Flexboxで上下左右の中央揃えする方法 Flexboxで要素を中央揃えする方法です。 親要素に対して、display:flex;を指定し、justify-content:center;で上下の中央揃えをします。 そして、align-items:center;で左右の中央揃えをすると上下左右の中央揃えができます。 style.css .center { height:120px; display:flex; justify-content:center; align-items:center; }

はじめに コメントアウトの方法をよく忘れるのでまとめておきます こちら[1][2]を参考にさせていただきました。 2021/6/13追記 コメントで指摘されたHTMLのコメントアウトについて修正しました。 コメントアウト 言語 1行コメントアウト 複数行コメントアウト HTML <!–- コメント -–> 左と同じ CSS /* コメント */ 左と同じ javascript //コメント /* コメント*/ JSX {//コメント} {/* コメント*/} おわりに HTMLとCSSのコメントアウトめんどくさい。 それではまた。 参考文献 [1]:【HTML】コメントアウトの書き方！注意点や便利な使い方も紹介 [2]:今更聞けない JSX のコメントアウトの構文

どうも7noteです。Twitterの広告で、画像を横に並べて一枚ずつスライドできるスライドショーを見かけたので、同じようなものをCSSで再現していきます。 ソース index.html <div class="box"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> </div> style.css .box { width: 300px; /* 適度な幅を指定 */ height: 300px; /* 適度な高さを指定 */ scroll-snap-type: x mandatory; /* スクロールスナップの指定 */ overflow-x: scroll; /* はみ出た部分をスクロールできる要素にする */ display: flex; /* 要素を横並びにする */ } .box section { scroll-snap-align: start; /* スクロールスナップの指定 */ width: 200px; /* 適度な幅を指定 */ height: 200px; /* 適度な高さを指定 */ text-align: center; /* 文字を左右中央にするため */ line-height: 200px; /* 文字を上下中央にするため */ flex: none; /* 自動伸縮をさせない */ } .box section + section { margin-left: 10px; /* 要素間に余白をとる */ } .box section:nth-of-type(even) { background: #ccc; /* 偶数番の背景色 */ } .box section:nth-of-type(odd) { background: #aaa; /* 奇数番の背景色 */ } 解説 JavaScript不使用で作ります。 scroll-snap-type: x mandatory;が今回のキーになるプロパティです。 これを指定することで、要素の左端に合わせてスクロール量を自動的に調整することができます。 あとは装飾的なCSSばかりですが、flexboxを使った横並びと、nth-childで色分けをして見やすくしたら完成です。 まとめ 身近にあるものの作りをどうやって作るかは普段から意識しています。 こういうものを作りたいと言われた時に、即答で「できますよ。」と答えられるとカッコいいから。 でもただ単純に新しい技術を身につけてみたいという欲が強いだけかもしれないです。 きっとこの記事を読んでいる方にもそういう方が多いのかなと思いますのでぜひほかの記事も読んでみてください。実用的なことからしょうもないCSSまでいろいろ書いています↓ 参考： https://qiita.com/drafts/eeba93e0275d8419f50b/edit https://www.mitsue.co.jp/knowledge/blog/frontend/202102/02_1740.html https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

CSSで要素を左右中央よせする方法 左右の中央寄せ 左右の中央寄せは「インライン要素」と「ブロック要素」で中央よせする方法が異なります。 インライン要素の左右中央寄せ インライン要素の左右の中央寄せは、中央寄せしたいインライン要素の親要素（divなど)にtext-align:center;を指定すると中央寄せになります。 例 index.html <div class="center"> <span>あいうえお</span> </div> この場合は「あいうえお」を中央とせしたいので、class="center"にtext-align:center;を指定します style.css .center { text-align:center; } そのテキストが含まれているブロック要素に対してtext-align:center;を指定してあげると中央寄せにすることができます。 ブロック要素の中央寄せ ブロック要素の左右の中央寄せは、ブロック要素の左右のmarginをautoにすることで中央寄せにすることができます。 左右のだけの中央寄せなのでmargin:0 auto;と指定します。 index.html <div class="center"> <span>あいうえお</span> </div> style.css .center { margin:0 auto; } と指定します。 これでもいいのですが、この指定だと親要素は中央寄せになってくれますがその中の「あいうえお」は親要素に対して中央寄せになってくれません。 そこで先ほど説明したtext-align:center;も指定します。 style.css .center { text-align:center; margin:0 auto; } このように指定すると、中央に寄せられた親要素の中でさらに左右中央に寄せることができます。 ここで注意したいのが、margin:0 auto;は指定した要素の親要素に対して中央寄せになることです。 中央寄せした要素の親要素が左寄せまたは右寄せになっていた場合はその分左または右に寄った状態となります。 画面の真ん中に表示したいけどできない時は、親要素も中央に寄せましょう。 それか、親要素の横幅をwidth:100%に指定する方法もあります。