半日悩んで見つけた「max-conent」を半日で見送った / CSSの迷い道

プロパティの発見はDevToolsから

いちからHTMLを書ける場合は、デザインに困った場合にHTMLから組みなおすということが出来ます。一方、ユーザースタイルシートによるアレンジは、元のHTMLを一切変更する事なくデザインを仕上げる必要があり、「不可能」と「可能」の間での闘いになる事がしばしばあります。

その過程で、いやおうなく新種のCSSプロパティを探す事になり、これはある意味で恩恵と言えます。普通にはなかなか気付けないプロパティの必要性に、気付ける事がありますから。

必要に駆られネットを検索するのは普通の事ですが、案外と良く教えてくれるのが DevToolsのプロパティ値のセレクタです。誰でも知っている「width」プロパティですが、先日あるアレンジで幅の問題に悩んでいて「max-conent」「fit-content」という値があるのを教えられました。

これは「ボックス幅を内容の幅に合わせて指定する」という感じの指定値です。

「max-conent」が必要な場合の例

以下のサンプルは、実は私の未熟さが手伝った失敗で煮詰まったもので、途中でそれに気付かれる方がいるかも知れません。それでも「max-content」が救ってくれ、このプロパティの便利さが判りました。

以下はサンプルのHTMLで、textにコピペして「.html」ファイルにすると、ブラウザに表示出来ます。

HTML

<html><body>
<div id="main">
<div id="A">内容A
<span id="ASub">内容ASub 可変幅▢▢▢▢▢▢▢▢▢▢</span></div>
<div id="B">内容B</div>
</div>
</body></html>

以下は、これを修飾するCSSで「Stylus」に登録すると、実状況がテスト出来ます。

CSS

/* サンプルCSS */
body {
    background: #eee; }

#main {
    width: 560px;
    height: 100px;
    margin: 50px;
    padding: 10px;
    border: 1px solid #000;
    background: #fff; }

#A {
    position: relative;
    white-space: nowrap;
    width: 300px;
    padding: 6px;
    border: 1px solid #000;
    background: #d1e7ff; }

#ASub {
    display: inline-block;
    vertical-align: top;
    margin-left: 60px;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000;
    background: #74f0c2; }

#B {
    margin: -40px 0 0 330px;
    width: 200px;
    padding: 6px 6px 8px;
    border: 1px solid #000; }

/* 内容Aのフォバー */
#A:hover {
    width: auto; }

#A:hover #ASub {
    width: auto; }

デザインの状態

マウスを乗せない時

「#A」にマウスを乗せた時

嵌ってしまった問題

常時は「#ASub」が、幅が狭い「#A」の中にエリプシス指定（隠れた部分の…表示）で閉じ込められた状態です。目的のデザインは「#A」にマウスが乗ると拡がり、内部の「#ASub」の幅全てを表示するというものです。

但し、「#ASub」の内容はシステムにより様々な長さの文字列がインポーズされ、幅は一定ではありません。

「#A」が「#main」の全幅まで拡大するのは、一般に

　　　#A:hover {width: 100%;}

の指定をした場合ですが、上のサンプルCSSでは「auto」や「unset」でも、全幅に拡大してしまいます。「#ASub」が固定幅なら、その値に合わせた適当な幅値を指定すれば済む事ですが、これができません。

この解決に困ってしまったのですが、最後の「内容Aのフォバー」の部分に、以下の「max-content」を使ったコードで解決出来る事が判りました。

/* 内容Aのフォバー */
#A:hover {
    width: max-content; }

#A:hover #ASub {
    width: auto; }

つまり、このコードは「#A」を、中の「内容A ＋内容ASub」の幅に合わせる様に指定するものです。（普通はautoでいけるのですが）

このコードでフォバー時の「#A」は、下図の様に右側に余裕が出来ます。

見落としていた事

コード全体に関して少し変わっているのは、「#B」を「position」等を使わずに「margin」で「#A」の横に置いた点で、「#A」の拡張で「#B」の配置がズレません。この部分に気をとられてましたが、問題は「#B」とは無関係でした。

で、後から判ったのは「#A」が「block」要素だったのが原因でした。必要だったのは下の指定で、「inline-block」なら「max-content」は不要で「auto」「unset」などで済んだのです。

　　　#A {display: inline-block;}

「block」要素は幅指定がないと領域幅の全体に拡がるものですから、当然の事を見落としていました。しかしそんな時に、固定値を指定しなくても「max-content」が使えるのは、非常に有り難いわけです。

「block」と「inline-block」の違いに注意が要る事に変わりがありませんが、こういったプロパティがあれば、たとえ勘違いしていても良い結果が得られます。

もうひとつの誤算

「max-content」を使って無事解決したと思っていたら、Firefoxで同じコードを試すと全く駄目でした。接頭辞「-moz-」を付ければ使えたのですが、ちゃんと調べずに結局はこのコードを削除してしまいました。再び半日かけて別のコードに改め、最後は「inline-block」を指定するコードに辿り着きました。まあ、今となっては明かですが、嵌っている時はなかなか問題点が見えないものです。