質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1947閲覧

calc()関数がわからない

thinkmad83989

総合スコア6

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2020/10/21 01:44

HTML・CSSを使って1カラム全幅デザインを作ろうとしたときにこちらのサイトを参考にCSSを追加したのですが

css

1margin:0 calc(50% - 50vw);

この部分がいまいち理解できません。
かっこの中でプロパティの値を計算式で実行することができることは調べて分かったのですが、全幅になる理由が分かりませんでした。
実際に全幅表示は出来たのですが、なぜそうなったか理解できていないので教えていただきたいです。
追加したコードは以下になります。

css

1.container{ 2position:relative; 3margin:0 calc(50% - 50vw); 4overflow:hidden; 5}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/21 02:03

html,cssはなるべく全てご提示ください
guest

回答1

0

ベストアンサー

CSSの単位に関して学習すれば自ずと理解できるかと。
今回は、親要素が、bodyだったり、全幅の要素であれば、
.containerも全幅になりますが、
画面全幅より小さい要素が、親だった場合、親からはみ出ます。

  • %

親の要素の横幅に対しての比率の大きさ(marginpaddingに当てた場合は、親の横幅に対しての比率となる。heightなどに当てた場合は、親の縦幅に対しての比率となる)

  • vw

ビューポート(ブラウザのウィンドウ領域サイズ)の横幅に対しての比率の大きさ

つまり下記のようになります。

親要素: "width: auto"ないし"width: 100%" 横"margin"は、"50%"だが、"- 50vw"で相殺されるので、"0"となる = 全幅 となる。
親要素: "width: 500px"で ブラウザ横幅: "1000px"の場合 横"margin"は、"50%"("250px")だが、"- 50vw"で、"- 500px"となるので、 = 親横幅 + 500px となる。 (画面横幅と同じ横幅になる)

つまり、親要素に対して、真ん中に持っていきたいが、
常に画面の横幅と同じ横幅にしておきたい、って時のテクニックと思われます。
ただし、画面に対して、常に真ん中にするには、
親要素も常に真ん中にしておく、(margin: auto;を効かせるとか)にしておかないと、
左寄りになって、左に大きくはみ出ることになるかと思います。

投稿2020/10/21 02:17

編集2020/10/21 02:18
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問