講座1

枠の大きさをHTMLとCSSを使って変える方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、枠の大きさをHTMLとCSSを使って変える方法をします。

枠の大きさをHTMLとCSSを使って変える方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「枠の大きさをHTMLとCSSを使って変える方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<div class="wakuookisa">
サンプル１
サンプル２
サンプル３
</div>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「サンプル１、サンプル２、サンプル３」の文字が黒い枠で囲まれていることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*枠の大きさ変更CSSコード*/
.wakuookisa{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 300px; /*枠の横幅*/
    height: 250px; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa">
サンプル１
サンプル２
サンプル３
</div>

「padding」は、枠の内側の余白を指定するときに使います。

「margin-bottom」は、枠の外側の下側の余白を指定するときに使います。

「border」は、「solid」は「線の種類」と、「3px」は「線の太さ」、「black」は「色」が入ります。

「width」は、「枠の横幅」を指定します。

「height」は、「枠の高さ」を指定します。

「box-sizing」は、「幅（width）と高さ（height）の中にpaddingとborderを含めるかどうか」を指定します。

width説明

widhtは、枠の横幅を指定するCSSコードです。

widhtの記入方法は、３種類あります。

width一覧表

auto横幅いっぱいに枠を広げる
数値pxpx（ピクセル）で指定した分だけ枠を広げる
数値%%（パーセント）で指定した分だけ枠を広げる

height説明

heightは、枠の高さを指定するCSSコードです。

heightの記入方法は、３種類あります。

height一覧表

auto高さいっぱいに枠を広げる
数値pxpx（ピクセル）で指定した分だけ枠を広げる
数値%%（パーセント）で指定した分だけ枠を広げる

いろいろな枠の記入例

width auto指定枠

CSS

/*width auto指定枠*/
.wakuookisa1{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: auto; /*枠の横幅*/
    height: 250px; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa1">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

width px指定枠

CSS

/*width px指定枠*/
.wakuookisa2{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 500px; /*枠の横幅*/
    height: 250px; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa2">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

width %指定枠

CSS

/*width %指定枠*/
.wakuookisa3{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 50%; /*枠の横幅*/
    height: 250px; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa3">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

height auto指定枠

CSS

/*height auto指定枠*/
.wakuookisa4{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 300px; /*枠の横幅*/
    height: auto; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa4">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

height px指定枠

CSS

/*height px指定枠*/
.wakuookisa5{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 300px; /*枠の横幅*/
    height: 500px; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa5">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

height %指定枠

CSS

/*height %指定枠*/
.wakuookisa6{
    padding: 1em; /*枠の内側の余白*/
    margin-bottom: 2em; /*枠の外の下側の余白*/
    border: solid 3px black; /*枠の線の太さ*/
    width: 300px; /*枠の横幅*/
    height: 50%; /*枠の高さ*/
    box-sizing: border-box; /*枠線はみだし対策*/
}

HTML

<div class="wakuookisa6">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３