WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

border/padding/margin

border

p {
  border: 1px solid #000;
}

ボーダーのスタイル・太さ・色を指定する

「border-width」、「border-style」、「border-color」を合わせて
「border」プロパティにショートハンドで書ける。

順番は任意

「border」のみだとボックスの四方を囲う線になるが、
「border-top」、「border-right」、「border-bottom」、「border-left」
で一部のみ指定することもできる。

border-width

borderの太さ(px)

border-style

solid…1本線で表す
dotted…点線で表す

border-color

borderの色

borderの種類

f:id:mmmmofu:20160823111544p:plain

http://efu.sakura.ne.jp/web/border/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>border</title>
  <style>
    body, html, p, div, hr {
      margin: 0;
      padding: 0;
      line-height: 1.0;
      font-family:
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;
    }
    p {
      padding-bottom:10px;
    }
    .box {
      width: 750px;
      margin: 100px auto 0;
    }
    hr {
      border: none;
      height: 8px;
      color: transparent;
      margin-bottom: 50px;
    }
    .solid {
     border-top: solid 8px #666;
    }
    .dotted {
     border-top: dotted 8px #666;
    }
    .dashed {
     border-top: dashed 8px #666;
    }
    .double {
     border-top: double 8px #666;
    }
    .ridge {
      border-top: ridge 8px #666;
    }
    .groove {
      border-top: groove 8px #666;
    }
    .inset {
      border: inset 8px #666;
    }
    .outset {
    	border: outset 8px #666;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>solid(1本線)</p>
    <hr class="solid">
    <p>double(2本線)</p>
    <hr class="double">
    <p>dotted(点線)</p>
    <hr class="dotted">
    <p>dashed(破線)</p>
    <hr class="dashed">
    <p>ridge(隆起した山形の線)</p>
    <hr class="ridge">
    <p>groove(窪んだ谷型の線)</p>
    <hr class="groove">
    <p>inset(立体的に窪んだ線)</p>
    <hr class="inset">
    <p>outset(立体的にに突出した線)</p>
    <hr class="outset">
  </div>
</body>
</html>
solid 1本線
double 2本線
dotted 点線
dashed 破線
ridge 隆起した山形の線
groove 窪んだ谷型の線
inset 立体的に窪んだ線(一部指定だと表現できない)
outset 立体的にに突出した線(一部指定だと表現できない)

padding

p {
  padding: 10px 5px 10px 5px;
}

borderがある部分に対し余白を開ける空間を作る
コンテント内の読みやすさを確保するために使う

「padding-top」「padding-right」「padding-bottom」「padding-left」
の順番で書く。
「padding」プロパティにショートハンドで書くことができる。

p {
  padding: 10px 5px;
}

上下10px、左右5px

p {
  padding: 0 40px 50px;
}

上0px 左右40px 下50px

margin

グループを分けた時に別のブロッグと区別させやすくするために使う
ボックスに横幅(width)を指定してmargin: 0 auto;にすると
ブラウザの真ん中にボックスがくる。


http://d.hatena.ne.jp/webmaster-web/20150402d.hatena.ne.jp

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>初めてのHTML</title>
<meta neme="description" content="キーワードから始まる3分節">
<style>
h1 {
  color: #F08DBE;
  border: 2px solid #FFBD34;
  font-size: 20px;
  padding: 20px;
}
p { color: blue;
  border: 6px dotted yellowgreen;
  font-size: 20px;
  padding: 20px;
}
h2 {color: coral;
  border: 4px dashed limegreen; 
  padding: 20px;
}
#content {
  width: 800px;
  background: #ECECEC;
  maegin: 50px auto 50px auto;
}
#header {
  background: #FFF;
  width: 500px;
  maegin: 10px auto;
}
</style>
<link rel="stylesheet" href="mystyle.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="content">
<div id="header">
<h1>こんにちは!</h1>
<p>こんばんは!</p>
</div><!-- /#header -->
</div><!-- /#header -->
<h2>初めてのCSS記述</h2>
<p>文字の色と枠線と余白を記述しました。</p>
</div><!-- /#content -->
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<style>
body{
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
}
h1,p{
  margin-left: 160px;
}
h1{
  margin: 40px 0 60px 160px;
  font-size: 28px;
}
p{
  width: 330px;
  line-height: 1.6;
}
#box1{
  width: 500px;
  margin: 50px auto;
}
.border1,.border2,.border3,.border4,.border5,.border6{
  border: 1px solid #333;
  margin: 15px 0;
  padding: 10px;
}
.border2{
  border: 5px solid #999;
}
.border3{
  border: 1px solid #F00;
}
.border4{
  border: 1px dotted #333;
}
.border5{
  border-top: 5px solid #2D9A61;
  border-right: 1px dotted #2D9A61;
  border-bottom: 2px dotted #2D9A61;
  border-left: 12px solid #2D9A61;
}
.border6{
  border-top: 2px solid #21669D;
  border-right: none;
  border-bottom: 3px double #21669D;
  border-left: 1px solid #21669D;
}
</style>
</head>
<body>
<div id="box1">
<p class="border1">テキストの囲みを表現したい[標準]</p>
<p class="border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="border6">テキストの囲みを表現したい[複数の指定]</p>
</div>
</body>
</html>