サイトのデザイン変更でよく使うhtmlのCSSプロパティ一覧。初心者にもオススメ
サイトを運営し慣れてくると、フォントや文章デザインなどを本格的に変更したくなってきます。
しかしサイトのデザインをstyleやCSSで変更しようにも、変更の仕方がわかっていないと記述しようがありません。
今回紹介するのは「文字の大きさ」や「文字の色」といった、デザインを変えるのに必要になるCSSプロパティです。
ブログを始めたばかりのプログラム初心者でも使いやすいもの・よく使うものを中心に紹介していきます。
どんなものがあるのか分からない人はとりあえず参考にしてください。
CSSプロパティとは
CSSプロパティとは「style="~"」や「class="~"」などで設定を変更する際に「"~"」内に記述する変更内容のことです。
例えばフォントサイズを変更する際には「<p style="font-size:24px">~</p>」と記述します。
このサイズを変更する「font-size」という部分がCSSプロパティと呼ばれます。
省略して「プロパティ」と呼ばれもするので、htmlやCSSで「プロパティ」と出たらCSSプロパティのことだと思ってください。
プロパティはプログラムではありますが、英語で例えるところの単語に当たります。
そのためプログラムに生れていない人でも、書く場所とプロパティの意味さえ覚えれば意外と簡単に記述できるようになります。
今回紹介するCSSプロパティは、サイトの文章などのデザイン変更でよく使うものばかりです。
これらのプロパティを覚えておけば、大抵のことはできるようになります。
文章の色などを変える・枠線を引くなど簡単なものですが、これだけでも記事の印象がガラッと変わります。
今の自分のサイトが味気ないと思っているなら、後述のプロパティをよく覚えておきましょう。
クラスなどに記述するプロパティ一覧
デザインの設定をする際のプロパティの紹介を簡単にしていきます。
数が多いので、とりあえずデザインを変える際に最低限覚えておきたいものに絞ります。
・color:文字色を指定
・text-weight:文字の太さを指定
・text-align:文章などを横方向に左・中央・右で配置
・line-height:行間の高さを指定
・background-color:背景色を指定
・border:枠線を引く
・border-radius:領域の角を丸くする
・width:幅を指定
・padding:文章などの余白(内側)の設定
・margin:文章などの余白(外側)の設定
・float:画像などを寄せて、横に画像や文章を配置できるようにする
・clear:floatの設定を解除する
・display:文章などをどう画面に表示するか指定
使い方は「style="~"」や「class="~"」といった文章中に書くhtml文や、CSSクラス内に書く際の記述の仕方は「プロパティ名:変更内容;」で統一されています。
記事中で直接変更したい場合は、
<p style="font-size:24px;color:#FFFFFF;">あいうえお</p>
と記述します。
「p」は「div」「span」でも問題ありません。
クラスを設定する場合には、「style.css」やWordPressなら「追加CSS」に、
moji{
font-size:24;
color:#FFFFFF;
}
と記述しておき、記事の文章中で、
<p class"moji">あいうえお</p>
とクラス名だけ呼び出せば簡単にデザイン変更できます。
「moji」は自分で設定できるクラス名なので、自分でわかりやすいクラス名を付けましょう。
「:」と「;」を書き忘れるとエラーが起きたり、変更が反映されないので忘れないように記述します。
特に変更しないのなら書かなければいいので、必要なものだけ記述していきましょう。
これだけ知っていれば大抵のデザインは出来るようになるので、簡単に目を通してどんなものがあるか知っておいてください。
わかりやすいプロパティ
ここからはhtml初心者でもわかりやすいプロパティの紹介をします。
「style」などで変更した部分のみに反映されるので、細かいことを考えずに済みます。
font-size:文字の大きさを指定
font-sizeは文字の大きさを設定するのに使うプロパティです。
<p style="font-size:24px;">~</p>
大抵は24pxや1.0emといった数値で記述されることが多いです。
また次のようなキーワードで指定することもできます。
・x-small
・small
・medium…標準
・large
・x-large
・xx-large…一番大きい
キーワード指定では、1サイズ違うと2割ずつ大きさが増減します。
color:文字色を指定
colorは文字の色を指定するのに使うプロパティです。(「font」colorじゃないので注意)
いくつか指定の仕方があります。
<p style="color:#ff0000;">~</p>
<p style="color:red;">~</p>
<p style="color:rgb(255,0,0);">~</p>
<p style="color:rgba(255,0,0,1);">~</p>
#~と記述する形式と、「red」「blue」のように色の種類を記述する形式、rgb()で記述する方法があります。
rgba()は最後の1を0.2など0に近づけると透明になっていきます。
font-weight:文字の太さの指定
font-weightで文字の太さの調節ができます。
数値で細かく指定する方法と、名称で大雑把に指定する方法があります。
<p style="font-weight:bold;">~</p>
通常の太さの設定はnormal、あるいは400になります。
普通に太字にするならboldでいいと思います。
text-align:文章などの横方向の配置設定
text-alignで文章などを横方向に「左寄せ」「中央寄せ」「右寄せ」などに指定できます。
<p style="text-align:center;">~</p>
left…左寄せ
center…中央寄せ
right…右寄せ
他にも
justify…均一化
justify-all…最後の行を含め均一化
match-parent…親要素を引き継ぐ
等がありますが、基本は最初の左・中央・右だけ覚えておけばなんとかなります。
background-color:背景色の変更
background-colorで画面や文章などの背景色の指定ができます。
<p style="background-color:#00ff00";>~</p>
<p style="background-color:red;">~</p>
<p style="background-rgb(255,0,0);">~</p>
<p style="background-rgba(255,0,0,1);">~</p>
font-colorと同じで#~、英語表記、rgb()、rgba()の記述の仕方があります。
border:枠線を引く
borderは文章などに線を引いてくれるプロパティです。
書き方はプロパティの後に線の種類・線の太さ・線の色と記述していきます。
<span style="border:solid 1px #000000;">~</span>
このように書くと黒い線で囲うように枠線が引かれます。
文章の下などの特定の場所のみに枠線を引きたい場合は以下のようなプロパティを使います。
border-top…上に線を引く
border-bottom…下に線を引く
border-left…左側面に線を引く
border-right…右側面に線を引く
例えば特定の文章の下のみに線を引きたいならこうなります。
<span style="border-bottom:solid 1px #000000;>~</span>
あいうえお
線の種類にもいくつかあり
double…二重線
などが主に使う種類でしょう。
border-radius:領域の角を丸くする
border-radiusで背景色などを設定したとき、四隅の角を丸くできます。
<p style="border-radius: 15px;">~</p>
<p style="border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;">~</p>
基本は数値で角に丸みをつけていきます。
15pxでこのような丸み
このように角が取れて丸くなってます。
4隅を一括で指定するなら「border-rasius:15px」と数値を一つだけ書きます。
各角ごとに指定したいなら、10px・5pxで左上、20px・15pxで右上、30px・25pxで右下、40px・35pxで左下の角と、時計回りで設定します。
width:領域の幅を指定
widthで指定した領域の幅を変更できます。
<p style="width:60%;">~</p>
pxや%といった数値で指定します。
width:60%で画面の60%の長さの幅にします。
セットで「height」という高さを指定するのもありますが、「width」に比べると使う機会は少ない気がします。
html初心者だと少々わかりにくいプロパティ
ここからはデザイン変更にはもちろん覚えたいものですが、少し仕組みの理解が必要なプロパティです。
「style」などで囲んだ外にも影響が出るので、よく理解しないとデザインが崩れる恐れがあります。
line-height:行間の幅の設定
line-heightで行間(文章の領域の高さ)を設定できます。
<p style="line-height:1.5;>~</p>
高さは数値で設定しますが、pxでやると文字の大きさによってはデザインが安定しないので、%や1.5のように割合で決定したほうがいいです。
line-height:1.0
あいうえお
かきくけこ
line-height:2.0
あいうえお
かきくけこ
line-heightは基本的には「body」タグクラスや「p」タグクラスに記述して、一括で文章全体の行間を設定します。
padding:余白(内側)の設定
paddingは文章などの内側の余白の設定をします。
<p style="padding: 5px 10px 5px 10px;">~</p>
<p style="padding-top:10px;">~</p>
paddingの書き方は多くあり、まとめて記述する方法と部分ごとに記述する方法があります。
padding: 5px 10px…左から上下・左右で指定。
padding-top…上の余白のみ指定。
padding-bottom…下の余白のみ指定。
padding-left…左の余白のみ指定。
padding-right…右の余白のみ指定。
文章や領域などの背景色の長さや幅を広げたいときによく使います。
paddingでこのように領域内の幅を広げる
上下の文章との間を開けたいのなら後述する「margin」を使うので、間違えないようにしましょう。
margin:余白(外側)の設定
marginは文章などの外側の余白の設定をします。
<p style="margin: 5px 10px 5px 10px;">~</p>
<p style="margin-top:10px;">~</p>
marginの書き方はpaddingと同じです。
ただmarginではpaddingと違い数値をマイナスにすることができます。
margin: 5px 10px…右から上下・左右で指定。
margin-top…上の余白のみ指定。
margin-bottom…下の余白のみ指定。
margin-left…左の余白のみ指定。
margin-right…右の余白のみ指定。
marginはpaddingと違い文章などの外側の余白をつくるときに使います。
【これはmargin設定無しの文章】
【margin-top: 2em…上の行間を文字2つ分開ける】
【margin-top: 3em…上の行間を文字3つ分開ける】
働きはpaddingと似ていますが、背景色の様な領域を広げることは出来ないので注意しましょう。
枠線や画像が上下の文章と近かったりするとき、間を開けるように使えます。
float:画像・文章を回り込ませ横並びにする
floatは主に画像を横並びにする・横に文章を配置する際によく使うプロパティです。
<p style="float:left;">~</p>
right…右に寄せ、次の要素を左に配置できるようにする
通常画像コードの直後に文章を記述しても、強制的に次の段落に表示されてしまいます。
そんなときfloatで画像を左に寄せたりすれば、画像の横に文章などを配置出来るようになります。
このことを「回り込み」といいます。
寒い時期でも
きれいに咲いてくれました。
ただしfloatで回り込むよう設定したら、後述する「clear:~」で必ず回り込みを解除してください。
詳しくは次項。
clear:floatの設定の解除をする
clearはfloatとセットになっていて、floatの回り込み設定を解除できます。
<p style="clear:both;">~</p>
clearを記述すれば、記述以降の文章などにfloatの設定が反映されなくなります。
right…float:rightの設定を解除。
both…両方の設定を解除。
もしfloatの設定を解除しないままだとこうなります。
寒い時期でも
きれいに咲いてくれました。
floatの設定を解除しないと、以降の文章などがずっと画像などの横に回り込んで表示され続けてしまいます。
解除するには<div style="clear:both"></div>とでも書けば回り込みが解除され、
このように通常の表示に戻ります。
別に内容無しの「div」でなくとも「p」タグや自作したクラスでもいいので、floatを使った後にclearを書いて回り込みを解除しましょう。
display:画面の表示形式の指定
displayで文章や画像をどう画面に表示するか設定できます。
<p style="display:block;">~</p>
inline…文章の幅に合わせて表示。高さ・幅の変更は不可。横並び可。
inline-block…inlineとblockの組み合わせ。自動的に幅を合わせながら高さ・幅の変更可。横並び可。
none…何も表示しなくなる。
少々分かりづらいので、背景色を交えて表示して見ます。
inlineで文章の長さの分だけ表示
blockで画面いっぱいに表示
このようにどこまで画面に表示するかを指定できます。
特に見出しのデザインや広告をダブルレクタングルで表示するときなどによく使うと思います。
数値の指定の仕方
まずはプロパティで使う数値の書き方を紹介します。
プロパティにはフォントサイズなどいくつか数値を指定するものがありますが、数値の記述の仕方がいくつかあります。
大抵は共通して使われているのでこれらの中から選びます。
単位を加えて記述するものや数値のみの場合もあるので、「こういった場合はこれ」とある程度統一して使っていきましょう。
px
ピクセル(画素)で指定します。
font-size:24pxといったように記述します。
数値設定の中では一番細かく、分かりやく設定できます。
ピクセルという画素数で指定するため、どんな媒体の画面でも大きさを固定して表示できます。
フォントなどの小さい数値設定の場合はこれを使っていくことになると思います。
%
パーセントで指定します。
何も設定しない場合、あらかじめ100%で指定されています。
大抵は幅などのサイズを指定するときに使うと思います。
枠線などで囲んだ親要素の中で使うと、その親要素の長さを基準にするようになります。
例:画面サイズ80%の枠の中で50%と指定すると、画面比率で40%になる
em
文字の高さと比較して指定します。
1emは100%、1.5emは150%の大きさといった感じです。
ex
小文字のxを基準にして大きさを指定します。
1exならx1個分、2exならx2個分の大きさになります。
他のプロパティと比べるとあまり使う機会はないかもしれません。
数値のみ
1.5などの数値だけなら、×1.5します。1.5emや150%と同じです。
ただfont-weightのように500といった大きい数値になるプロパティもあるので、プロパティによっては数値の範囲に違いが出ます。
試しに文章デザインを変えてみる
ここで紹介したプロパティを使っていくつかデザインを変えた文章を書いてみます。
こうして見出しなどのデザインを変えてみましょう。
(なお見出しの場合は太字に設定しなくても、ある程度は太くなります)
見出しタイトル
<p style="background-color: #ffff00;
border-left: solid 3px #0000ff;
font-size: 24px;">見出しタイトル</p>
見出しタイトル
<p style="display: inline-block;
padding: 10px 30px 5px 20px;
background-color: rgba(255,255,0,0.5);
border-left: double 8px #00ffff;
font-size: 24px;">見出しタイトル</p>
見出しタイトル
<p style="width: 50%;
text-align: center;
background-color: #00ff00;
font-size: 24px;
color: #ffffff;">見出しタイトル</p>
これくらい覚えれば何とかなる
これで文章デザインを変えるのに最低限必要なプロパティの紹介を終わります。
よほどこだわったデザインでも無い限り、ここで紹介したプロパティで足りることが多いと思います。
まずはこれらのプロパティを覚えて、自由にデザインを変えられるようにしましょう。