どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス(WordPress)ではCSSコードを使って、初心者から上級者まで幅広くブログをカスタマイズできます。
CSSは簡単に言えば、見栄えを良くするためのドレスアップシステムみたいなもので、コードを追加していくだけで、ブログのデザインを思い通りに変更できる代物です。
そこでCSSコードの中でも特によく使用するプロパティがあるんですが、初心者の方はそもそも「プロパティってなんだよ！」と思うかもしれませんね。
今回はそんなプロパティについての説明と、初心者なら知っておきたいプロパティ15選をご紹介していきます。
プロパティってなに？
プロパティとは、CSSのデザインを反映させるための要素の１つで、変更する対象を指定するものです。
CSSのコードは基本的に「セレクタ」「プロパティ」「値」の３要素で構成されています。
| セレクタ { プロパティ : 値 ; } |
例えば、セレクタが「ブログ」、プロパティが「背景色」、値が「青色」ならブログの背景は青色になります。
また、「{}」で囲うことで対象となるセレクタにのみプロパティの内容が反映され、複数指定することも可能です。
ここでは複数のセレクタに応用でき、私も良く使っているプロパティをご紹介していくので、CSSでカスタムする際に活用してみて下さい。
良く使うCSSプロパティ１５選
知っておいて損のないプロパティ15選と使い方なども簡単に説明しますので、すぐに活用できるかと思います。
font-size(文字サイズ)
font-size(フォントサイズ)はブログのタイトルやカテゴリー、記事内の文字サイズを自由に調整することができます。
font-size: 16px;
基本は「px(ピクセル)」での指定になりますが、「em」や「％」などで指定することもできます。
margin(外側の余白)
margin(マージン)は、対象物の外側の余白を指定することができます。
margin: 0px;/*全方向の余白*/ margin: 0px 0px;/*上下・左右の余白*/ margin: 0px 0px 0px;/*上・左右・下の余白*/ margin: 0px 0px 0px 0px;/*上右下左の余白*/ margin-top: 0px;/*上の余白*/ margin-right: 0px;/*右の余白*/ margin-bottom: 0px;/*下の余白*/ margin-left: 0px;/*左の余白*/
指定の方法は上記のように色々あるので、使いやすいもので指定していきましょう。
padding(内側の余白)
padding(パディング)は、対象物の内側の余白を指定することができます。
padding: 0px;/*全方向の余白*/ padding: 0px 0px;/*上下・左右の余白*/ padding: 0px 0px 0px;/*上・左右・下の余白*/ padding: 0px 0px 0px 0px;/*上右下左の余白*/ padding-top: 0px;/*上の余白*/ padding-right: 0px;/*右の余白*/ padding-bottom: 0px;/*下の余白*/ padding-left: 0px;/*左の余白*/
内容はmarginとほぼ一緒で、外側を指定するか内側を指定するかの違いなので、合わせて覚えておいて下さい。
ただ、使っているとよくどっちがどっちかわからなくなる時があるので、少し注意しておきましょう。
font-weight(文字の太さ)
font-weight(フォントウェイト)は、文字の太さを段階に分けて太くしたり細くしたりすることができます。
font-weight: normal;/*標準*/ font-weight: bold;/*太字*/ font-weight: lighter;/*一段細く*/ font-weight: bolder;/*一段太く*/
100単位ずつの９段階(900まで)の数値で指定することもできますが、基本的に使用するのは「bold」の太字にすることがほとんどです。
数値を変化させても見た目は標準か太字になるので、使用することはあまりないと思います。
color(文字色)
color(カラー)は文字の配色を変更する時に使います。
color: #fff;/*これは白色*/ color: #0000ff;/*これは青色*/ color: #ffff00;/*これは黄色*/ color: #ff0000;/*これは赤色*/
このように「#fff」などの色コードと呼ばれるものを変更することで、指定した色に変化させることができます。
どんな色コードがあるかは「原色大辞典」を参考にするといいでしょう。
background(背景色)
background(バックグラウンド)は、対象の背景色を変更できます。
background: #fff;/*これは白色*/ background: #0000ff;/*これは青色*/ background: #ffff00;/*これは黄色*/ background: #ff0000;/*これは赤色*/ background: linear-gradient(#f0e68c, #ffa500);/*２色のグラデーション*/ background: linear-gradient(-150deg, #e9967a, #ff6347);/*２色を角度で変化*/
指定の方法は「color」の時と同様ですが、「linear-gradient」の値を使用することでグラデーションを作り出すことも可能です。
text-align(対象の揃え位置)
text-align(テキストアライン)は、文章や指定したエリアの対象物の揃え位置を変更できます。
text-align: left;/*左寄せ*/ text-align: right;/*右寄せ*/ text-align: center;/*中央揃え*/ text-align: justify;/*均等割付*/
「justify」を指定すると、単語などの文字間隔は均等に調整されるようになりますが、私の場合はほとんど使用する機会はない値です。
float(回り込み位置)
float(フロート)は、対象の回り込みをどうするかを指定することができます。
float: none;/*回り込みを解除*/ float: left;/*左寄せにしてその後の要素は右に回り込み*/ float: right;/*右寄せにしてその後の要素は左に回り込み*/
このプロパティは画像の左右に文章を回り込ませたい時などに使用したり、並列に並べたい時にも活用できます。
ただし、携帯やスマホといったモバイルで見ると、横幅が狭いので表示崩れを起こしてしまう場合がある為、パソコンでは回り込みにしてモバイルでは「none」で解除するような使い方になります。
text-decoration(文字の装飾)
text-decoration(テキストデコレーション)は下線や上線、打ち消し線や点滅などの文字装飾を指定できます。
text-decoration: none;/*下線なし*/ text-decoration: underline;/*文字に下線*/ text-decoration: overline;/*文字に上線*/ text-decoration: line-through;/*文字の打ち消し*/ text-decoration: blink;/*文字の点滅*/
このプロパティは文字を強調したいときに使用することができますが、テキストリンクの下線をなくしたいときにもよく活用されています。
width(領域の横幅)
width(ワイド)は、対象領域の横幅を変更できます。
width: auto;/*自動調整*/ width: 100px; width: 100%;
「px」や「％」で指定することができるので、使いやすい方を使用されるといいでしょう。
height(領域の高さ)
height(ヘイト)は、対象領域の高さを変更できます。
height: auto;/*自動調整*/ height: 100px; height: 100%;
使い方から値の数値や決め方は「width」と同様になります。
display(要素の表示形式)
display(ディスプレイ)は、対象をどのように表示させるかの形式を指定できます。
display: none;/*要素を非表示*/ display: inline;/*要素を横並び(初期値)*/ display: block;/*要素を横全面にブロック形式で縦に配列*/ display: inline-block;/*要素は横並びでブロック形式*/
この他にも要素を指定できる値はありますが、主に使用することが多いのは上記の４つになるので、これだけ覚えれば十分だと思います。
また、１つ使用上の注意点としては、「inline」の要素内では「width」「height」の指定ができず、文字数やサイズで左右されるので覚えておきましょう。
box-shadow(対象の影)
box-shadow(ボックスシャドウ)は、指定した対象に影をつけることができます。
box-shadow: 0px 5px 4px -2px #a0a0a0;/*影と色の指定*/ /*左右の影・上下の影・ぼかしレベル・広がる範囲*/
各pxをそれぞれ調整することで、影の位置やぼかしを入れて浮き上がっているように見せることもできます。
transition(変化する時間)
transition(トランジション)は、色の変化や物の動きなどに対するモーションにかかる時間を指定することができます。
transition: 0.7s;/*変化する秒数(初期値は０)*/
「0.7s」の数値をより高くすることで、変化にかかる秒数を遅らせることが可能です。
この場合は0.7秒をかけて、対象を指定した色や形に変化させるということになります。
border(領域の枠線)
border(ボーダー)は、ボックス内に点線や二重線などの枠線を指定することができます。
border: none;/*枠線なし(初期値)*/ border: 3px solid #dcdcdc;/*太さ・１重線・色*/ border: double;/*２重線*/ border: dotted;/*点線*/ border: dashed;/*破線*/
枠線の太さや種類、配色などを自由に組み合わせて使用することが可能です。
まとめ
CSSでカスタマイズを行っていく上で、使いやすいプロパティを知っておくと色々と応用ができるので、「これ試せるかも！」「あれが使えたな。」なんて閃くこともあります。
複数のプロパティを上手く組み合わせることで、自分流のデザインや面白い変化を加えることができますし、CSSに少しずつ慣れてくるとカスタムが楽しくなってきますよ。
ここでご紹介したCSSプロパティ15選は、使用する頻度も多いのでこの機会にぜひ覚えて帰って頂けたらと思います。
| 合わせて読んでほしい |
