0ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか?例えばテキストを画面の、あるいはエリアの中央に寄せたい場合は[text-align:center;]が一般的ですよね。auto;]のように指定すれば中央寄せになるでしょうか。auto;]で左右中央寄せする方法」をご紹介します。幅が変動する要素を左右中央に寄せたい場合は、width属性に[max-content]という値を設定します。具体的には、このような記述です。auto;}こちらの記述でうまく左右中央に表示されない場合は[max-content]の部分を他の値に変えてみてください。[max-content]は「その要素が取りうる幅の最大値」ですが、他にはこのような値です。「包まれている要素の幅を超えず、逆に包んでいる要素がはみ出ない程度の値」という解釈をしています。ページの先頭へ戻る[説明]主要ブラウザに対応させるための記述について上記のCSSの記述には[width:-@@@@@@-content;]のような記述のものがあります。「width属性にこんなに値を設定して大丈夫?最後の1種類だけしか効かないんじゃない!?」というご意見もありそうですが、こちらは主要ブラウザに等しく対応させるための記述だとお考えください。この記事を執筆している時点(2018年2月)で、[max-content]をはじめとしてこの記事でご紹介している値の設定は、一部のブラウザで非対応となっているので、[width:max-content;]以外の。具体的には、以下の通りの記述で主要ブラウザに対応させる必要があります。Edgeのみに対応させることを目的としたものです。コーディングをしていて、IEのみ、またはEdgeのみ、あるいはIEとEdgeのみ他のブラウザと挙動が異なるという場合があるのは、コーディングをされている皆さんも経験があることなのでは?なので、それらのブラウザのみにもしっかりスタイル定義を反映させたい場合は、接頭辞[-ms-]を追加します。接頭辞[-moz-][-moz-]の接頭辞はFirefoxのブラウザに対応させることを目的としたものです。Firefoxのみにスタイル定義が効かない場合は、こちらを接頭辞に追加します。Chrome、Safari、Opera(一部バージョンのみ)、iOSブラウザ(一部バージョンのみ)が該当します。接頭辞[-o-][-o-]という接頭辞もあります。最近はこれ無しでコーディングすることも個人的にありますが、こちらはOpera(一部バージョンのみ)となります。WebKitをベースにしていない、特定の時点より前のバージョンのOperaということになるでしょうか。妙高Web屋こちらの記事に感想をお寄せくださいこちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。0Web制作CSS3[css]Chrome対策[css]Edge対策[css]Firefox対策[css]IE対策[css]Opera対策[css]Safari対策[css]width属性LINE@始めました!妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。新潟県妙高市を拠点にホームページ制作・広告制作に励んでいます。新潟県妙高市を拠点に、ホームページや紙の広告を制作しております。詳しいご紹介やお仕事に関することは、下記のリンクからご覧いただけます。関連する記事2018/8/27[Web制作]途中で色が変わる見出し罫線を作る方法【CSS3】2019/4/21[Web制作]CSSのグラデーション表現方法〜linear-gradientやradial-gradient〜2018/2/4[Web制作]【CSS】Safariの表示が他のブラウザと違う場合のCSSハック2018/1/31[Web制作]【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)目的のページは見つかりましたか?お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。