ぱんぶろ

パンジーの「いいね!」ブログ

これさえ覚えておけばWebサイトはデザインできる!CSS要素21選

      2016/04/15  

medium_450873397
photo credit: Paolo Margari via photopin cc

Webサイトのデザインって難しく考えなくても、
今から紹介するCSS要素の使い方さえ覚えておけば自由自在にデザインできます。

覚えるCSS要素は21個だけ。
あとはセンス!

では見ていきましょう。

スポンサード リンク

font-size

文字の大きさを設定する要素です。

【例】

<div style="font-size: 10px;">font-size(10px)</div>
<div style="font-size: 14px;">font-size(14px)</div>
<div style="font-size: 28px;">font-size(28px)</div>

指定した値によって文字の大きさが変わってきます。

font-size(10px)
font-size(14px)
font-size(28px)

font-family

フォントの種類を決めます。
どのフォントを使うかで見栄えが大きく変わってくるものです。

【例】

<div style="font-family: arial;">arial(Googleで使われているやつ)</div>
<div style="font-family: Meiryo;">Meiryo(MicroSoftで使われてるやつ)</div>
<div style="font-family: Lucida Grande;">Lucida Grande(appleで使われてるやつ)</div>

見比べてみるとずいぶんと雰囲気が違います。

arial(Googleで使われているやつ)
Meiryo(MicroSoftで使われてるやつ)
Lucida Grande(Appleで使われてるやつ)

他サイトのfont-familyを調べるときは、Chrome拡張機能「what font」が便利です。
他サイト(ブログ)で使われているフォントが分かるChrome拡張機能が便利すぎる!!!

font-weight

文字の太さを指定できます。

【例】

<div style="font-weight: bold;">font-weight(普通)</div>
<div style="font-weight: normal;">font-weight(太文字)</div>

基本的に使うのは「bold」くらいですかね。

font-weight(普通)
font-weight(太文字)

line-height

文字の高さを指定します。(高さが変わるだけで文字が大きくなるわけではありません。)
font-sizeの値 ×(かける) line-heightの値 が文字のために用意される高さになります。

【例】

<div style="line-height: 1; font-size: 14px;">line-height(1倍)<br>line-height(1倍)<br>line-height(1倍)</div>
<div style="line-height: 1.5; font-size: 14px;">line-height(1.5倍)<br>line-height(1.5倍)<br>line-height(1.5倍)</div>
<div style="line-height: 2; font-size: 14px;">line-height(2倍)<br>line-height(2倍)<br>line-height(2倍)</div>

なんとなく文字の高さが違うのがわかるかと思います。

line-height(1倍)
line-height(1倍)
line-height(1倍)
line-height(1.5倍)
line-height(1.5倍)
line-height(1.5倍)
line-height(2倍)
line-height(2倍)
line-height(2倍)

color

文字の色です。
見栄えには欠かせない要素の1つですね。

色の指定には3通りの方法があります。
同じ色で違いを見ていきましょう。

【例】

<div style="color: red;">color(赤:red)</div>
<div style="color: #f00;">color(赤:#f00)</div>
<div style="color: #ff0000;">color(赤:rgb(255,0,0))</div>

直接、文字色を指定する方法。
16進数で指定する方法。
rgb関数(?)で指定する方法。です。

color(赤:red)
color(赤:#f00)
color(赤:rgb(255,0,0))

text-align

文字とかの配置位置を決めます。
指定できる値は、左と真ん中と右です。

【例】

<div style="text-align: left;">text-align(左)</div>
<div style="text-align: center;">text-align(真ん中)</div>
<div style="text-align: right;">text-align(右)</div>

注意点は、pタグなどのブロック要素である必要があることです。(幅が必要なので)

text-align(左)
text-align(真ん中)
text-align(右)

float

デザインの大御所。float。
サイドメニューがあるのはこの方のおかげ。

HTMLは通常縦に並びますが、floatを使うことで横並びにすることができます。

【例】

<div style="float: left;">float(左から右へ)</div>
<div style="float: left;">float(左から右へ)</div>
<div style="float: left;">float(左から右へ)</div>

右から左も同じ要領です。

float(左から右へ)
float(左から右へ)
float(左から右へ)

overflow

領域からはみ出た文字とかをどうするか指定します。
見えなくする、スクロールするが選べます。

【例】

<div style="width: 100px; height: 100px; overflow: hidden;">overflow(隠す)overflow(隠す)overflow(隠す)overflow(隠す)overflow(隠す)</div>
<div style="width: 100px; height: 100px; overflow: scroll;">overflow(スクロール)overflow(スクロール)overflow(スクロール)overflow(スクロール)overflow(スクロール)</div>

100px × 100px の領域からはみ出た値を上では非表示にし、下ではスクロールにしています。

overflow(隠す)overflow(隠す)overflow(隠す)overflow(隠す)overflow(隠す)
overflow(スクロール)overflow(スクロール)overflow(スクロール)overflow(スクロール)overflow(スクロール)

また、実は、float要素と密接な関係にあって、
横並びやfloatの型崩れを解除することができます。

floatの親要素に「overflow: hidden」を指定してあげます。

【例】

<div style="padding: 10px 20px; background-color: #f5f5f5; margin: 0 30px 30px 10px; overflow: hidden;">
<div style="float: left;">float(左から右へ)</div>
<div style="float: left;">float(左から右へ)</div>
<div style="float: left;">float(左から右へ)</div>
</div>

綺麗に表示されてますね。

float(左から右へ)
float(左から右へ)
float(左から右へ)

ちなみに「overflow: hidden」を指定しない場合。

float(左から右へ)
float(左から右へ)
float(左から右へ)

なんか崩れてます。

width

すでに何度も登場してますが、
幅を決めるものですね。
(divタグとかのブロック要素)

【例】

<div style="width: 100px; background-color: #f5f5f5;">width(100px)</div>
<div style="width: 200px; background-color: #f5f5f5;">width(200px)</div>
<div style="width: 300px; background-color: #f5f5f5;">width(300px)</div>

指定した幅のブロッグが出来上がります。

width(100px)
width(200px)
width(300px)

height

次は高さです。
widthと同様、pなどのブロック要素の高さを決めるものですね。

【例】

<div style="height: 20px; background-color: #f5f5f5;">height(20px)</div>
<div style="height: 40px; background-color: #f5f5f5;">height(40px)</div>
<div style="height: 60px; background-color: #f5f5f5;">height(60px)</div>

指定した高さのブロックが出来上がります。(幅は、指定しなければ親要素の幅になるようです。)

height(20px)
height(40px)
height(60px)

padding

ブロック要素を表現するときに欠かせない要素。
文字と線(border)までの幅を指定するものです。

【例】

<div style="padding: 0; border: 1px #000 solid;">padding(0)</div>
<div style="padding: 10px; border: 1px #000 solid;">padding(10px)</div>
<div style="padding: 20px; border: 1px #000 solid;">padding(20px)</div>

borderまでの上下左右の幅を表します。

padding(0)
padding(10px)
padding(20px)

border

divなどのブロック要素の枠線です。
太さや色、線の形態などを選べます。

【例】

<div style="border: 1px #000 solid;">border(1px,黒色,1本線)</div>
<div style="border: 3px #f00 dotted;">border(3px,赤色,点線)</div> 
<div style="border: 5px #00f double;">border(5px,青色,2本線)</div>

いろいろな線を作ることが可能です。

border(1px,黒色,1本線)
border(3px,赤色,点線)
border(5px,青色,2本線)

border-radius

枠線を丸くできます。
なんとなくおしゃれな感じになりますね。

【例】

<div style="border: 1px #000 solid; border-radius: 0;">border-radius(0)</div>
<div style="border: 3px #f00 dotted; border-radius: 10px;">border-radius(10px)</div> 
<div style="border: 5px #00f double; border-radius: 20px;">border-radius(20px)</div>

4角が丸くなります。
ホントは幅と高さを指定してあげるほうがいいですね。

丸とか半円とか作ることができます。

border-radius(0)
border-radius(10px)
border-radius(20px)

margin

paddingが線の内側に作用するのに対して、
marginは線の外側に作用します。

線の外側の幅(余白)ですね。

【例】

<div style="border: 1px #000 solid; margin: 0;">margin(0)</div>
<div style="border: 1px #000 solid; margin: 10px;">margin(10px)</div> 
<div style="border: 1px #000 solid; margin: 20px;">margin(20px)</div>

borderの外側である上下左右の幅を表します。

margin(0)

次の要素

margin(10px)

次の要素

margin(20px)

次の要素

background-color

背景色を指定することができる要素です。

【例】

<div style="background-color: #aaa; ">background(灰色)</div><div style="background-color: #aaa; ">background(灰色)</div>
<div style="background-color: #00f;">background-color(青)</div> 
<div style="background-color: #f00;">background-color(赤)</div>

指定した色が表示されてます。

background(灰色)
background-color(青)
background-color(赤)

position

ちょいと難しいposition要素。
位置を表すやつです。

相対的な位置と絶対的な位置と固定できる位置があって、
基本は相対的な位置と絶対的な位置を組み合わせて使うことが多いです。

【例】

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;">absolute(絶対座標)</div>
</div>

absoluteは絶対位置。
relativeは相対位置。

absoluteが指定されると親要素のrelativeを探し出します。
そのrelative要素に対するabsolute位置をtop・right・bottom・left要素を指定することで決定しています。

absolute(絶対座標)

ちなみに、topやleftの値をマイナスにすると、なんかいい感じにできます。

absolute(絶対座標)

ちょっと分かりにくいすね。。。

box-shadow

これも良く使われてますね。
ボックスに影をつけるやつです。

枠線の代わりにもできたりします。

【例】

<div style="box-shadow: 0px 0px 2px 4px #aaa;">box-shadow(全体的にボヤーッと)</div>
<div style="box-shadow: 0px 0px 2px 4px #aaa;">box-shadow(右下へ影が伸びる)</div>
box-shadow(全体的にボヤーッと)
box-shadow(右下へ影が伸びる)

display

とりあえずは、htmlで書かれているものを非表示にできると覚えておくと何かと便利です。

【例】

<div style="display: none;">display(非表示になる)</div>

displayでnoneしたものは非表示になります。

display(非表示になる)

list-style

liタグではデフォルトで左側にぽちっと黒丸が付きますが、
これをデザインできる要素です。

なんか色々できるみたいですが、
わたしは黒丸を消すnoneしか使っていません。

【例】

<ul>
<li>list-style</li>
<li style="list-style: none;">list-style(黒丸なし)</li>
<li>list-style</li>
</ul>

黒丸が消えています。

  • list-style
  • list-style(黒丸なし)
  • list-style

opacity

透過度を指定できます。
画像とかをマウスオーバーした時に色が薄くなるのは、
opacityを指定しているからです。

【例】

<div style="opacity: 0">opacity(透明)</div>
<div style="opacity: 0.5;">opacity(半透明)</div>
<div style="opacity: 1">opacity(普通の表示)</div>

指定した値によって透過度が変わってきます。

opacity(透明)
opacity(半透明)
opacity(普通の表示)

text-decoration

文字をデザインできるやつです。
よくaタグ(リンク)の線を消すのに使います。

【例】

<a style="text-decoration: none;">text-decolation(下線を消す)</a>

リンクの下線を消しています。

まとめ

Webサイトのデザインは、
この21個のタグをちゃんと覚えておけば、

ある程度のレベルで作れるんじゃないかなーと思います。

Webサイトを作るときに、少しでも参考にしてもらえたら幸いです。