に投稿に更新

【CSS】マージン・パディング・ボーダーについて

マージンについて

  • マージンとは日本語で余白
  • 要素の一番外側に位置する領域を意味する
  • background-colorを設定している場合、色の領域は広がらない

マージンとマージンは相殺する

margin-bottom:20pxとmargin-top:30pxが上下に並んでいる場合、2つの要素の距離は２つの値を足した50pxにはならず、重なった部分のマージンは重なったままになるので、結果は30pxのマージンが取られた状態になる

記述する値によって設定できるマージンが変わる

  1. 1つの値を設定する
    • 上下左右のマージンが同じだけ設定される 
      1
      2
      <!-- 上下左右全て100px分のマージンが設定される -->
      margin: 100px;
  2. 2つの値を設定する
    • 上下、左右のマージンが別々に設定される 
      1
      2
      <!-- 上下:100px,左右:50pxのマージンが設定させる -->
      margin: 100px 50px;
  3. 3つの値を設定する
    • 上、左右、下のマージンが別々に設定される 
      1
      2
      <!-- 上:100px,左右:50px,下200pxのマージンが設定される -->
      margin: 100px 50px 200px;
  4. 個別に値を設定する
    • 上の３つとは少し記述の仕方が変わっる 
      1
      2
      3
      4
      5
      <!-- 明示的に設定する -->
      margin-top: 100px;
      margin-right: 100px;
      margin-bottom: 50px;
      margin-left: 100px;

パディングについて

  • マージンの１つ内側の余白を設定する
  • background-colorを設定している場合、色の領域も広がる

width属性とpadding

-width属性はpaddingのピクセル数に対する値ではなく、画面に対する値を設定している
- なので、paddingを広げても文字は広く表示されない

記述する値によって設定できるパディングが変わる

  1. 1つの値を設定する
    • 上下左右のパディングが同じだけ設定される 
      1
      2
      <!-- 上下左右全て100px分のパディングが設定される -->
      padding: 100px;
  2. 2つの値を設定する
    • 上下、左右のパディングが別々に設定される 
      1
      2
      <!-- 上下:100px,左右:50pxのパディングが設定させる -->
      padding: 100px 50px;
  3. 3つの値を設定する
    • 上、左右、下のパディングが別々に設定される 
      1
      2
      <!-- 上:100px,左右:50px,下200pxのパディングが設定される -->
      padding: 100px 50px 200px;
  4. 個別に値を設定する
    • 上の３つとは少し記述の仕方が変わっる 
      1
      2
      3
      4
      5
      <!-- 明示的に設定する -->
      padding-top: 100px;
      padding-right: 100px;
      padding-bottom: 50px;
      padding-left: 100px;

ボーダーについて

  • マージンとパディングの境界線の設定ができる

記述する値によって設定できるボーダーが変わる

  1. 3つの値を設定する

    • 線の太さ、線の色、線の種類を設定する 
      1
      2
      <!-- 線の太さ:1px,線の色:黒,線の種類:実線-->
      border: 1px black solid;

  2. 各要素を別々にかつ、上下左右を変えて設定できる

    • 設定方法が細かくあるので、参考リンクだけを紹介する

    w3schools border-style

ブラウザのデフォルトのマージンやパディングを無効にする

1
2
3
4
5
<!-- bodyタグに対して設定する -->
bodu{
	margin: 0;
	padding: 0;
}
に投稿に更新

【CSS】positionプロパティについて

postion属性とは

  • 要素の位置を指定するための属性

指定する方法の種類

  1. relative : 相対位置への配置
    • その要素が本来配置される位置からの相対位置
  2. absolute : 絶対位置への配置
    • 画面上の座標
  3. fixed : 絶対位置への配置 + スクロールされても位置が固定

指定方法

  1. まずは位置の指定方法を記述する
    1
    position: relative;
  2. どちらの方向にどれだけ動かすかを指定する
    1
    top: 200px;

まとめると

1
2
3
4
.test{
	position: relative;
	top: 200px;
}

relativeとabsoluteの違い

イメージ

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
	<head>
		<title>position</title>
			<style type="text/css">

				.first-section{
					background: lightgreen;
					width: 100px;
					height: 100px;
					position:relative;
					left:200px;
					top:200px;
				}
				.second-section{
					background: pink;
					width: 100px;
					height: 100px;
					position:absolute;
					left:200px;
					top:200px;
				}
				.third-section{
					background: red;
					width: 100px;
					height: 100px;
					position:fixed;
					left:400px;
					top:400px;
				}
		</style>
	</head>
	<body>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<div class="first-section">
			<p>1</p>
		</div>
		<div class="second-section">
			<p>2</p>
		</div>
		<div class="third-section">
			<p>3</p>
		</div>
	</body>
</html>

参考

便利な属性

奥行きの指定

z-index属性を使って指定する
- 大きい値を設定したスタイルを適応した要素が上に描画される

1
2
3
4
5
6
7
8
9
10
11
.test{
	position: relative;
	top: 200px;
	z-index: 1;
}

.test2{ <!--こっちが上に表示させる-->
	position: relative;
	top: 200px;
	z-index: 2;
}

透明度の指定

  • opacity属性を使って0~1までの間で指定する
    1
    2
    3
    4
    5
    .test{
    	position: relative;
    	top: 200px;
    	opasity: 0.5; <!--透明度を指定-->
    }
に投稿に更新

インラインCSSと内部CSSいついて

1.インラインCSS : body内の各種タグの中に記述する

  • 一つ一つのタグに設定する必要がある

  • インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する

    1
    style=属性:"属性値"

  • color属性で色を変える例

    1
    <p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>

  • 複数の属性指定したい場合、;を入力することで指定できる

    1
    <p style="color:blue;font-size:300%">今回は、新しくリリースするプロダクトの紹介をします</p>

2.内部CSS : headタグ内に記述する

  • headタグの内部に記述するCSS
  • 具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
     <head>
      <style>
       <!--ここにスタイルを記述する-->
      </style>	
     </head>
     <body>

     </body>
    </html>

スタイルの記述には２通りの方法がある

  1. タグ全体に適応する
  2. 指定した領域のみに適応する

1. タグ全体に適応する

  • styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する
  • 複数のスタイルを記述する場合、;で区切る
    1
    2
    3
    4
    5
    6
    7
    <style>
    <!--pタグ内の全てのテキストにここに記述したレイアウトが適応される-->
     p{	
      color:blue;
      font-size:150%;
     }
    </style>

2. 指定した領域のみに適応する

  1. class属性を使用する
    • 複数のタグに適応できる
  2. id属性を使用する
    • １つのタグのみに適応できる
  3. span属性を使用する
    • 特定の文字列適応する

1. class属性を使用する

  • class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する
  • 同一のクラス名を他のタグにも割り当てることができる
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       .A{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1 class="A">クラスでスタイルを指定しています</p>
      <p class="A">クラスでスタイルを指定しています</p>
      <p> クラス名を指定していません</p>
     </body>
    </html>

2. id属性を使用する

  • id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する
  • 1つのタグにしか適応できない
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       #B{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1 id="B">クラスでスタイルを指定しています</p>
      <p><クラス名を指定していません/p>
      <p> クラス名を指定していません</p>
     </body>
    </html>

3. span属性を使用する

  • spanタグ(<span></span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する
  • class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       .C{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1>クラスでスタイルを指定しています</p>
      <p>クラス名を<span class="C">指定</span>していません</p>
      <p>クラス名を指定していません</p>
     </body>
    </html>
に投稿に更新

cssにつて

CSSとは何か

  • 正式名称 : Cascading Syle Sheets(カスケーディングスタイルシート)
  • ページレイアウトを形成するためのスタイルシート
  • HTML = マークアップ,CSS = レイアウト

記述方法の種類

  1. インラインCSS : body内の各種タグの中に記述する
    • インラインスタイルシートと呼ぶ場合もある
  2. 内部CSS : headタグの中に記述
    • 内部スタイルシートと呼ぶ場合もある
  3. 外部ファイル(.css)
    • 外部スタイルシートと呼ぶ場合もある
    • コンテンツとデザインの分離ができるので、外部ファイルに記述するのが基本

1.インラインCSS : body内の各種タグの中に記述する

  • 一つ一つのタグに設定する必要がある

  • インラインCSSと呼ばれる書き方で、直接タグの中でstyle属性を指定する

    1
    style=属性:"属性値"

  • color属性で色を変える例

    1
    <p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>

  • 複数の属性指定したい場合、;を入力することで指定できる

    1
    <p style="color:blue;font-size:300%">今回は、新しくリリースするプロダクトの紹介をします</p>

2.内部CSS : headタグ内に記述する

  • headタグの内部に記述するCSS
  • 具体的にはheadブロック内にstyleブロックを作成し、そこにスタイルを記述する
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
     <head>
      <style>
       <!--ここにスタイルを記述する-->
      </style>	
     </head>
     <body>

     </body>
    </html>

スタイルの記述には２通りの方法がある

  1. タグ全体に適応する
  2. 指定した領域のみに適応する

1. タグ全体に適応する

  • styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する
  • 複数のスタイルを記述する場合、;で区切る
    1
    2
    3
    4
    5
    6
    7
    <style>
    <!--pタグ内の全てのテキストにここに記述したレイアウトが適応される-->
     p{	
      color:blue;
      font-size:150%;
     }
    </style>

2. 指定した領域のみに適応する

  1. class属性を使用する
    • 複数のタグに適応できる
  2. id属性を使用する
    • １つのタグのみに適応できる
  3. span属性を使用する
    • 特定の文字列適応する

1. class属性を使用する

  • class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する
  • 同一のクラス名を他のタグにも割り当てることができる
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       .A{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1 class="A">クラスでスタイルを指定しています</p>
      <p class="A">クラスでスタイルを指定しています</p>
      <p> クラス名を指定していません</p>
     </body>
    </html>

2. id属性を使用する

  • id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する
  • 1つのタグにしか適応できない
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       #B{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1 id="B">クラスでスタイルを指定しています</p>
      <p><クラス名を指定していません/p>
      <p> クラス名を指定していません</p>
     </body>
    </html>

3. span属性を使用する

  • spanタグ(<span></span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述する
  • class idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
     <head>
      <style>
       .C{
        color:blue;
        font-size:150%;
        }
      </style>	
     </head>
     <body>
      <h1>クラスでスタイルを指定しています</p>
      <p>クラス名を<span class="C">指定</span>していません</p>
      <p>クラス名を指定していません</p>
     </body>
    </html>

カテゴリ

最近の記事

アーカイブ

タグ

#Hexo1
#Terminal1
Alacritty2
Android3
Android Studio3
AppleScript1
Blade1
Bluetooth1
C#2
C++6
CPU1
CSS5
Chrome1
Coc.vim1
Composer2
Cpp11
Docker8
GAS1
GCC1
GLFW1
Git39
GitHub3
HTML15
Heroku1
Hexo3
Javascript6
Kotlin3
LINE1
Laravel14
Linux8
Linuxコマンド1
M1 Mac1
MSYS2/MinGW1
MYSY21
Mac7
Make2
Markdown1
NERDTree1
Oculus Quest27
PHP30
PHPDocumenter1
PHPUnit1
Postman1
PowerShell1
SDL23
Shell4
Slack1
Studio1
Swfit1
Swift52
Terminal1
Test Runner3
Tools2
Ubuntu8
UnitTest1
Unity18
VSCode1
Vim17
VimPlugin1
Vimプラグイン1
Visual Studio1
VisualStudio4
VisualStudioCode1
WSL3
Windows5
Windows API1
XCode45
Xcode3
Zsh1
alias1
anyenv1
apt1
blog2
coc-nvim1
coc-vim1
homebrew1
iTerm22
node.js3
nvm1
prezto1
vim2
yarn1
zsh3
ゲーム2
コンパイラ1
シェルスクリプト1
シーケンス図1
テスト2
ネットワーク1
プライバシーポリシー1
文字コード1
検索1
知識4
自動化1
設定1

広告

×