最近、記事を書いていく中で少しづつWordPress中級者に近づいて来たかなっ！？と、勝手に感じているWordPressブログ初心者のや～べ～です。
今回は、自分が今まで記事を書いてきた中で、早めに覚えておいた方が良いと思う「厳選CSSリファレンス10選」をまとめていきたいと思います。
まずは、CSSについて少し触れていきたいと思います。
CSSとは？
HTMLで書いたWebサイトに装飾を施す方法です。
HTMLで書いたコンテンツに対応するように、スタイルシートにCSSを記述しておくと、ブラウザがCSSを反映させ、コンテンツを装飾して画面に表示してくれます。
スタイルシートとはstyle.cssなどの事をいい、通常、HTMLファイルとは別に存在します。
※今回の例では、HTMLにCSSを追記する方法で書いています。
テキストに関するCSSリファレンス
1.font-size
フォントの大きさを変更できます。
font-size: 75%;
「コード」
<font style="font-size: 75%">文字の大きさ75％</font> <font style="font-size: 100%">文字の大きさ100％</font> <font style="font-size: 200%">文字の大きさ200％</font>
「表示例」
文字の大きさ75％
文字の大きさ100％
文字の大きさ200％
その他、pxなどでも大きさを指定できます。
詳しくは↓サイトを参考にしてください。
参考サイト：HTMLクイックリファレンス（font-size）
2.font-weight
フォントの太さを変更できます。
font-weight: 700;
「コード」
<font style="font-weight: 400">文字の太さ「普通」</font> <font style="font-weight: 700">文字の太さ「太文字」</font> <font style="font-weight: 900">文字の太さ「さらに太文字」</font>
「表示例」
文字の太さ「普通」
文字の太さ「太文字」
文字の太さ「さらに太文字」
さらに詳しく知りたい方は↓サイトを参考にしてください。
参考サイト：HTMLクイックリファレンス（font-weight）
3.line-height
行の高さを変更できます。
line-height: 48px;
「コード」
<font style="line-height: 48px">ここを基準に</font> <font style="line-height: 48px">↑行が少し高めなので、すき間が広がる</font> <font style="line-height: 80px">↑行がさらに高めなので、すき間がさらに広がる</font> <font style="line-height: 200px">↑行がもっと高めなので、すき間がもっと広がる</font>
「表示例」
ここを基準に
↑行が少し高めなので、すき間が広がる
↑行がさらに高めなので、すき間がさらに広がる
↑行がもっと高めなので、すき間がもっと広がる
他にも、数値だけで指定する方法もあります。
詳しくは↓サイトを参考にしてください。
参考サイト：HTMLクイックリファレンス（line-height）
※フォントの種類も気になると思います。
当サイトの場合は、様々なサイトで良く使われている「メイリオ」というフォントを使っています。
導入方法は↓こちらのサイトを参考に導入してみて下さい。
参考サイト：超簡単！WordPressのフォントを変更する方法と変更時に注意すべきポイント
余白・間隔に関するCSSリファレンス
4.margin,5.border,6.padding
コンテンツの上下左右の余白、間隔を設定することができます。
margin: 10px 10px 10px 10px;
border: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
概念は↓の図のようになります。
他の設定方法は↓サイトを参考にしてください。
参考サイト：HTMLクイックリファレンス（margin）
参考サイト：HTMLクイックリファレンス（border）
参考サイト：HTMLクイックリファレンス（padding）
背景色に関するCSSリファレンス
7.background-color
背景色の色を設定できます。
background-color: #24890d;
「コード」
<font style="background-color: #24890d">背景が緑色</font>
「表示例」
背景が緑色
さらに詳しく知りたい方は↓サイトを参考にしてください。
参考サイト：HTMLクイックリファレンス（background-color）
色を指定する為のカラーコードは↓のサイトを参考にして下さい。
↓カラーコード一覧
参考サイト：モノトーン
RGBと16進数、16進数からRGBにカラーコードを変換できるサイトです↓
↓カラーコード変換（例#24890d⇒rgb(36,137,13)※逆も可）
参考サイト：ColorHexa
※背景色を透過させる方法もあります。↓
background-color: rgba( 36, 137, 13, 0.55 );
最後の0.55の部分が透過度になります。
数値が少ないとより透明になります。
最初の3つの要素はRGBの数値です。
「コード」
<font style="background-color: rgb( 36, 137, 13)">背景が緑色（普通）</font> <font style="background-color: rgba( 36, 137, 13, 0.55 )">背景が緑色（少し透明）</font>
「表示例」
背景が緑色（普通）
背景が緑色（少し透明）
↓サイトも参考になります。
参考サイト：CSS Lecture
参考サイト：にししふぁくとりー
横並び表示に関するCSSリファレンス
8.display
リストを横並びにできます。
display: inline-block;
詳しい使い方は↓のサイトを参考にしてください。
参考サイト：SamuraiBlog
参考サイト：delaymania
表示階層、位置に関するCSSリファレンス
9.z-index
コンテンツの表示階層を設定できます。
z-index: 1;
数字が大きい程、手前に表示されます。
（1～9999までの数値を設定できます。）
例として、当サイト左下のページトップへ戻るボタンとシェアボタンを参考に説明したいと思います。
コンテンツはz-indexを改めて設定していないので、一番下に表示されています。
ボタンは、z-index:9997;と設定しているので、コンテンツの上に表示されています。↓
シェアボタンを押すと、新しいモーダルウンドウが表示されます。
このモーダルウインドウはz-index:9998;と設定しているので、ボタンよりも手前に表示されています。↓
←実際にシェアボタンを押すと、確認できますっ！
10.position
表示位置の設定を変更できます。
position:fixed;
これも先ほどと同じ、シェアボタンの部分に実装しているのですが、position:fixed;と記述しておくと、そのコンテンツが最初に表示された画面上の位置に固定されます。
スクロールしても移動しないので画面に追従しているように表示させることができます。↓
positionの他のプロパティーについては↓のサイトを参考にして下さい。
参考サイト：たねっぱ！
まとめ
厳選！WordPressブログ初心者がまず覚えておきたいCSSリファレンス10選、ということで記事を書いてみましたがいかがでしたでしょうか？
今回紹介したCSSは本当に基本の部分で、デザインに凝ったサイトを創る場合には、さらに色んなCSSを覚える必要があると思います。
知識先行でまず勉強するというのは大変なので、自分のサイトのデザインを変更したいなと思ったら、参考となるサイトを探して、まずはマネしてみるということが重要だと思います。
当サイトもネット上の様々なサイトにて紹介されている方法を参考にして、自分なりにデザインをしています。
WordPress初心者のそこのあなたも様々なサイトを参考にして、「サイトデザインのカスタマイズ」楽しんでみてはいかがでしょうか？
ではではっ！(´∀｀*)ﾉｼ
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
