Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8704

CSSグリッド活用によるレスポンシブ対応

$
0
0

はじめに

現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。

開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS

目次

1.HTMLの準備
2.CSSの設定

HTMLの準備

タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足:Ruby on Railsでアプリを制作しています。

index.html.erb
<divclass = "wrapper grid"> #全体をdivで囲み、クラス名gridを追加する
  <%@desks.eachdo|desk|%><%=link_todesk_path(desk.id)do%><%=image_tagdesk.image,class:"desk-img"%><p><%=desk.title%><%="by#{desk.user.nickname}さん"%></p><%end%><%end%></div>

2.CSSの設定

※最終コードは一番下にあります。

CSSではdisplayプロパティにgridを設定する。これにより、子要素はタイル状にレイアウトされる。タイル間の余白はgapプロパティで設定する。

index.css
.grid{display:grid;gap:26px;}

次に各タイルの横幅設定をする。grid-template-columsプロパティにより、横に並べたいタイルの枚数だけfrを設定する必要がある。ここで1frは親要素に対する横幅を自動で調整する。下記の場合、1frが3つあるので、1:1:1の3等分されたグリッドが配置される。もし1fr 2fr 1frのように設定した場合、タイル枚数は3枚であるものの、各タイル幅は左から1:2:1となる。

index.css
.grid{display:grid;gap:26px;grid-template-columns:1fr1fr1fr;margin-top:6%;margin-bottom:50px;}

最後にレスポンシブ化を記す。repeat関数を使うことにより、タイル数を指示し、コードを簡略化できる。

index.css
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}

またminmaxを使うことにより、1タイルの最小と最大幅を設定できる。下記の場合、最小値を240px、最大値を1fr(親要素の3等分相当)となる。最大値は親要素の幅(画面サイズ)に依存する。一方で最小値は24opxに固定され、これ以上は小さくならない。

index.css
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(240px,1fr));/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}

最終コードを下記に記す。上記おrepeat関数のタイル数を表す「3」をautofitに書き換えた。これにより、画面の幅に応じて最適なタイル数を自動で表示する。

index.css
.grid{display:grid;gap:26px;grid-template-columns:repeat(autofit,minmax(240px,1fr));/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}

参考:
1冊ですべて身につくHTML-CSSとWebデザイン入門講座

以上


Viewing all articles
Browse latest Browse all 8704

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>