【初心者でもわかる】要素をピラミッド構造で並べる方法

どうも7noteです。レイアウト案、ピラミッド編です。

3カラムで並べたり、均等幅で並べたり、行送りにしたり等様々な配置方法がありますが、ちょっとマニアックにピラミッド型に並べる方法を考えてみました。
誰かの参考になれば幸いです。

ソース

index.html

<p>
  <span>コンテンツ</span><br>
  <span>コンテンツ</span><span>コンテンツ</span><br>
  <span>コンテンツ</span><span>コンテンツ</span><span>コンテンツ</span>
</p>

style.css

p {
  text-align: center;     /* 中央揃えにする */
}
p span {
  width: 160px;           /* 1要素の幅を指定 */
  border: 1px solid #000; /* 見やすいように線を入れる */
  text-align: center;     /* 文字を真ん中寄せにする */
  background: #CCC;       /* 背景色をグレーにする */
  display: inline-block;  /* インラインブロック要素にする */
  margin: 5px;            /* 余白を取る */
}

結果

解説

インラインブロック要素を中央揃えで並べて配置し、改行で1個、2個、3個と行を分けているだけですね。均等に綺麗になるように余白は全方向に同一に取っています。
説明する必要もないくらい簡単な作りです。

まとめ

シンプルに作っていますので実用的に使うには親要素に最低幅を指定したり少し工夫がいるかもしれません。高さも揃いませんしね。
レベルアップしたものをまた考えて掲載できればと思います。

作ったはいいものの使い道がまだ思いついていないので、ぜひコメント等でいい使い道を一緒に考えていただきたいです。コメントお待ちしております！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ