CSS Gridを少しだけ勉強して少しだけ使えるようになった

はてなブログの新しいテーマを(現実逃避的に)作ってて、いい機会だからとCSS Gridについて少し調べてみました。人に解説できるほどではないのでここでまとめたりはしないですけど。

はてなのテーマにどう使うか

自分でhtmlを組んでるならまぁもっと自由度はありますが、はてなブログの決まったhtmlの中でどう使えるのか。とりあえずトップページのhtmlを簡略化して概要を掴んでみます。(普通にテーマ作る時よくやるんですけど、すぐに忘れる)

<body class="page-index">
<div id="container">
<div id="container-inner">
<header id="blog-title" data-brand="hatenablog"></header>
<div id="top-editarea"></div>
<div id="content">
<div id="content-inner">
<div id="wrapper">
<div id="main">
<div id="main-inner">
<article class="entry">
<div class="entry-inner">
<header class="entry-header">
<div class="entry-date"></div>
<h1 class="entry-title"></h1>
<div class="entry-categories"> </div>
</header>
<div class="entry-content"></div>
<footer class="entry-footer">
<div class="customized-footer"></div>
<div class="comment-box"></div>
</footer>
</div>
</article>
<div class="pager"></div>
</div><!-- #main-inner -->
</div><!-- #main -->
<aside id="box1">
<div id="box1-inner"></div>
</aside>
</div><!-- #wrapper -->
<aside id="box2">
<div id="box2-inner">
<div class="hatena-module">
<div class="hatena-module-title"></div>
<div class="hatena-module-body"></div>
</div>
</div><!-- #box2-inner -->
</aside><!-- #box2 -->
</div><!-- #content-inner -->
</div><!-- #content -->
</div><!-- #container-inner -->
</div><!-- #container -->
<footer id="footer">
<div id="footer-inner"></div>
</footer>
</body>

CSS Gridは、理解したところで簡単に言うと「親ブロックで縦横どういった分割のグリッドか決めて、小ブロックはそれぞれそのグリッドのどこに入るか決める」というもの。なので違う親ブロックを持つものとは一緒に扱えない。

というわけで、トップページの大きな括りで言えば…

  • 「#container-inner」を親とする「#blog-title」「#top-editarea」「#content」を並び替える(タイトルの横に自由エリアを持ってきたり、タイトルよりも上に自由エリアを持ってきたり)
  • 「content-inner」を親とする「wrapper」と「box2」を並び替えてメインエリアとサイドバーの位置関係を調整する
  • 「entry-header」を親とする「entry-date」「entry-title」「entry-categories」を並び替える

といったことかなぁ。

flexboxとcss gridでできることは似ているけど違う。どういうときにどちらを使ったほうがいいのか、そのあたりはもう少し慣れないとな。とりあえず実験的にでもどんどん使ってみよう。

ABOUT ME
著者近影
宮城島 俊太 (Shunta MIYAGISHIMA)

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

CATEGORY
RANKING