WordPress

厳選!WordPressブログ初心者がまず覚えておきたいCSSリファレンス10選

★累計PV数:539views アクセス頂いてありがとうございます! (*ᴗˬᴗ)⁾⁾ 
 
 
いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
▼「みなラボ」は「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック(または、長押し)「新しいタブで開く」が非常に便利です♪
 

 
ブログランキング・にほんブログ村へ

※↑それぞれクリックで「みなラボ」へ1票応援&「みなラボ」のランキング状況をご確認いただけます! 


最近、記事を書いていく中で少しづつ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;

 
概念は↓の図のようになります。

marginnado

 
他の設定方法は↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(margin)

参考サイト:HTMLクイックリファレンス(border)

参考サイト:HTMLクイックリファレンス(padding)

 

背景色に関するCSSリファレンス

 

7.background-color

背景色の色を設定できます。

background-color: #24890d;

 
「コード」

<font style="background-color: #24890d">背景が緑色</font>

 
「表示例」

背景が緑色

 
さらに詳しく知りたい方は↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(background-color)

 
色を指定する為のカラーコードは↓のサイトを参考にして下さい。

↓カラーコード一覧

参考サイト:モノトーン

monotonn

 
RGBと16進数、16進数からRGBにカラーコードを変換できるサイトです↓

↓カラーコード変換(例#24890d⇒rgb(36,137,13)※逆も可)

参考サイト:ColorHexa

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;と設定しているので、コンテンツの上に表示されています。↓

shoeabotann2-k

 
シェアボタンを押すと、新しいモーダルウンドウが表示されます。

このモーダルウインドウはz-index:9998;と設定しているので、ボタンよりも手前に表示されています。↓

botann2-k

 
←実際にシェアボタンを押すと、確認できますっ!

 

10.position

表示位置の設定を変更できます。

position:fixed;

 
これも先ほどと同じ、シェアボタンの部分に実装しているのですが、position:fixed;と記述しておくと、そのコンテンツが最初に表示された画面上の位置に固定されます。

スクロールしても移動しないので画面に追従しているように表示させることができます。↓

shoeabotann2-k

 
positionの他のプロパティーについては↓のサイトを参考にして下さい。

参考サイト:たねっぱ!

 

まとめ

厳選!WordPressブログ初心者がまず覚えておきたいCSSリファレンス10選、ということで記事を書いてみましたがいかがでしたでしょうか?

今回紹介したCSSは本当に基本の部分で、デザインに凝ったサイトを創る場合には、さらに色んなCSSを覚える必要があると思います。

知識先行でまず勉強するというのは大変なので、自分のサイトのデザインを変更したいなと思ったら、参考となるサイトを探して、まずはマネしてみるということが重要だと思います。

当サイトもネット上の様々なサイトにて紹介されている方法を参考にして、自分なりにデザインをしています。

WordPress初心者のそこのあなたも様々なサイトを参考にして、「サイトデザインのカスタマイズ」楽しんでみてはいかがでしょうか?

 
ではではっ!(´∀`*)ノシ

 

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

サーバーデータの復元も、過去7日以内ならば、「サ-バーパネル」から簡単に操作可能!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪

 


 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

『WordPressブログの作り方』※初心者必見!(>∀<)ノ☆
 
①どんなブログにするのか考える。
 
 ⇒さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」
 
②レンタルサーバーを借りる。
 
③ドメインを取得する。
 
④ネームサーバーDNS設定をする。
 
 ⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
 
⑤WordPressをインストールする。
 
 ⇒エックスサーバーへワードプレスを簡単にインストールする方法
 
⑥テーマをインストールする。
 
 ⇒僕が「AFFINGER5」を激推しする「3つの理由」
 
 ⇒【かんたん解説】AFFINGER5(アフィンガー5)テーマを購入する方法&手順
 
 ⇒「AFFINGER5」をWordPressへインストールする手順
 
⑦アイコン、ヘッダーなどを作る。
 
 ⇒フリーソフトのみでアイコン作成する方法まとめ
 
 ⇒WPサイト用オリジナルヘッダーデザイン作ってみた
 
⑧お好みにサイトデザインする。
 
⑨サーチコンソール、アナリティクスへ登録する。
 
⑩アドセンスや各アフィリエイトへ登録する。
 
⑪記事を書く。
 
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います!(>∀<)ノ☆
 
 
こちらの記事もオススメ!(>∀<)ノ☆
 
【鼻づまりも即解消】僕が試してみた花粉症にすぐ効くと言われている対策が、超簡単&効果的過ぎてちょっと恐いなと思った話
 
僕が「AFFINGER5」を激推しする「3つの理由」~WordPressブログ収益化への近道のために~
 
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
 
Androidスマホで楽天モバイルの申し込みができない時の解決方法
 
【4/7(水)まで】急げ!楽天モバイルが月額料金プラン『1年間無料』キャンペーン実施中!【祝300万回線達成】
 
『2021年更新版』Windows10も可! Movie Maker「ムービーメーカー」をダウンロードする方法
 
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
 
【2021年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧&出品手数料について
 
 

こちらの記事もよく読まれています。↓(※広告含む)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

▼「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩
 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

▼「Feedly」、「RSS」、「Push7」での購読はこちらから設定して頂けます!
 
follow us in feedly
 
 
▼「みなラボ公式LINE」の友だち追加はこちらからお願いいたします!
新規記事更新時に「お知らせ」させて頂きます!
 

-WordPress
-, ,

© 2021 みなラボ