2017/03/09画像が上にあってその下にテキストが来てそれがタイル状に並んでるようなものって良く見かけますよね。table-cellを使ってレイアウトすると初心者でも表示が崩れることなく簡単に実装できますので、その具体的な方法をソース付きでご紹介します。幅の計算などしないで済むためスマホ用のデザインで特に活用できますよ。LINK目次6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。←今回はこれ番外編ですが、table-cellを使う上で重要なテクニックを追記します。関連記事をタイル状にレイアウトする今回作るのはこういう表示の仕方。「【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法」とHTMLの構造はほぼ変わってません。リスト表示させたい項目を2つおいてそれをdivで囲っただけ。CSSをいじるだけでデザインを変えられるので、リスト表示させていた箇所をタイル状に表示させたいという場合も簡単にデザイン変更できます。<h2>記事のタイトルがここに入ります。<h2>記事のタイトルがここに入ります。10px;}解説のためにシンプルな構造にしてあります。必要であれば背景色やボーダーなどを入れてください。いままでの記事を読んでいただければ記述の意味が分かっていただけると思います。ポイントだけ解説していきますね。「【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法」で紹介したやり方は画像とテキストをtable-cellを使って横に並べました。table-cell;を当ててます。middle;とするとテキストの量に左右されて画像の位置がずれてしまいます。up;として上に詰めるようにしました。hidden;を記述してあります。これによりこれ以上の高さの画像は下側がカットされて表示されます。高さは環境に応じて適宜設定してください。fixed;を外側の箱に当てて並べたい要素を横方向に均等に配置します。すれば中の項目が2つだろうが3つだろうがHTML側で増やすだけで幅の数値を指定せず並べられます。▼このようにCSS側の変更をしないでHTML側で調整ができます。これは逆に言えばCSS側だけで変更ができなくなるため、場合によってはデメリットとなることもありますので気をつけてください。最後に6回に渡る短期連載でしたが、いかがでしたでしょうか?他の記事を読んでない方はぜひ最初から見返してみてください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。