• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第5回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き5回目の勉強内容です。

前回はCSSを用いた文字の装飾について解説しました。今回はブロック要素と呼ばれるものついての装飾について解説します。

ブロック要素とは、文書の骨組みのことです。この要素を記述すると、左右幅いっぱいまで領域を占領することができます。簡単に言うならば、文字通りブロックをつくります。ブロック要素の中には、インライン要素を含むことができます。例えば、<ul>、<p>、<table> などがあります。

それに対して、インライン要素は、行の中の文字に論理的な意味を持たせたりするものです。 この要素を記述すると、要素は左から順に並びます。インライン要素の中には、インライン要素しか含むことはできません。例えば、<a>、<br>、<img>などがあります。

ただし、この分類に当てはまらない要素も存在します。

ブロック要素とは何かについて理解したところで、ブロック要素とその余白部分について図説します。

ブロック要素と余白部分の関係を図示すると上のようになります。まず、上の図において濃紺の枠線をborderと呼びます。これは内側をpadding、外側をmarginとして区切る線です。marginは上の図灰色の余白に相当します。要素はpaddingの値を指定することで占領する領域を拡大・収縮します。この際、marginが相殺され、削られます。

marginとpaddingはプロパティにこれらを記述し値を指定することで、変更することができます。

padding:○○px;
margin:○○px;

という書式で指定します。例えば、

ul{
padding-right:20px;
margin-bottom:20px;
}

といった感じです。

数値を変更した際の移動は、つっかえ棒を長くしたり短くしたりするのをイメージしてください。例えば、padding-top:20px;として変更を加えたのであれば、20px分の長さのつっかえ棒がテキストを、20px分下方向に押し出すということです。

また、borderの線の色、太さ、種類を一括で指定することもできます。

border:色のコード ○○px 線の種類;

とすればよいのです。

線の種類には、none(線なし)、dotted(点線)、dashed(破線)、solid(実線)、double(二重線)、ridge(立体的に隆起)などがあります。また、border-leftなどと指定することで、上下左右で個別に設定することができます。

最後に、ブロック要素のうち、paddingを含まない部分までの要素の大きさの変更方法について解説します。縦横を変更したい場合はそれぞれ、

height:○○px;
width:○○px;

と記述してください。

今回はpaddingやmargin、borderなどややこしい用語が出てきて混乱する回だったと思います。各用語の定義をしっかりと覚え、どの部分を変更するときにはどんな記述をすればよいかを明確にしましょう。

次回はホームページに動きをつけるJavascriptについて解説する予定です。お楽しみに!

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top