TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのfixedで要素をディスプレイの中央に配置する方法【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSのfixedで要素をディスプレイの中央に配置する方法【初心者向け】

初心者向けにCSSのfixedで要素をディスプレイの中央に配置する方法について解説しています。fixedはpositionプロパティに設定する値ですが、要素をディスプレイ画面の特定の位置に固定することが出来ます。画面の中央に要素を配置するには、要素の位置が左上を基準にしている点に注意します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSのfixedで要素をディスプレイの中央に配置する方法について解説します。HTML要素は左上が基準になっているために、画面半分に配置した後に、要素の大きさの半分を引く必要があります。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

CSSのfixedで要素をディスプレイの中央に配置する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

fixedで中央に配置する方法

positionプロパティを用意いて中央に要素を配置します。

CSSで縦中央に要素を配置する方法は色々ありますが、画面中央に揃える為には、要素の幅、marginを調整しなければいけません。

 

実際に書いてみよう

書き方としてはmargin-left margin-rightにネガティブマージンを使用します。

 

HTML

<div id="sample">
  <img src="https://res.cloudinary.com/kehdcode/image/upload/v1537646567/ire.jpg" alt="">
</div>

 

CSS

#sample img{
  position:fixed;
  width:600px;
  height:400px;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-200px;
}

 

この記事を監修してくれた方

大堀 翔一郎（おおほりしょういちろう）
IT商社にてコーポレートサイト、ブランドサイトのディレクター兼デザイナー兼コーダー。

大学卒業後、WEB制作会社にでデザイナーとして入社し大手企業のサイト制作やブランドサイトの制作に携わってきました。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

iframe内の要素がCSSで効かない原因と対処法を現役エンジニアが解説【初心者向け】

iframe内の要素がCSSで効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

表現を豊かに！CSSでborder-radiusを使って角丸を作る方法【初心者向け】

border-radiusを使って角丸を作る方法について解説しています。 ボタンの形や円形のオブジェクトを作る際に便利なプロパティなので、ぜひ書き方を覚えてお...
CSS

今すぐ使える！CSSフレームワークのCompassとは【初心者向け】

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。 Compassを使用するためにはSassの知識、開発環境が必要とな...
CSS

CSSでテキストを縦書き中央揃えする方法を現役エンジニアが解説【初心者向け】

CSSでテキストを縦書き中央揃えする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CS...
CSS

余白を指定したい！CSSのpaddingの使い方【初心者向け】

CSSで書くpaddingについて解説しています。 そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書...
CSS

CSSだけでフェードインアニメーションを実装する方法を現役エンジニアが解説【初心者向け】

CSSだけでフェードインアニメーションを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
CSS

あわせてよく読まれている記事

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次fixedで中央に配置する方法実際に書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

CSSでボタンを中央に配置する方法を現役エンジニアが解説【初心者向け】

CSSでボタンを中央に配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次fixedで中央に配置する方法実際に書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ボタンを中央に配置する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ボタンを中央に配置する方法 ボタンを中央に配置する場合、ボタンの要素がどの要素で作られているかによって、中央に配置する方法が異なります。 代表的な要素の種類としては以下の3つです。 ブロックレベル要素 インライン要素 インラインブロック要素 リンクのボタンとしてよく使用される要素<a>タグは、元々はインライン要素ですが、displayプロパティの値を変更することでブロックレベル要素、インラインブロック要素に変更できます。 また、ボタンの要素の種類に関係なく、Flexboxを使用して中央に配置することも可能です。 それぞれの要素でボタンを中央に配置する方法をみていきましょう。 インライン要素・インラインブロック要素の場合 インライン要素では、インライン要素の親要素のブロックレベル要素に対して、text-align: center; を指定することで画面の中央に配置できます。 なお、誤解されやすい部分として、インライン要素のmarginの左右の値にautoを指定しても無効になります。 marginは、ブロックレベル要素の外側の余白を設定するために使用するプロパティです。   実際に書いてみよう <a>タグのリンクを背景色とボーダーでボタンらしい装飾にして、中央配置にしてみます。 <a>タグは元々インライン要素なので、display:inline-block;を追加したものと見比べてみてください。 HTML <div class="area"> <p>インライン要素のボタンは他の要素と重なってしまいます。</p> <a class="button" href="#">BUTTON</a> </div> <div class="area"> <p>インラインブロック要素のボタンは大丈夫！</p> <a class="inline-block button" href="#">BUTTON</a> </div> CSS .button{ background:gold; padding:1em 1em; border:black 2px solid; text-decoration:none; font-size:1.5em; } .inline-block{ display:inline-block; } 表示結果 どちらもボタンの親要素の.areaにtext-align:center;を適用することで、ボタンを中央に配置することができました。 しかし、インライン要素のボタンは<p>要素とかぶってしまっています。 これはインライン要素が高さや幅を持たず、文の一部のように扱われてしまう性質があるためです。 上記のようにボタンらしい装飾をしたい場合には、<a>タグをインラインブロック要素、またはブロック要素にするとよいです。 [PR] Webデザインで副業する方法とはブロックレベル要素の場合 ブロックレベル要素の場合、幅の値を指定しなければ、横幅が親のブロック要素いっぱいになってしまう性質があります。 そのため、インライン要素やインラインブロック要素の時とは違い、widthでボタンの横幅を指定します。 横幅を指定した上で左右のmarginの値をautoにすると、自動的に中央に配置されます。   実際に書いてみよう 先ほどインライン要素・インラインブロック要素で作ったものと、同じ見た目のボタンをブロックレベル要素にして中央に配置してみます。   HTML <div class="area"> <p>ブロックレベル要素のボタンを中央配置</p> <a class="block button" href="#">BUTTON</a> </div> CSS .button{ background:gold; padding:1em 1em; border:black 2px solid; text-decoration:none;
CSS

中央寄せしたい！CSSでセンタリングする方法【初心者向け】

CSSでセンタリング(中央寄せ)する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるようになっておくと良いでしょう。 領域を中央寄せする方法、テキストや画像を中央寄せする方法を実際にソースコードを書きながら紹介しています。 目次fixedで中央に配置する方法実際に書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！画面内の要素を常に中央に配置したいのですが、どうしたらいいですか～？ 田島悠介 色々方法があるけれど、最初に text-align : center を使ってみようか。 大石ゆかり どうやって使えば良いでしょうか？ 田島悠介 画像を囲っているdiv領域にCSSを付与するんだ。実際にやってみよう。   画像を中央寄せに表示する方法 まずは、画像を中央寄せに表示するサンプルを見てみましょう。 div領域内でimg要素をセンタリングして表示する 画像を中央寄せに表示させるためには、画像の外枠となるdiv要素にtext-align : center を付与します。 画像そのものではなく、親要素にCSSを付与することに注意しましょう。 また、div領域にtext-align : center を付与すると、領域内の子要素だけでなく、孫要素を含む全ての要素に効果が発生します。 効果は、「各インライン要素に発生し、センタリングの基準は各要素の1階層上の要素である」という点に注意しましょう。こちらの画像の場合、画像の親要素がdivであり、div領域の幅を基準に画像がセンタリングされていますね。ブロック要素には無効であることにも気を付けましょう。 上記の例では、わかりやすくdiv領域に border : solid 1px を付与して、枠が目に見えるようになっていますが、div領域が目に見えない場合は text-align : center を付与しても「何を基準にセンタリングされたのか」わからずに混乱することもあります。 div領域に border : solid 1px を付与することで中央寄せの基準が確認しやすいということも覚えておきましょう。 領域を中央寄せに表示する方法 div領域そのものや、text-align : center ではセンタリングできなかった要素を中央寄せするには、margin : 0 auto を使いましょう。 ブロック要素を margin : 0 auto でセンタリングして表示する divなどのブロック要素を中央寄せするには、中央寄せしたい要素に margin : 0 auto を付与します。 img要素をセンタリングした時と違って、「div要素のセンタリング」という文字列は中央寄せになっていません。 この文字列はpタグの中にテキストを記述して表示していますが、今回このpタグには何もCSSを付与していないためです。 marginプロパティは、付与したブロック要素の外側の余白を調整するものです。ですから、上記のグラデーション領域の左右のマージンが自動調整されて、中央寄せされています。 「margin : 0 auto」は暗記されている方も多いと思いますが、0の部分は上下のマージンに相当するため、既存マージン指定と競合を起こして表示に不具合が起こる場合があります。その場合は、margin-left : auto、margin-right : auto と指定することで、縦方向に影響を及ぼさずにブロック要素のセンタリングができます。 [PR] Webデザインで副業する方法とはCSSでセンタリングを成功させるコツ 実際にWEBサイトの画面をデザインしている時に、レイアウト表示に不具合が出てハマった！という方も多いと思います。 こうした状況を解決するためのヒントを記載しておきますので、ぜひ参考にしてください。 インライン要素とブロック要素の違いを理解する 外枠のdiv領域のサイズ指定をする ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する ブロック要素内のテキストをセンタリングして不具合が起こる場合   1.インライン要素とブロック要素の違いを理解する HTML要素は、インライン要素とブロック要素の2つに大別されます。 インライン要素とは、<img>タグや<span>タグが有名で、これらの要素は画面に横並びに表示されます。また、インライン要素特有の特性を持ちます。 ブロック要素とは、<div>タグや<p>タグが有名で、これらの要素は画面に縦並びに表示されます。また、デフォルトの幅が親ブロック要素の枠内100%に広がりますので、margin : 0 auto
CSS

CSSでmarginが効かない原因と対処法【初心者向け】現役Webデザイナーが解説

CSSでmarginが効かない原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次fixedで中央に配置する方法実際に書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   marginが効かない原因 よくあるmarginが効かない場合にはいくつかの原因が考えられます。まずは、CSSのボックスモデルを確認しおきます。 1つのボックスには、上下左右に2種類の余白があります。 padding：内側の余白 margin：外側の余白 marginは隣接するボックス同士の間隔です。 人間で言うところのソーシャルディスタンスです。 paddingは内側の余白で、ボックスの内部という扱いになります。 実は、marginはボックスがブロックレベル要素なのか、インライン要素なのか、インラインブロック要素なのかによって、振る舞いが変わります。 どう変わるのか、実際に書いて検証していきます。   実際に書いてみよう ブロックレベル要素、インライン要素、インラインブロック要素、それぞれの要素に対して、同じpadding、同じmarginを適用して確認してみます。   HTML： <p>ブロックレベル要素</p> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <p>インライン要素</p> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <p>インラインブロック要素</p> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> CSS： .box{ background:gold; padding:1em; margin:1em; border:black 1px solid; } .inline{ display:inline; } .inline-block{ display:inline-block; } 表示結果： paddingとmarginを上下左右に1emを適用したボックスを5つずつ並べてみました それぞれの要素に対してmarginがどのように適用されているのか表示結果を観察してみてください。   ブロックレベル要素の場合 ブロックレベル要素は横幅を指定しない場合、親要素いっぱいまで伸びる性質があります。 そのため、ひとつのボックスの横幅が他の要素に比べて長くなっています。 また、ボックスは横に並びませんので、ボックスは上から下に間隔をあけて並んでいます。 ここで注目して欲しいのが、インラインブロック要素と見比べた場合に、上下のボックスの間隔が狭くなってるところです。 これはmarginの相殺が起こるためです。 ボックスのmargin-top 1em + margin-bottom 1em = 2em の間隔ができるような気がするのですが、実際にはボックスとボックスの間隔は1emになります。 marginが効いていない！と思ってしまいがちなのですが、隣接するブロックレベル要素のmarginは重なり合って、結果的に大きい方の値が適用されるというふうに思っておくと良いです。   インライン要素の場合 インライン要素は本来文章の一部として扱われるような要素で、marginの上下は適用しても他の要素との間隔を作ることができません。 インライン要素の大きさは、中にあるテキスト（文字）などの量やサイズ、行の高さなどによって変化し、CSSでwidthやheightも適用することができません。 インライン要素はあくまでも文章の一部として扱いたいような場合に使用して、他の要素との間隔を作りたい場合や、ボックスとして表現したい場合には、インライン要素以外にするのがよいです。 例えば、<a>タグを使ってリンクのボタンを作る場合などは、display: inline-block; や
CSS

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 以下のような悩みや疑問を持っている方は、記事を読むことで解決できるでしょう。 要素の位置をどのようにコントロールするのかわからない 中央寄せしてみたつもりが、うまくいかない 目次fixedで中央に配置する方法実際に書いてみよう そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 右寄せ・中央寄せ・左寄せをする方法について詳しく説明していくね！ 大石ゆかり お願いします！   ブロック要素・インライン要素 HTMLの要素には、ブロック要素とインライン要素の2種類があります。 ブロック要素は見出しなど、文章の区切りを表すものです。 divタグ pタグ h1タグ インライン要素は、以下のように文章要素を表すものです。 aタグ imgタグ spanタグ 対して、CSSではインライン要素とブロック要素を付け替えたり、両方の特徴を持ったインラインブロック要素にすることもできます。 HTMLとCSSでは、右寄せ・中央寄せ・左寄せの手法や、ブロック要素とインライン要素の手法が異なる点を把握する必要があります。 設定する際は要素がブロック要素なのか、インライン要素なのか把握しましょう。   インライン要素の表示位置 text-align インライン要素の右寄せ・中央寄せ・左寄せの指定する場合、text-alignを使います。 使い方はインライン要素を囲っている親要素に対して、インライン要素を左右中央のどの位置に表示するか指定しましょう。   この例では、インライン要素であるimgタグを親要素divの中で左右中央に配置しています。 See the Pen aligns by TAKAYOSHI (@lspuwbkv) on CodePen. 背景が水色になっている箇所が親のdiv要素の領域です。   親要素の領域の中で、インライン要素を左右中央どこに表示するかを、親要素にtext-alignというCSSを付与し指定します。 div.left { text-align: left; } div.center { text-align: center; } div.right { text-align: right; } leftは左寄せ、centerは中央、rightは右寄せです。 例えば、中央揃えをしたい場合はどの領域において中央にしたいのか、というのを意識しましょう。   [PR] Webデザインで副業する方法とはブロック要素の表示位置は左右マージンを使用する ブロック要素の右寄せ・中央寄せ・左寄せの指定をするには、左右のマージンを使います。 注意点としてtext-alignは使用しないことを把握しておきましょう。 ブロック要素に幅を指定して、左右の余白を設定していくイメージです。   以下のHTMLを具体例として見ていきましょう。 <div class="background left"> <div class="inner">LEFT</div> </div> <div class="background center"> <div class="inner">CENTER</div> </div> <div class="background right"> <div class="inner">RIGHT</div> </div>   以下では、クラスbackgroundの中でクラスinnnerの表示位置を指定しています。 しかし、うまく動作しません。 .background{     background:gray;  
HTML

スペースを作りたい！CSSでmarginの書き方【初心者向け】

初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。 paddingと混同してしまうことも多々あるので、この機会にしっかり覚えておきましょう。 そもそもCSSとは何か分からないという方はこちらをご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！marginはどの部分の余白を設定するものなんですか～？ 田島悠介 marginは、borderの外側の余白を設定するものになるよ。逆に内側はpaddingになるね。 大石ゆかり 縦や横の余白の長さはどうやって決めるんですか？ 田島悠介 長さは値の数値で決定するんだけれど、値をいくつ設定するかによってもどの方向への余白に反映されるかが違ってくるんだ。marginを使うときの決まりを見てみよう。   marginとは marginプロパティを使用すると、各境界の外側の余白を設定することができます。paddingがborderの中の余白であるのに対して、marginはborderの外の余白となります。   paddingとの違い marginは余白や境界の外側のサイズを指定する事ができます。 paddingは余白や境界の内側のサイズを指定する事ができます。 borderと呼ばれる境界線が背景色と別の色で表示されている場合は、marginとpaddingの境界線が分かり易いです。 先ほどの図ですと、paddingが薄緑色のエリアです。 borderは、paddingを囲む濃緑色の線です。 marginは、borderの外側の白色のエリアです。   [PR] Webデザインで副業する方法とはmarginの書き方 marginは以下のように記述します。 margin: 余白の値; 値は1つから4つまで入力する方法があり、その数によって反映される場所が変わります。 値を1つ入力した場合：入力した値の余白が上下左右に等しく設定されます。 margin: 上下左右; 値を2つ入力した場合：1つ目の値が上下に、2つ目の値が左右に適用されます。 margin: 上下 左右; 値を3つ入力した場合：1つ目の値が上に、2つ目が左右に、3つ目が下に適用されます。 margin: 上 左右 下; 値を4つ入力した場合：1つ目の値が上に、続いて右・下・左の順に適用されます。 margin: 上 右 下 左;   田島悠介 値の数と、各方向への適用の関係はこうなっているよ。 大石ゆかり 全部に同じだけの余白を作りたい場合は、値は1つでいいんですね。 田島悠介 そうだね。試しに値を1つ～4つ設定した場合のそれぞれの例を見てみよう。   実際にmarginを書いてみよう 以下のhtmlにmarginプロパティを使用します。 (※htmlとcssのファイルが同じディレクトリ内にあり、cssのファイル名が”sample.css”である場合の例です) html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <link rel=”stylesheet” href=”sample.css” type=”text/css”> </head> <body> <p class=”content1″>コンテンツ部分</p> </body> </html> 値を1つ入力した場合の例です。 css p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 40px;} 画面ではこのように表示されます。40px分の余白が上下左右に等しく設定されます。 値を2つ入力した場合の例です。 css p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 10px 50px;} 画面ではこのように表示されます。1つ目の値10pxが上下に、2つ目の値50pxが左右に適用されています。 値を3つ入力した場合の例です。 css p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 50px 20px 30px;} 画面ではこのように表示されます。1つ目の値50pxが上に、2つ目の値20pxが左右に、3つ目の値30pxが下に適用されています。 値を4つ入力した場合の例です。 css p.content1 {background-color: #fdf5e6; border: solid 2px #556b2f; margin: 20px
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのfixedで要素をディスプレイの中央に配置する方法【初心者向け】