ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。特に、Flexboxではつくるのが難しい、縦軸・横軸がある格子状のレイアウトに向いています。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくりながらGrid Layoutの基礎を学ぶ 次のようなヘッダー・メイ
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ CSS グリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置するGriddyGriddyのサイトを開くと 4 つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指
CSS Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Gridを始めるのを難しく感じさせるかもしれません。 CSS Gridの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。 CSS Grid Layout Terminology, Explained 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの仕様 「グリッドコンテナ」と「グリッドアイテム」とは 「グリッドライン」とは 「グリッドカラム」「グリッドロウ」「グリッドトラック」とは 「グリッドセル」とは 「グリッドエリア」とは 「グリッド」とは CSS Gridの仕様 CSS Gridの仕様では、グリッドは次
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 基本的な記述方法は動画でも紹介しています。初めて CSS グリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出すグリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるまではレイアウトを頭の中だけではなく、紙など
Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module（CSSグリッドレイアウトモジュール）。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法を解説。 この記事では、CSSグリッドレイアウトを使って要素（Grid Item）を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。 過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証！CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか？』で説明しました
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
