2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

top, top left, right, right bottom, bottom, left bottom, left, left topに使えます（全部）。 @content初めて使ってみたけどナニコレすご。 例 .triangle height: 10em width: 10em +triangle(bottom, 1em, 1em, red) left: 5em 出力 .triangle { height: 10em; width: 10em; position: relative; } .triangle::before { content: ""; position: absolute; border-style: solid; left: 5em; bottom: -1em; border-width: 1em 1em 0 1em; border-color: red tr

釣り船を借りて東京湾に出たり、海外に行って現地で通訳を雇ったりしたという話を聞く。なるほど、お金を払ってそういう遊びをしていいのかと感心する。そういうものが大人のレジャーだと思う。 今回新たに提案したいのが学校の授業である。中学の理科の先生が知り合いにいるので授業をしてもらった。これがもう…いいのだ。 断言しよう。学校の授業が大人になった今や最高のレジャーである。

次世代CSSレイアウト仕様「Gird Layout Module」を使いこなすために知っておきたい、自動配置アルゴリズムのしくみを詳しく解説。 この記事では、要素を配置する際にCSS Grid Layout Moduleの自動配置アルゴリズムがたどるすべてのステップを説明します。ステップはgrid-auto-flowプロパティでコントロールされています。 『Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう』や『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』で、CSS Grid仕様の概要とGridでWebに要素を配置できる多様な方法すべてを説明しました。とはいえ先の記事ではグリッド内の単一の要素の位置を明示的に指定しただけでした。ほかの複数のアイテムはアルゴリズムに基づいて適切に配置されます。 この記

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements. Introduction to CSS Grid CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages

アイレット株式会社デザインセクションでマークアップエンジニアとして働いているくどうです。CSS Advent Calendarに参加するのは初めてですがどうぞよろしくお願いします。 概要 CSS Grid Layoutを使っていますか？ たしかに最初はとっつきにくいし、1frってなんだよ…と言いたくなる気持ちもわかります。 しかし、こういった新機能は我々の新しい武器です。少々癖が強い武器ですが、忍者の手裏剣、ブルース・リーのヌンチャク、あるいは宮本武蔵の二刀流よろしく使いこなすことができれば強力でしかも超cool。超wavyでごめんね。ならばマスターするしかないですね！ というわけで本日はレスポンシブな表組みレイアウトを3パターン紹介します。 実践 PC時は横、スマホ時は縦に行方向が変化する表組みレイアウト まずはディスプレイ幅の広いPCの時には行方向を横に、ディスプレイ幅の狭いスマホ時に

個人的には、addEventListenerの第三引数(以下、第三引数)は「キャプチャ-フェーズと、バブリングフェーズのどちらでリスナーを働かせるか」という意味だと捉えています。 「優先順位」、「イベントの方向」という説明も広義ではあっていると思いますが、正確にはもう少し意味合いが違ってきます。 以下説明です。 第三引数はuseCaptureという記述が多いかと思います。つまり「キャプチャーを使うかどうか」という設定です。初期設定はfalseですので、「キャプチャーを使わない」という設定になっています。 実は、イベントの伝播には上記の２つのフェーズ（正確には３つ）があり、それがキャプチャーフェーズとバブリングフェーズ（そして、ターゲットフェーズ）と呼ばれるものになります。つまり、キャプチャーとはキャプチャーフェーズの事を指しています。 つまり、初期設定では、「キャプチャーフェーズを使わない

こんにちは、freee CTOの横路（@yokoji）です。 この記事は freee Developers Advent Calendar 2017 の24日目です。 私事ながらこの11月にはじめてのこどもが生まれまして、この1ヶ月間は育休をとっているので、今回はまさにいま育休をとって感じていることを書こうと思います。 育休について 日本では育児介護休業法が定められていて、企業で働く両親が協力して育児休業を取得できる仕組みのガイドラインがあります。 政府主導で男性の育児参加への取り組みも進められており、育休取得率は徐々に上がってきていますが、それでも直近で3.16%と、2020年までに13%という目標にはまだまだ届きそうにないのが現状のようです。 （ちなみに、フィンランドでは男性の育休取得率が8割を超えているそうです） なぜ育休をとろうと思ったのか ある調査によると、育休を取らない理由の上

最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky

dFdxとdFdyとは GLSL1.1以降からdFdx/dFdyという組み込み関数が使えるのですが、そこまで使う機会がないため、使い方を知っている方は少ないかもしれません。 dFdx/dFdyはスクリーンのX方向・Y方向の偏微分を計算するフラグメントシェーダの関数です。 偏微分というと、難しそうな印象を受けるかもしれませんが、単なるスクリーン上の画素値（本当は任意の値）の差分です。 この記事では、dFdx/dFdyの使い方をエッジ検出の実例を踏まえて解説します。 なお、WebGLでdFdx/dFdyを使用するためには、gl.getExtension("OES_standard_derivatives")と拡張を有効にする必要があります。 dFdxとdFdyでお手軽エッジ検出！ dFdx/dFdyに関しては、難しいことを考えずに実例を見たほうが分かりやすいです。 今回はShadertoyで動

Google Maps APIを使用する場合、2016年6月22日よりAPIキーが必須になりました。 参考:標準プランのアップデート | Google Maps API の価格とプラン | Google Developers 今回はAPIキーを取得して、サイト上に地図を表示するまでの流れを試してみます。 今回使用するのは、以下のJavaScript APIになります。 Google Maps JavaScript API | Google Developers APIキーの取得 APIキーの取得にはGoogleアカウントが必要になりますので、事前に用意しておいてください。 Googleアカウントにログイン後、こちらのページにアクセスして、右上の「キーの取得」をクリックします。 「Select or create project」をクリックして、「Create a new project」を

恋人や配偶者のことを、まちがえて別の異性の名前で呼んでしまったことはないだろうか。フィクションの中や他人の体験談にはたまに登場する話だが、あいにく（というべきかどうか）僕はそういう経験がない。 いずれにしろ、相応の修羅場は避けられない状況であると思う。妻に対して面白半分でやると、あとあとに禍根が残るだろう。人間相手はやめて、AIを相手にやってみたい。 インターネットユーザー。電子工作でオリジナルの処刑器具を作ったり、辺境の国の変わった音楽を集めたりしています。「技術力の低い人限定ロボコン（通称：ヘボコン）」主催者。1980年岐阜県生まれ。 本『雑に作る ―電子工作で好きなものを作る近道集』（共著）がオライリーから出ました！ 前の記事：バッタに噛まれたい ＞ 個人サイト nomoonwalk

縦に並んだ画像を、position: relative;で、上の方に移動させて配置すると、その画像がもともとあった場所の分、下に余白ができる。 そういうときは、その移動させた要素に対して、margin-bottom: -○○px;など、ボトムにネガティブマージンをとってやると、余白がなくなります。 あんまりよろしい感じはしないですが、どうしてもposition: relative;を使わないとだめなときは。という感じです。 一応だいたいのブラウザで確認しましたが、全部大丈夫でした。 あと同じような感じで、position: relative;ではなくて、ネガティブマージンで上にやったときは、IE6では上がった分が隠れるというか切れる、ということがありますが、そういうときは、position:relative;を指定するとピョコっと出てきます。

一般社団法人WAZAtoBAとX人の株式会社は、バーチャルろくろシステム「Roquro」をリリースした。センサー上で手をかざすことにより、まるで本物のろくろで造形しているように画面上で器を作れるサービス。作成した3Dモデルのデータは、3Dプリンタでの出力により、実物の器としてかたちにできる。 一般社団法人WAZAtoBA代表の松永武士氏は、福島県の大堀相馬焼の窯元の四代目。X人の株式会社の代表の濱中拓郎氏とは、もともと知り合いであった。X人の株式会社による「3Dayプリンター」のブログで、同社が開発中の「Roquro」の映像を目にしたことから、伝統技術の継承や進化に活用することに向けての協業が決定。既に福島県の中学校を中心に教育分野で導入されている。 この「Roquro」では、一般的には難易度が高く煩わしい3Dデータの作成を、従来の陶器体験のように簡単に行えることが魅力。直感的な動作である

平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識

Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手

Web業界の人間はインタビューを受けている時にろくろを回す（ような手つきをする）と言われ始めて、早5年以上。散々ネタにされてきた“エアろくろ”を具現化したようなシステムが誕生しました。バーチャルろくろシステム「Roquro」です。 「Roquro」解説動画 インタビューを受けて“エアろくろ”をしているところ……ではなく「Roquro」を使っているところ 「Roquro」イメージ画像 全ての写真はこちらから! 「Roquro」は、新しいモノづくりの形を知ってもらい、身近に感じてもらうため、一般社団法人WAZAtoBAと3dayプリンターが協同で運営するシステム。センサー上で手をかざすことで、まるで実際のろくろで造形しているように、画面上で器が作れます。作ったデータは、3Dプリンタで出力可能。 今後はセンサーの強化により繊細なタッチも認識できるようにするのと同時に、機械学習をすすめることにより