WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

以前も紹介したのですが、モダンCSSの紹介です。

関連記事

モダンCSSを学習してホームページ制作のスキルアップ！

時々新しいモダンCSSを調べたりするのですが、興味深くて、「こんなことできるの？」と驚かされるようなものばかり。

今回も画期的なものを紹介していくので、どんどん取り入れていってください。

padding,marginの新しい指定の仕方

余白を内側、外側につけたいときのやつですね。

サイト構築で使わないことなどないくらいメジャーなものです。

これらの指定の仕方といえば、従来で言えば

padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
padding: 1rem;

みたいな書き方をしていたと思います。

新しい書き方だと

margin-inline: auto;
magin-block: 20px;
padding-inline: auto;
padding-block: 20px;
margin-block-start: 20px;
margin-block-end: 10px;
margin-inline-start: 15px;
margin-inline-end: 5px;

みたいな書き方ができます。

inline,block,start,endの登場ですね。

• inline　→　左右
• block　→　上下
• start　→　開始
• end　→　終了

という意味なので、

• padding-block: 2px; 　→　内側の上下余白を2px
• padding-inline-start: 20px; → 行の開始側に20px
• margin-inline: 15px; 　→　左右両方に15px
• margin-inline: 5px 25px; 　→　開始側5px、終了側25px

みたいな意味になるわけです。

単にコードの行数を減らせる、というメリットもあるかと思います。

それ以外にも、横組みの文章だったら特に問題はないかと思いますが、

文章が日本語の縦組みになったときに余白の付け方で混乱するときがあるかと思います。

そんなときにわかりやすいのではないかと思います。

「開始側の余白にはstartを付けて、終了側の余白にはendを付けて・・・。」のという考え方のほうが明快ではないでしょうか。私は未だに左右がごっちゃになって間違えるので（だってキーボードってLが右にあって、Rが左側にあってややこしいんだもん。）こちらの考え方のほうが好きだな、と思いました。

縦組みの文章を構築する際はこちらをおすすめしたいです。

insetプロパティ

今までposition: absolute;やposition: fixed;を使って実装する際は、位置の指定に

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

みたいな書き方をしていたのではないかと思います。4方向全部を設定するとなると冗長ですよね。

新しい書き方だと

position: absolute;
inset: 0;

になります。

inset: 0; = top,left,bottom.rightすべてが0という意味になるので記述が楽になります。

それだけではなく、insetにも先程ご紹介したinline,block,start,endを指定できます。

私がお勧めしたいやり方としては、

• ページ全体を覆うようなハンバーガーメニュー、モーダル　→　inset: 0;
• ↑の四隅に余白が入るバージョン　→　inset-block: 20px; inset-inline: 20px;
• ヘッダー(上端固定で横幅全体)　→　inset-block-start: 0; inset-inline: 0;
• 右サイドバー（右端固定、縦幅全体）　→　inset-block: 0; inset-inline-end: 0;

みたいな感じですね。

marginとpadding同様にこちらの方が明快な気がしてわかりやすいです。

ページ固定や追従するコンテンツには特にこちらの書き方の方がおすすめだと思いますね！

field-sizing: content

こちらは主にフォーム内にあるキストエリアに対して使うものです。

テキストエリア内の文章量に応じて枠内の高さが自動でリサイズされます。

従来の書き方

従来の実装の仕方だと複数行テキストを入力しても縦幅が固定なので、スクロールして確認しないといけなくて見づらかったです。

field-sizing: content; を用いて構築した場合

しかし、下記のとおりtextareaにfield-sizing: content;を追加すると

textarea { field-sizing: content; }

文章量に応じてテキストエリアの縦幅が変更されます。

見栄えが凄くスマートに見えますね。

今まではJavascriptを使わないとできなかった実装だったのですが、それがたった一行で実装できるようになったかと思うと凄まじいですね。

まとめ

今回はここまでです。今回紹介したものだけでも画期的で面白いと思えるものでしたが、もっと「すごい！」と思ってもらえるようなCSSプロパティのストックがありますのでまたの機会に紹介させていただきます！