LoginSignup
1
2

More than 3 years have passed since last update.

cssコード1行でよくあるレイアウトを実現

Last updated at Posted at 2020-09-03

前置き

最近、Youtubeで10 modern layouts in 1 line of CSSという動画を見ました。
すべてのデモコードはweb.devに載っています。
とっても勉強になったから、
少しだけ翻訳した内容をここで簡単に紹介したいと思います。

IE以外の重要なブラウザがすべて対応されています。

上下中央揃え

girdplace-itemsで一発で上下中央を実現できます。
place-itemsは、align-itemsjustify-itemsを統合できる簡略した書き方です。
以下のように、place-items: center;に設定するだけ、どんなサイズでも、親要素が簡単に
中央に配置できます。

html

<div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>
</div>

css

 .parent {
    display: grid;
    place-items: center;
  }

image

image.png

place-itemsの属性について、MDNの記事に確認してくさい。


サイドバー

グリッドレイアウトのminmax機能を利用すれば、ブラウザの横幅に応じて、最適なサイドバーが一発変更できます。
minmax(150px, 25%)とは最小サイズを150pxに設定し、大きな画面では全体の25%まで伸ばすという書き方です。
grid-template-columns: minmax(150px, 25%) 1fr;を指定すると、左側のサイドバーは、25%で150pxのminmaxを取得し、右側のメインセクションは1frとして残りのスペースを占有します。
frの説明について、こちらの記事に参考してくだい。

html

  <div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

css

  .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

image

image.png

grid-template-columnsの属性について、MDNの記事に確認してくさい。


最後に

まだ知らないcss、使用されていないcssがたくさんあります。
仕事で使用できるコードが限られているかもしれませんが、

自分の知識に制限をかけないよう、
世の中で流行っている、これから流行っているコード、
ぜひチェックしてみてください。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2