これからのグリッドレイアウト 第1回 Grid Layout Moduleの概要 まずはdisplay:grid;を核とするGrid Layout Moduleがどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。 はじめに 筆者とdisplay:grid;の出会いは、この記事が書かれる4年前の2012年3月頃になります。2011年6月末にIE10PP（Platform Preview）が登場した時に、IE10PPがプリフィックス付きでdisplay:-ms-grid;を実装していました。 いろいろとCSSに関する調べ物をしていた際に、「IE10PPではGrid Layout Moduleが使えるらしい。」ということで、display:-ms-grid;を使ったサンプルを作り遊んでいました。 グリッド・カラムレイア
新しくなったMicrosoft Edgeを試してみよう！ーWindows 10 Creators Updateで入ったEdgeの新機能一挙解説 物江 修（日本マイクロソフト株式会社 Webエバン...） 今週 (2017/4/11 米国時間) からいよいよ Windows 10 Creators Updateの配信が開始されました。 この配信は、さまざまな業況を見ながら順次行われていきますが、もし、自分の番まで待ちきれない、という人は、4月6日（日本）からすでに利用可能になっている Windows 10更新アシスタントを使用してマニュアルインストールをしてもよいでしょう。 このアップデートではWindows 10そのものにさまざまな機能追加が行われることはもちろん、そこに搭載されるWebブラウザーMicrosoft Edgeにも新機能が追加されます。 今回の記事では、Windows 10
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ CSS グリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置するGriddyGriddyのサイトを開くと 4 つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指
CSSとテキストで実装したローディングアニメーションのサンプルです。 サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。 ここではアニメーションGIFでの見栄えと実装コードを紹介しているので、実際の表示は以下デモで確認してください。 また、デモではSCSSを利用したコードで実装しているので普段からSCSSで用いてる人はこちらでコードを確認してください。 CODE #1 先頭の「L」からひと文字ずつフェードアウトしていき、末尾の「G」までいったら次は先頭からひと文字ずつフェードインしてくるタイプのもので、フェードイン・アウトの見栄えはopacityを利用しています。 実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
