エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
gridでつくる不揃いの画像ギャラリー - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
gridでつくる不揃いの画像ギャラリー - Qiita
はじめに 画像ギャラリーをgridで実装しました。 7枚の画像が不揃いに並んでいるレイアウトです。 デザ... はじめに 画像ギャラリーをgridで実装しました。 7枚の画像が不揃いに並んでいるレイアウトです。 デザインカンプに準じて、 ①gridを使う、 ②画像の増減でレイアウト崩れしないように、 という指示のもと行ったコーディングです。 「画像が不揃い」というだけでも難しかったのですが、 「画像の増減でレイアウトが崩れないようにする」というのがさらに難しく、時間がかかりました。 その時のコードを見直し、違いを比較してみました。 読者対象 ・HTML/CSSでコーディングをしている人 ・gridレイアウトに不慣れな人 開発環境 用意するファイルはindex.htmlとstyle.cssです。 index.htmlからstyle.cssを読み込みます。 実装手順 ・gridで画像を不揃いに並べる。 ・画像の増減でレイアウトが崩れないようにする。 gridで画像を不揃いに並べる HTML HTMLは非