未経験からエンジニア転職をするための最強ロードマップロードマップ

【CSS教材③】枠線やmargin・paddingの実装方法からデベロッパーツールの使い方までを徹底解説

ファド

こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!

こちらの記事はCSS教材の第3回目の記事になります。

その他のCSS教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

目次

枠線を指定する

フォルダ名:「border」

今回はborderプロパティを使用して、CSSで枠線の指定をする方法について学習していきます。

まずはコードを見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>枠線なし</div>
    <div class="wrap1">枠線あり①</div>
    <div class="wrap2">枠線あり②</div>
</body>

</html>

style.cssを下記の通り編集してください。

.wrap1 {
    border: 1px solid black;
    width: 100px;
    text-align: center;
}

.wrap2 {
    border: 5px solid blue;
    background-color: blueviolet;
    color: white;
    width: 200px;
    text-align: right;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!

borderプロパティでは、「線の幅」「線の種類」「線の色」を指定します。
これらの指定順は順不同なので、solid black 1pxなどとしても大丈夫です。

つまりborder: 1px solid black;では、「1pxの幅で1本線の黒色の枠線」が作られるということです。
そしてborder: 5px solid blue;では、「5pxの幅で1本線の青色の枠線」が作られるということです。

また、線にはたくさんの種類があるので、代表的なものを下記の通り表にしました。

線の種類説明
solid1本線
double2本線
dotted点線

これ以外にも線には種類がたくさんあるので、その時々に合った線を皆さんで探し出してみてください!

ちなみにtext-alignプロパティは要素の位置を変更するプロパティです。
rightleftcenterなどを指定することで、テキストの右寄せや左寄せ、中央寄せを実装することができます。
使い方としては、HTMLのalign属性と同じです。

★検索ワード
・CSS 枠線
・CSS border 使い方

余白を変更する

フォルダ名:「margin_padding」

余白やレイアウトの設定をする場合には、「マージン(margin)領域」、「パディング(padding)領域」、「ボーダー(border)領域」、「内容領域(Content)」の4つの領域から構成されるボックスモデルというものを考える必要があります。

borderに関しては、以前のレクチャーで学習しているので、なんとなく想像できるかと思いますが、今回は他の領域についても確認していきたいと思います。

領域説明
マージン(margin)領域ボーダー領域の外側にある「余白」の領域
ボーダー(border)領域マージン領域とパディング領域の間にある「ボーダー」の領域
パディング(padding)領域ボーダー領域と内容領域の間にある「余白」の領域
内容領域(Content)ブラウザに表示される要素内の「テキスト」や「画像」を含む基本領域

今回新しく出てきた「マージン領域」と「パディング領域」は、marginプロパティpaddingプロパティを使用して実装します。
marginプロパティpaddingプロパティはともに余白を設定するプロパティですが、border領域の外側の余白を設定するのがmarginで、その内側の余白を設定するのがpaddingです。

言葉だけではとてもわかりにくいので、実際にコードを使いながら説明していきます。

padding

まずは、border領域より内側の余白を設定するpaddingから見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>paddingの設定なし</p>
    <p class="box">padding設定あり<br>paddingに50pxを指定しました。</p>
</body>

</html>

style.cssを下記の通り編集してください。

p {
    border: 1px solid blue;
    background-color: lightskyblue;
}

.box {
    padding: 50px;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!

2つの違いは、borderより内側のテキストの周りに余白があるかないかです。
class名がboxで指定されている方のp要素にはpadding: 50px;が指定してあるため、borderの内側に50pxの余白が上下左右についています。

margin

次にborder領域より外側の余白を設定するmarginについて見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>paddingの設定なし</p>
    <p class="sample1">paddingに20px、marginに30pxを設定しました。</p>
    <p class="sample2">paddingに20px、marginに60pxを設定しました。</p>
    <p class="sample3">paddingに20px、marginに90pxを設定しました。</p>
</body>

</html>

style.cssを下記の通り編集してください。

p {
    border: 1px solid blue;
    background-color: lightskyblue;
}

.sample1 {
    padding: 20px;
    margin: 30px;
}

.sample2 {
    padding: 20px;
    margin: 60px;
}

.sample3 {
    padding: 20px;
    margin: 90px;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!

それぞれの違いは、borderの外側に余白(margin)があるかないかと、marginに設定したpx数の違いです。
sample1sample2sample3にはそれぞれ、30px60px90pxmarginを指定しています。
そのため、それぞれに指定したpx分の余白がborderの外側に取られています。
それぞれの要素が離れているのが確認できますね!
これがmarginです。

marginの相殺

marginの説明をした時に不思議に思った方もいらっしゃるかもしれませんが、marginプロパティは、条件が揃うと余白が相殺されてしまう場合があります。

どういうことかというと、上記のコードでいうところのsample1sample2の間の余白は、sample1:30px + sample2:60px = 90pxになるのかというとそうではなく、値の大きいsample2marginが適用されますので60pxになります。
これがmarginの相殺です。

本来「marginの相殺」が起こっている場合は、意図しない表示がされてしまう可能性があるので、どちらかのmarginの設定をしないようにするのが当たり前になっています。
marginmargin-topmargin-bottommargin-leftmargin-rightなどで設定することもできます。
また、margin: 10px 0px 10px 20px;とすることで、「上:10px」、「右:0px」、「下:10px」、「左:20px」とすることもできます。
paddingも同じように設定できます

marginの相殺が起こっている場合は、相殺されて反映されていないmarginを設定しないか、0pxとしてあげましょう。

今回は縦に要素が並んでいたので、縦方向へのmarginの相殺が起こりましたが、横方向にも同様にmarginの相殺は起こるので注意してください。

★検索ワード
・CSS 余白 設定
・CSS margin 使い方
・CSS padding 使い方
・CSS marginの相殺

デベロッパーツールの使い方

フォルダ名:「tool」

デベロッパーツールを解説するためのコードが必要なので、index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrap">
        <p class="text">テキスト</p>
        <p class="test">テスト</p>
        <div class="content">
            <p>コンテンツ</p>
            <p>コンテンツ</p>
            <p>コンテンツ</p>
        </div>
    </div>
</body>

</html>

style.cssを下記の通り編集してください。

.wrap {
    width: 600px;
    border: 1px solid black;
}

.text {
    margin-left: 10px;
}

.test {
    margin-left: 10px;
}

.content {
    width: 300px;
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです!

それでは、準備が整ったので、デベロッパーツールについて説明していきます。

デベロッパーツールでできること

まず、デベロッパーツールを使うと、下記のようなことができるようになります。
・Chrome上でWebサイトのコード確認
・デザイン変更のテスト
・表示チェック

他の機能についてもJavaScriptを勉強する時に触れますが、デベロッパーツールを使うと様々なことができます。
まずは今回のCSS教材で、デベロッパーツールの基本的な使い方を覚えていきましょう!

デベロッパーツールの開き方

ブラウザの真っ白になった部分をクリックしてから、Command + Option + Iを同時に押してください(Windowsの人はF12のみを押す)。
または、ブラウザ内のどこかで右クリックをして、メニューから検証をクリックすることでも表示できます。
下記のような画面が出てくればOKです!

コードの表示

  1. 下記画像の通りデベロッパーツールの左上にあるマークをクリックしてください。

2. コードの見たい部分をクリック
今回は一番上のテキストをクリックしてください。

そうすると、デベロッパーツールが下記のような状態になります。

まず、左側の赤枠の中を見ていただくと、<p class="text">テキスト</p>が青色でハイライトされていますね!
このことから先程クリックした<p class="text">テキスト</p>が選択されていることがわかります。
つまり、先ほどクリックしていただいたp要素がデベロッパーツール上で確認できるようになっています。

次に、右側の青枠で囲われた中に選択された要素に適用されているCSSが表示されています。
内容が見切れてしまっている場合は、上下にスクロールすることもできます。

緑枠で囲われたところに見覚えはありませんか?
これは以前のレクチャーで解説した「マージン(margin)領域」、「パディング(padding)領域」、「ボーダー(border)領域」、「内容領域(Content)」の4つの領域から構成されるボックスモデルです。

デベロッパーツールを使用すると視覚的にボックスモデルが表示されるので、margin・padding・borderがどれくらい指定されているのかや、要素の幅・高さなどがすぐに分かるようになっています。

今回の例で言うと、margin-left: 10px;を指定してあるので、左側のmargin10px分指定されているのがわかります。
また、ブラウザには各HTMLタグ(pタグやh1タグなど)にデフォルトでCSSが当てられています。
HTML教材でh1要素h2要素で見出しを実装した際に、文字の大きさなどが違ったのはこのデフォルトのCSSが適用されていたためです。
そのため、デフォルトでp要素には上下に16px分のmarginが設定されているので、style.cssでは特に設定していませんが、上下のmargin16pxが指定されています。
そして、表示領域の幅✕高さが590✕24ということでそれぞれpxで表示されています。

デザイン変更のテスト

デベロッパーツールを使用すると、VSCodeを使用せずにデベロッパーツール上でデザインを変更し、変更した場合の見た目を確かめることもできます。

変更の仕方はとても簡単で、変えたい値をダブルクリックして入力し直すだけです。

例えば、先ほどのp要素であるテキストのmargin-left: 10px;10pxを変更する場合は、10pxのところをダブルクリックします。

そうすると、入力できるようになるので、100pxなどに変えてみましょう。
すると、どうでしょうか?
下記のように、margin-left10pxから100pxに変わっているので、テキストの左側の余白が大きくなっています。

margin-leftの部分をダブルクリックすれば、margin-leftmargin-rightなどと変更することもできます。

ただし、デベロッパーツール上で変更しても、VSCode上に変更内容が反映しているわけではありません。
その証拠として、ChromeをCommand + R(Windowsの方はCtrl + R)でリロードした場合、変更した内容は反映されていません。

なので、デベロッパーツールで変更した部分は皆さん自身でコピー&ペーストなどを駆使してVSCodeに反映させる必要があります。

では、どのような場面でこの機能を使うのかというと、デザインの微調整をしたい時などです。
「この余白が少し足りないな」などのデザイン上で不満があった場合に、いちいちVSCode上のファイルを変更して微調整しようとすると、何度もファイルを変更して保存、ブラウザのリロードを繰り返すことになります。
しかし、デベロッパーツール上で微調整をして、良い塩梅のpx数を見つけてからVSCode上に反映させることで、面倒くさい手間を省くことができるということです。

お手軽にデザインのテストをしたい場合は、デベロッパーツールを使用してみるのがいいですね!

表示チェック

デベロッパーツールでは、様々な大きさの端末での表示を確認することができます。
単純にブラウザ幅を変えることで確認することもできますが、より正確に確認するには、こちらのデバイスモードを使用しましょう。

なお、まだレスポンシブデザインについて学んでいないですが、レスポンシブデザインを学ぶ時はこの「デバイスモード」を使用してスマホの表示のチェックをしてください。

上記のマークをクリックすると下記画像のように見た目が変わります。

画面上のデバイス名が書いてある部分をクリックすると、下記画像のようなプルダウンが出てくるので、表示テストをしたいデバイスを選択することで、選択したデバイスでの表示ができるようになります。
※プルダウンに出てくるデバイスはChromeのバージョンなどによって違う場合がありますが、特に気にする必要はありません。

今回は例として、iPhone Xでの表示になっています。

★検索ワード
・デベロッパーツール 使い方

次の教材

次の教材は下記から簡単に飛ぶことができます!
引き続きプログラミングを楽しんでいきましょう!

あわせて読みたい
【CSS教材④】floatの実装方法から余白の計算、box-sizingの使い方までを徹底解説 こちらの記事はCSS教材の第4回目の記事になります。 その他のCSS教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 floatについて フォルダ名:「floa...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!

サポート価格はなんと1日あたりたったの約300円!

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!

なお、サポート内容の詳細は下記の通りです。

  • 目標設定
  • マインドセット
  • オリジナル教材見放題
  • オリジナル課題見放題
  • オリジナル課題の解答見放題
  • 課題コードレビュー
  • 教材への無制限質問
  • 課題への無制限質問
  • ポートフォリオ作成アドバイス
  • 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

コメント

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    目次